rootstrap-library v0.0.1

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.