flexblocks

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

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

Using Flexblocks is easy! Here's a guide, click to enlarge.

Customizing Flexblocks

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.

Getting Help

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.