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