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
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.