Flexblocks is a lightweight, easy-to-learn CSS layout system, designed to fix the two biggest pain points of new CSS users: alignment syntax and margin edgecases. For a detailed explanation of how Flexblocks is different, check out the announcement blog post.
Installing Flexblocks is simple — if you're just using plain CSS, just download dist/flexblocks-responsive.css
. If you're a SCSS user, download the contents of src
, and just include
the contents of flexblocks-responsive.scss
.
Using Flexblocks is easy! Here's a guide, click to enlarge.
If you change the contents of flexblocks-responsive.scss
, you can update the default widths of the gap
classes, and add an optional prefix to all class names. To recompile the SCSS into CSS, you can run npm install; npm run build
.
I'm available on Twitter and am more than happy to answer any questions/concerns/thoughts. If you're having issues or aren't sure how to do something, feel free to let me know.