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.

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

“`html

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.

“`sass
$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).

You can inspect the compiled styles from within your browser:

“`sass
.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;
}
“`

Conclusion

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.