Rework Flex Grid
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:
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 =rework =flexGrid = ;var flexGridOptions =numColumns: 12classNames:grid: 'g'row: 'r'col: 'c'mediaQueries:sm: '32rem'md: '48rem'lg: '64rem'offsets: true;var css = fs;var out = ;
Note: This plugin produces CSS that should be prefixed.
numColumns, Number for the number of columns. Defaults to
classNames, Object with
col. Defaults to
mediaQueries, Object with
lg. Defaults to
offsets, Boolean to determine whether to include offsets or not. Defaults to
- Create a mini app to allow people to generate grids in their browser.
- Offset configuration.
- Media queries.
- Media query configuration.
- Make default grid classes responsive 12 > 6 > 1
- Fork it
- Create your feature branch (
git checkout -b my-new-feature)
- Commit your changes (
git commit -am 'Add some feature')
- Push to the branch (
git push origin my-new-feature)
- Create new Pull Request