Rework CSS plugin for generating custom, lightweight flex grids.
MIT License
Rework CSS plugin for generating custom, lightweight flex grids.
Every project is different.
You should be able to create a grid on the fly that's catered to your project. If you only want 8 columns you can create a grid with exactly 8 columns rather than being stuck with 12. This helps to avoid unnecessary bloat in your CSS. This grid generator uses flex to dramatically reduce CSS declarations in the grid system.
Rework Flex Grid creates a grid system that is 100% mobile-first. This ensures that mobile browsers aren't forced to parse media queries when they're not applicable. Less parsing means faster rendering which means faster load-to-content times which means happier users. Yay.
You come up with your own naming scheme for classes. You set the breakpoints. You decide if you want column offsets. It's all in the configuration.
All grid classes have a specificity value of 10. They consist of one class, and exactly one class, resulting in CSS similar to:
.gridClass {
/* ... */
}
.gridClass-rowClass {
/* ... */
}
.gridClass-rowClass-columnClass-1-12 {
/* ... */
}
.gridClass-rowClass-columnClass-offset-1 {
/* ... */
}
@media screen and (min-width: 32rem) {
.gridClass-rowClass-columnClass--sm {
/* ... */
}
}
This ensures that the grid won't stomp on your styles, and makes it easy for you to override defaults.
npm install --save rework-flex-grid
var fs = require('fs'),
rework = require('rework'),
flexGrid = require('rework-flex-grid');
var flexGridOptions = {
numColumns: 12,
classNames: {
grid: 'g',
row: 'r',
col: 'c'
},
mediaQueries: {
sm: '32rem',
md: '48rem',
lg: '64rem'
},
offsets: true
};
var css = fs.readFileSync('css/my-file.css', 'utf8').toString();
var out = rework(css).use(flexGrid(flexGridOptions)).toString();
Note: This plugin produces CSS that should be prefixed.
numColumns
, Number for the number of columns. Defaults to 12
.classNames
, Object with grid
, row
, and col
. Defaults to g
, r
, and c
respectively.mediaQueries
, Object with sm
, md
, and lg
. Defaults to 32rem
, 48rem
, and 64rem
respectively.offsets
, Boolean to determine whether to include offsets or not. Defaults to false
.MIT
git checkout -b my-new-feature
)git commit -am 'Add some feature'
)git push origin my-new-feature
)Crafted with <3 by John Otander (@4lpine).