grid
BEMish grid component
Install
$ npm install cssrecipes-grid
Default grid implementation is using inline-block+font-size 0 method:
;
If you want, an alternative grid based on flexbox is available in cssrecipes-grid/flex.
;
Both rely on same classes, so generic documentation below should works both implementations"
Advice: you can use size utilities from cssrecipes-utils
for convenience.
It includes .r-(all|min|max)*
classes used in the examples below to define grid cells width.
Recommanded install 👌
$ npm install cssrecipes-utils cssrecipes-grid
;;/* all, max (desktop first), min (mobile first) */; /* Refer to cssrecipes-utils install doc to know more. https://github.com/cssrecipes/utils#install Or check examples below.*/
Usage
First of all, you can override all these custom properties according to your needs (here are default values):
Mobile-first
Include deps
;;;;
Grid
size
Define your {} {} /** and the rest of it */
Use your grid
<!-- your content--> <!-- your content-->
Desktop-first
Include deps
;;;;
Grid
size
Define your {} {} /** and the rest of it */
Use your grid
<!-- your content--> <!-- your content-->
Without responsive
Include deps
;;
Grid
size
Define your
Use your grid
<!-- your content--> <!-- your content-->
Testing
To generate a build:
$ npm run build
To generate the testing build.
$ npm run build-test
Basic visual tests are in test/index.html
.
Contributing
Work on a branch, install dev-dependencies, respect coding style & run tests before submitting a bug fix or a feature.
$ git clone https://github.com/cssrecipes/grid.git$ git checkout -b patch-1$ npm install$ npm test
Changelog
License
Acknowledgements
This grid module has been inspired by SUIT CSS components-grid & SUIT CSS utilities: size