Giter Club home page Giter Club logo

incuna-sass's Introduction

Incuna Sass Mixin Library

This is a sass library of useful mixins maintained by Incuna. It is compatible with ruby Sass and node-sass/libsass, the latter being the preferred option

Contents

Requirements

Node-sass

  • node >= 0.12
  • node-sass >= 3.4.1
  • grunt >= 0.4.5

###Ruby sass

  • sass >= 3.3.0.rc.1
  • compass >= 1.0.0.alpha.17 (Compass dependency was removed in 5.0.0 - use release 4.3.0 for Compass projects)

Installation

Incuna sass can be installed via npm or bower

bower install incuna-sass --save

or

npm install --save-dev incuna/incuna-sass

Usage

Basic Usage

To use incuna-sass with tools like gulp.js, Grunt, or directly with node-sass, provide the path to incuna-sass in your Sass config. There are a couple of convenience methods for this, depending on whether you want Sass to include additional directories or not.

includePaths Property

The includePaths property returns an array of incuna-sass paths to use in your config.

var incunaSass = require('incuna-sass');
incunaSass.includePaths // Array of folder paths

Grunt usage

Using grunt-sass

The grunt-sass task uses node-sass (LibSass) underneath, and is the recommended way to use Grunt with incuna-sass.

Example config:

grunt.initConfig({
  sass: {
    dist: {
      options: {
        includePaths: require('incuna-sass').includePaths
      },
      files: {
        'path/to/output.css': 'path/to/input.scss'
      }
    }
  }
});

Using grunt-contrib-sass

If you are using the Ruby version of Sass with node-bourbon, then you will need to use the grunt-contrib-sass task instead.

Example config:

grunt.initConfig({
  sass: {
    dist: {
      options: {
        loadPath: require('incuna-sass').includePaths
      },
      files: {
        'path/to/output.css': 'path/to/input.scss'
      }
    }
  }
});

Stylesheet usage

Once you have declared your import paths correctly, incuna-sass will be available to import in your sass files like this:

@import "incuna-sass";

Development

All development on incuna-sass should be made via github bug reports and pull requests.

Local checkout

To make updates and develop on incuna-sass you'll likely want to link a checked out version of the git repoistory into your own project, rather than use the standard installation. This is easy to do via bower or npm.

  1. git clone -p incuna/incuna-sass
  2. cd incuna-sass
  3. bower link or npm link
  4. cd project_dir
  5. bower uninstall incuna-sass && bower link incuna-sass or npm uninstall incuna-sass && npm link incuna-sass

This creates a symlink in your bower/npm packages folder to the folder containing your git reposioroy, allowing you to edit the incuna-sass source and see changes reflected in your project.

Releases

When you've done some development, you'll need to release a new version of incuna-sass.

Follow these steps to release a new version

  1. Increment the version in package.json
  2. Edit CHANGELOG.md with changes since last release
  3. Tag the repository with the version number: e.g. git tag 2.1.4
  4. Remember to push the tags: git push --tags

Version 5

Incuna-sass is getting a bit of an overhaul.

Incuna-sass 5.0.0 removes compass dependent code from the Incuna-sass library. This means the following files have been removed and will not be supported:

  1. browsers.sass
  2. inline-block.sass
  3. placeholders.sass
  4. sprites.sass
  5. svg-background.sass - This was replaced by two new svg mixins in svg.sass

To replace some of the Compass mixins and helpers are now using Bourbon. This library includes mixins and helpers for things that are included in Incuna-sass so we have moved those files, and any others that are only needed to support legacy browsers into a legacy folder that can be added to projects separately when needed. All of these mixins and helpers have been renamed so that they are now prefaced with legacy- to avoid overwriting / conflicts with Bourbon code

  1. box-sizing.sass
  2. clearfix.sass
  3. font-face.sass
  4. icomoon.sass
  5. pseudo-elements.sass

incuna-sass's People

Contributors

grahamgilchrist avatar gregjoy1 avatar henrahmagix avatar libbychapman avatar ninjanails avatar pandalion avatar perry avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

incuna-sass's Issues

Close source this repo?

This repo is open source, but doesn't seem to offer any community benefit. Would anyone use this outside of Incuna projects?

