rootstrap-library/README.md

Rootstrap library mixins for less.js

rootstrap-library
========================

LESS mixins library that includes utilities for creating and organizing styles within your project.

## lessc usage

To install..

```
npm install -g rootstrap-library
```

## Programmatic usage

To add the library to your LESS project directly:

```
@import 'rootstrap-library/rootstrap.less';
```

Screen name and breakpoints list variables will need to be added manually if not using the rootstrap gulp plugin, which generates them automatically. See https://github.com/skyshab/less-plugin-rootstrap/

```
@screen-list: mobile, tablet, desktop;
@screen-list-min: "", 768px, 981px;
@screen-list-max: 480px, 980px, "";

```

To apply styles within a specific screen range within your LESS files:

```
.screen('default') {
    .my-selector {
        color: white;
    }    
}

.screen('tablet-and-under') {
    .my-selector {
        color: red;
    }
}

.screen('desktop') {
    .my-selector {
        color: blue;
    }
}

/* output all styles */
.get-screens();

```

The above would output the following CSS:

```
.my-selector {
    color: white;
}

@media screen and (max-width: 980px) {
    .my-selector {
        color: red;
    }    
}

@media screen and (min-width: 981px) {
    .my-selector {
        color: blue;
    }    
}

```

Note that get-screens() will only generate a single instance of each media query. Further styles added to the same screen will show up there as well. Best practice is to call get-screens() after adding all of your less files.