Free your HTML of .row & .col classes with Bourbon Neat

Neat is my go-to grid framework for Sass. It’s perfect for prototyping responsive websites and web UI components, by letting you create a grid entirely in Sass (you don’t need those pesky .row and .col classes) so you can keep your HTML nice and semantic.

The syntax is straightforward:

$max-width: 90%;
$grid-columns: 9;

aside   { @include span-columns(3); }
section { @include span-columns(6); }

Creating:

Awesome! If you go one step further and use a consistent HTML structure across your site you can now tweak your grid system from just Sass. In my experience this cuts out a lot of switching between HTML and Sass while prototyping.

Check out the docs and source on GitHub to get started.

Also, if you haven’t listened to episode #93 with Phil LaPier yet, you should add that to your list of things to do.