gulp-ruleexpander
v1.0.2
Published
Express Templating for Functional CSS util classes
Downloads
2
Readme
Rule Expander
##Usage
npm install --save-dev gulp-ruleexpander
var RuleExpander = require('gulp-ruleexpander');
gulp.task('default', function(){
return gulp.src('./site.css')
.pipe(RuleExpander(require('./config.json'))) // Loads config from local file
.pipe(gulp.dest('./dist'));
});
##Reasoning I recently became interested in 'Functional CSS'. It's great, and I went kinda crazy with Utility classes. The main problem I encountered was to do with maintainability:
//Backgrounds
u-bg-colour-1 {background-color:@colour-1;}
u-bg-colour-2 {background-color:@colour-1;}
u-bg-colour-3 {background-color:@colour-1;}
u-bg-colour-4 {background-color:@colour-1;}
//Colors
u-co-colour-1 {color:@colour-1;}
u-co-colour-2 {color:@colour-1;}
u-co-colour-3 {color:@colour-1;}
u-co-colour-4 {color:@colour-1;}
//Border-Colours
...
You may be able to see that adding a colour, will require modifying many different parts of the file. It gets worse when you introduce modifiers:
//Backgrounds
u-bg-colour-1 {background-color:@colour-1;}
u-bg-colour-2 {background-color:@colour-1;}
u-bg-colour-3 {background-color:@colour-1;}
u-bg-colour-4 {background-color:@colour-1;}
//Backgrounds: hover
u-bg-colour-1--hover:hover {background-color:@colour-1;}
u-bg-colour-2--hover:hover {background-color:@colour-1;}
u-bg-colour-3--hover:hover {background-color:@colour-1;}
u-bg-colour-4--hover:hover {background-color:@colour-1;}
//Backgrounds: selected
u-bg-colour-1--selected[aria-selected=true] {background-color:@colour-1;}
u-bg-colour-2--selected[aria-selected=true] {background-color:@colour-1;}
u-bg-colour-3--selected[aria-selected=true] {background-color:@colour-1;}
u-bg-colour-4--selected[aria-selected=true] {background-color:@colour-1;}
//Colors
...
You will probably also notice that a lot of code is re-used, making maintenance a time-consuming and laborious process. The above, when using CSS-Rule-Expander, can be represented by the following:
//Backgrounds
.u-bg-${colours}${modifiers.name}${modifiers.selector} {background-color:${colours};}
//Colors
...
This is all based on JSON data behind the scenes, so adding a colour, is as simple as inserting a string.
More Examples:
//Backgrounds
.u-bg-${colours}${modifiers.name}${modifiers.selector} {background-color:${colours};}
//Colors
.u-co-${colours}${modifiers.name}${modifiers.selector} {color:${colours};}
/* Borders
---------------------------------- */
//Colours
.u-bo-c-${colours}${modifiers.name}${modifiers.selector} {border-color:${colours};}
//Border Widths
.u-b${directions.char}-${lengths} {border-${directions.name}:${lengths}px;}
//Border Styles
.u-bs-${borderstyles} {border-style:${borderstyles};}
{
"colours": [ "red", "green"],
"modifiers": [{
"name": "--hover",
"selector": ":hover"
}, {
"name": "--active",
"selector": ":active"
}],
"directions": [{
"char": "t",
"name": "top"
}, {
"char": "b",
"name": "bottom"
}, {
"char": "l",
"name": "left"
}, {
"char": "r",
"name": "right"
}],
"lengths":[0, 1, 2, 5, 10, 15, 30, 50],
"borderstyles":["solid", "dashed"]
}
The above becomes 165 lines worth of utility classes. Notice there are no 'each' loops, everything gets automatically unpacked.