How Can I Make A Semantic Grid System with Bourbon & Neat?
April 3, 2017
I’ve used Bourbon and Neat on a couple projects recently and have found the Neat grid to be simple and easy to use. These are a few of the things I particularly like about it:
- Rows are determined with styles instead of extra divs which makes it flexible and easy to work with
- Because it doesn’t rely on classes in the html, it’s easy to define different column counts at different breakpoints
- It’s easy to create nested grids with consistent gutter widths
- The built-in visual grid overlay for development is easy to toggle on and off
- There are several add-on libraries based on Bourbon and Neat. For example, http://empties.bourbon.io is a library of un-styled components that give you just enough html and javascript to get started quickly
Here’s an article to get you up and running:
Easy installation instructions for sass, neat and bourbon
And here’s an in-depth explanation of how the Neat grid works, straight from Will McMahan, the creator: