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:

Neat 2.0 Building the future of floated Sass grids

Stay in Touch!

Subscribe to our newsletter.

Solutions Architecture

browse through our blog articles

Blog Archive