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.

Note

Don't despair if you don't know anything about Git or version control. You won't need a deep knowledge of Git to follow - which makes this the perfect occasion to start learning it. There's a complete online book about Git that is tailored to beginners (and it's free).
Lastly, you don't have to use the Git repository to take this tutorial. It's completely up to you.