flexgrid.less
flexbox-based grid system for older browsers.
I don't think that it's production ready software yet. But feel free to test it and improve it! :)
Use Issues
tab to share your ideas etc!
Usage
npm install flexgrid.less
Import in project and use classes.
Classes
Name | Example | Description |
---|---|---|
fg |
fg |
Container |
fg-w-X |
fg-w-1 |
Set width of child. Replace X with number. |
fg-h-X |
fg-h-2 |
Set height of child. Replace X with number. |
Examples
- Container with one child 5x4
- Container with 4 even rows and 3 even columns (if used default grid is 16x9)
- Please check out
demo/index.html
Own grid
Main build is 16x9 grid. But you can create own grid!
Command line
- Clone repo
- Install dependencies (
npm install
) - Run command:
npx lessc --modify-var='c=NUMBER OF COLUMNS' \ --modify-var='r=NUMBER OF ROWS' \ --modify-var='g=GAP SIZE' \ src/fg.less dist/fg.css
E.g. Grid 4x3 with gap size 2px:
npx lessc --modify-var='c=4' \ --modify-var='r=3' \ --modify-var='g=2px' \ src/fg.less dist/fg.css
Within LESS file
- Install (
npm install flexgrid
) - Import in LESS:
'flexgrid/flexgrid.less';
- Run mixin:
.flexgrid@numberOfColumns, @numberOfRows, @gapSize;
E.g. Grid 4x3 with gap size 2px:
.flexgrid4, 3, 2px;