Start a Project
Call Us  0161 505 1048


Introducing A Semantic Grid With Bourbon Neat

3 May 2017
Neat Logo | Introducing A Semantic Grid With Bourbon Neat | Neon

As the needs of web designers and software developers have advanced, and the approach to working together has evolved, so has the way into its comparative efficiency, and is regularly maintained. which the CSS language is used in modern-day web applications.

CSS can be “pre-processed” using a range of extension languages, SASS being increasingly chosen by front-end developers.

Bourbon, at its core, is a SASS Mixin library that provides a host of functions that serve to reduce the repetition of commonly used SASS functions and keep your style-sheets clean and semantic in structure.

Created by software design and development agency thoughtbot, it has since been expanded to become a suite of tools that make use of Mixin functions and complement an adaptive approach to modern web standards and makes putting together a grid layout a relative breeze.

Bourbon Screen Shot | Introducing A Semantic Grid With Bourbon Neat | Neon

The Bourbon Family

  • Neat is a lightweight and flexible SASS grid layout that is built upon Bourbon’s foundation and exists as an answer to the need for semantic markup in the development of applications.
  • Bitters are a range of scaffold styles, variables and structure for use in Bourbon projects.
  • Refills are sets of components and patterns built with Bourbon and Neat, to which styles can be applied. Exactly as the name would indicate, it enables you to make use of pre-made examples that were built to the specification of the developers of Bourbon.

How To Install

We will be covering the first two foundational tools within the “Bourbon family”. This is a walkthrough on how to setup Bourbon and to implement a responsive grid layout using Neat.
Thoughtbot recommends that both resources are installed using RubyGems package manager, but they can also be installed using bower or npm. For the purposes of this article, we will be following these steps using npm, but the full range of installation options are available at the GitHub repositories for Bourbon and Neat.

Open your command line tool, and within your SASS application directory, then run the following commands to install both packages to your node_modules folder (we recommend the use of yarn over npm:

yarn add bourbon bourbon-neat

Locate and open your main SASS stylesheet, which in this instance is /resources/assets/sass/app.scss

Ensure the following references are present:

@import "node_modules/bourbon/app/assets/stylesheets/bourbon";
@import "node_modules/bourbon-neat/core/neat";

To compile your SASS: yarn run dev

A Responsive Grid Layout Example

With these dependencies installed, everything is in place to be able to work through an example of Neat’s semantic grid. Traditionally, the markup of your site’s template structure contains style or presentational classes, and in the case of Bootstrap, grid classes that define how many columns each item should span at a given viewport. The purpose of Neat is to abstract these classes out and define them within SASS.

The following code block is a basic grid layout containing 4 grid items:

HTML structure


Default Grid (Responsive)



Each element contains only a single class representation of itself and ensures clean HTML markup from the start, free of grid width classes which can become cumbersome as the project gains traction and its scope increases.

  • .responsive-grid-container – the grid container / parent element
  • .responsive-grid-item – individual grid item / child element

SASS code

This code block contains the style properties of each grid element and also defines the column spans within a separate additional media query Mixin, so that we can target a number of different devices.

$grid: ( media: 992px );

.responsive-grid-container {
@include grid-container;

.responsive-grid-item {
background-color: lightblue;
color: #fff;
margin-bottom: 2rem
min-height: 20rem;

@include grid-column(6);

@include grid-media($grid){
@include grid-column(3);
background-color: red;

@include grid-column() makes use of a Mixin which defines the number of columns (6 out of 12 in total) and produces 50% width columns on mobile devices, and 25% width columns on a desktop device.

@include grid-media($grid) is a media query with the an object of media options made available to the Mixin (in this case is 992px).

The Semantic Grid | Introducing A Semantic Grid With Bourbon Neat | Neon

You can inspect the compiled styles from within your browser:

.responsive-grid-container::after {
clear: both;
content: “”;
display: block;

@media only screen and (min-width: 992px) {
.responsive-grid-item {
width: calc(25% – 25px);
float: left;
margin-left: 20px;
background-color: red;

.responsive-grid-item {
background-color: rgb(48, 151, 209);
color: rgb(255, 255, 255);
min-height: 20rem;
width: calc(50% – 30px);
float: left;
margin-left: 20px;


At present, it’s worth noting that there are multiple frameworks that build upon SASS and have their own “USPs” and reasons to adopt them in your workflow over others. Bootstrap is one such front-end development framework that (with the most up-to-date version) builds upon adding options for the same semantic grid layout ideals as Bourbon, as well as being a noticeably more popular and well-supported option.

So, why use Bourbon over Bootstrap and vice versa? The key to finding out which framework works best for the individual requirements of your application is through being curious, so it is worth spending some time building prototype functionality with the goal of yielding the same result and subsequently measuring how each one responds to your efforts.

Where do you stand on a semantic vs. traditional structure? Tweet us your opinion @createdbyneon.

Related Items

How to create landing pages that convert

What is a content delivery network?

What is mobile-first design?

We are here to help

Want to be at the top of the search ranks? How about a website that’ll give your audience a great experience? Or maybe you’re looking for a campaign that’ll drive more leads? Get in touch to find out how we can help.

Start a project
The design and dev team making notes | Start a project with Neon | Neon
Employee on telephone
Group work
Designer laughing
Computer typed on
Sausage dog
Writing on white board
Designer planning sitemap
Employee posting notes on board
Developer working
Group photo of CEO and Brand Ambassador
Employee in meeting
Employee in Meeting

Stay up to date

Privacy Policy

© Neon Digital Agency Ltd 2021. Part of

Inc & Co Logo