It also contains various mentions of ePatient and its functionality. Nothing too concerning, but we would need to be more careful if there's a good reason to keep it open.

cc @incuna/frontend

Versioning

Suppose that we have the following structure:

master - this contains all of the common ground
web - adds IE stuff, other browser specific stuff
edetail - iPad stuff
epatient - not keen on this at all, but could be based on the web branch and contain some sensible defaults.

In theory you should never use the master branch, you would use one of the branches, but you would update it and version it accordingly.

How would the versioning work in a system like this?

master could be on v0.3, but since that change, several new features have been added to the web branch, bumping the version.

Would it be sensible having a changelog and versioning per branch?

Any thoughts @incuna/frontend @maxpeterson?

Document incuna sass

Here is the list of things that need documentation. For documenting style reference see https://github.com/incuna/incuna-sass/blob/master/incuna-sass/mixins/_svg.sass

Documentation should explain what the code does, why it's needed and provide examples of when / how it can be used.

If the file is not something we use anymore / need for currently supported browsers please make a note of this as well.

Mixins

Helpers

Functions

Components

Root

@incuna/frontend please find some time to look these over and add some documentation. Alternatively you can come and tell me what it does / why we need it and I'll add the docs.

Define structure

@incuna/frontend How does this sound?

Have master as the base (lots of mixins, helpers, etc) and then have epatient, edetail, ... branches that are kept in sync with the core stuff in master, but has additional stuff on top of that?

I know that with bower you can install a git repo from a specific revision or a specific branch if you provide the zip url. Obviously edetails would need to be updated to use bower for this as jam is a javascript package manager, not a front-end package manager.

Any thoughts?

Add repeat function

Via @henrahmagix

@function repeat($str, $times: 3, $join: '')
    $longStr: ''
    @for $i from 1 through $times
        @if $i > 1
            $longStr: $longStr + $join + $str
        @else
            $longStr: $longStr + $str
    @return #{$longStr}

body
    content: repeat(foo bar baz)
    content: repeat('gum foo', 5, ', ')
body {
  content: foo bar bazfoo bar bazfoo bar baz;
  content: gum foo, gum foo, gum foo, gum foo, gum foo;
}

Fine tuning

@incuna/frontend can we have a discussion about this library? I'd like to get it de-compassed so we can stop slowing our grunt down so much and generally tidy it up / make it better / more useful.

So I know that @grahamgilchrist has suggested splitting it into 2 libraries, one with compass, one without. Thoughts about that? How do we go about it?

From what I can see not too much of this is using compass. Obviously sprites but we're working on a solution to that. The only other things I can see are a couple of instances of @include background-size (is that necessary anymore?). And some stuff in modal.sass. Am I missing anything?

Also I'm not convinced that everything in here is necessary, so a good first step would be to remove anything we no longer feel is useful. For example I think the inline-block and box-sizing helpers can go, there's no reason for them that I can see, both of those things are pretty widely supported now. (also getting rid of box-sizing would bring us one step closer to getting rid of compass). Does anybody disagree? Can anything else be removed?

There's also a lot of stuff in here that I either don't understand or can't see the purpose of. So it would be good to get some use cases for when these things might be helpful and some documentation for how they could be used. And possibly some of these things aren't necessary? I don't know.
Here's my list:

  • visually-hidden
  • vertical-center
  • overflow-scroll
  • image-replace
  • icomoon (I think this is an iconfont thing, do we want to be supporting this still?)
  • clearfix (I know we use this, I've used it, but I don't understand why it's better than clear:)
  • messages (I can't really tell what this is intended to be used for)

So let's discuss these things and their purpose and maybe we can (between us :D) get some documentation into the files.

And feel free to add to the list. I made checkboxes so we can check them off as we make decisions :)

Replacing compass mixins

We are using several compass mixins in this library that we need to replace with something else so we can continue to support the files.

I have made new box-sizing helpers to replace the compass reliant ones we had before in #51. Will these suffice? We could easily make a mixin to do the same thing...

In #51 I also replaced all instances of @extend %inline-block with display: inline-block

These are the remaining compass reliant mixins that I found in the library:

  • border-radius
  • box-shadow
  • transition (this one had several varieties with different suffixes)
  • translate

so do we want to write our own mixins to replace these? Or use another library, like bourbon?

@incuna/frontend discuss

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.