1. Web Design
  2. Sass

Bourbon Neat: Semantic, Unopinionated, Responsive Grids

This post is part of a series called Bourbon: the Connoisseurs’ Choice for Sass Mixins.
Bourbon on the Rocks: Cool Functions to Improve Your Sass
6 Essential Bourbon Neat Mixins

If you use Sass, enjoy using Bourbon and would like to use a smart grid framework for lightweight layouts, Neat might very well become your trusted companion for the foreseeable future. In this short introduction piece I’ll provide you with a couple of sensible reasons to give this unopinionated grid framework a shot.

Welcome to Your New Favorite Tool

Bourbon Neat was conceived by Reda Lemeden and is part of the fantastic Bourbon suite. It’s a lightweight, responsive grid framework, built on top of Sass and Bourbon. The project itself is supported by thoughtbot and their designers take care of it.

A Word on Frameworks

Before we install anything, let me give you a couple of good reasons to look into it. There are countless frameworks that promise to deliver a stable frame for developing your designs. And most of them certainly succeed in one way or another. But to what degree? Ask yourself:

  • Will you (easily) be able to switch frameworks in the future?
  • Does it give you problems with cluttering your markup?
  • Is it suited for scaling projects?
  • Is it ridiculous in size?
  • Does it come with a steep learning curve?
  • Does it give your sites a generic look?

If answers to any of the issues above are sounding alarm bells, I just want to assure you that such headaches are easily avoidable these days. It’s very rare to come across a project that balances its payoffs so well as Bourbon Neat (Or just “Neat” for short). Why so? Here are a couple of good reasons:

  • It’s super lightweight
  • It’s future-proof
  • It’s easy to use
  • It’s responsive
  • It’s semantic
  • It’s scalable
  • It’s elegant

Bourbon also aims to provide you with options,not answers. What I like especially is that it isn’t a factory for generic, pre-defined styles. That way it aids the designer’s own design decisions without standing in the way.

And Now a Word on Semantics

This is an important issue but I’ll make it short: ugly presentational classes and additional empty wrapper divs which you often find in front-end libraries are ghosts from the past (at least they should be ghosts). Neat plays a significant role in moving past these gnarly semantic habits. It helps you write clean, unobtrusive markup, and have all your grid styles cleanly separated in your stylesheets by way of mixins.

What’s in the Box?

Why deal with a grid framework at all? Well, design is all about relationships and relationships can be hard. Grids make them easier by helping you tie structures together in a more meaningful and organized way. They simplify, reduce and stabilize—in essence, they help trim the fat out of designs. Neat achieves this with just fourteen mixins..

  • reset-layout-direction
  • direction-context
  • shift-in-context
  • display-context
  • outer-container
  • span-columns
  • reset-display
  • fill-parent
  • reset-all
  • omega
  • media
  • shift
  • pad
  • row

..a single function for setting breakpoints..

  • new-breakpoint

…and twelve variables for settings:

  • default-layout-direction
  • visual-grid-opacity
  • border-box-sizing
  • visual-grid-index
  • disable-warnings
  • visual-grid-color
  • default-feature
  • grids-columns
  • max-width
  • visual-grid
  • column
  • gutter

Boom, that’s it! Pretty low key, but it equips you with a lot of horsepower!

Responsive Grids

Change and the need for flexibility are constant future-proof necessities. Incorporating media queries should be smooth and easily manageable, but they can quickly become a mess if not handled with care.

Bourbon Neat encourages a DRY approach for handling your breakpoints with its ”new-breakpoint“ function. Save breakpoints in variables and resuse them wherever you need. Changing a bunch of media queries in one place is hard to beat.

To be more concrete, let me give you an example. Here’s a random Sass snippet using the “new-breakpoint” function for media-queries:

For now, don’t concern yourself too much with the mixins used in this example. In the coming tutorials I’ll dive deeper into the nitty-gritty of this. What should be apparent in this example, though, is the ease of use if you decide to change your media queries. Through the use of Sass variables and this function, you’ll have one consistent, authoritative place to change and tweak your responsive layout, without touching each element individually.


Now that you know what you’re getting yourself into, let’s install this beauty:

Note: you’ll need Sass installed before you start.)

Step 1: Install Bourbon

Take a look at my tutorial about Bourbon if you need to follow this step.

Step 2: Install the Neat gem

This is done via RubyGems, like so:

Step 3: Install Neat

Via the command line, change into a Sass directory of your choosing, then run:

This will install all the necessary mixins, settings and functions in your designated directory.


Step 4: Import Neat Into Your Sass Stylesheet

Note: the import order is important here. Because Neat was built on top of Bourbon you need to import Bourbon first. The same goes for its grid-settings.

Installing With Rails

Step 1:

If you want to use Neat with Rails you’ll need to add:

to your Gemfile.

Step 2:

Then run:

in your terminal.

Step 3:

In “application.sass” you’ll then need to add:

and you’re good to go. Remember though, that @import isn’t playing nice with Sprockets directives and therefore you’ll need to delete their references. In “application.sass”, “require”, ”require_tree”, and ”require_self” need to go.

Neat CLI

Last but not least, the fine folks at thoughtbot have provided us with a nice command line interface. It comes with three self-explanatory commands:

Closing $0.02

Using intelligent tools like this, it’s a joy working with grids. This framework does a great job in planning for developer happiness (long and short term).

In the next tutorial we’ll take a closer, more technical look at how to use Neat.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.