Introduction

Sensible default styles, a basic project structure, shorthand notations for many CSS declarations, and a simple yet flexible CSS grid... these things can be found on every web designer's wish list.

Instead of reinventing the wheel and building these things yourself, using a modern frontend framework allows you to focus on the unique parts of your project. Bourbon, Neat, and Bitters is a very lightweight framework combination that makes web development easier.

Why Bourbon, Neat, and Bitters?

From Foundation to Bootstrap, from Pure to Semantic UI - there's definitely no lack in third-party frontend frameworks. How do Bourbon, Neat, and Bitters fit in?

First, they are independent parts of a modular toolkit. Depending on your project's exact needs, you can choose to use only Bourbon (a collection of Sass mixins), combine it with Neat (a semantic grid framework) and even add Bitters (a scaffold for Bourbon projects).

Second, they are extremely lightweight. In the face of 800-pound gorillas like the Bootstrap and Foundation frameworks, the Bourbon family provides a refreshing contrast: if you know a bit of Sass and modern CSS, getting started shouldn't take you long. The frameworks are easy to oversee; they leave much control and flexibility in your own hands.

Third, they are made by people who know their stuff: Thoughtbot, a british-american interactive agency, develops and maintains Bourbon, Neat, and Bitters. Over the years, the company has published countless open source components whenever it had solved one of their own day-to-day problems. This produced a number of high-quality and highly practical solutions - like Bourbon, Neat, and Bitters.

New Versions Bourbon 5 and Neat 2 The new versions of Bourbon and Neat are considerably different from past editions. This tutorial is written explicitly for the new Bourbon 5.x and Neat 2.x.

Hands-On

I strongly encourage you to tag along - you'll get the most benefit when actually moving your hands over the keyboard. To make this as easy as possible, you can clone the accompanying Git repository from GitHub:

$ git clone https://github.com/gittower/bourbon-tutorial

Many times in the tutorial, you'll find a link to the corresponding revision. You can then have a look at the exact, complete changes that happened in that step.

Get an overview of the exact changes, here in the Tower Git client