Adding the Libraries #

It's time to add our three friends Bourbon, Neat, and Bitters to our project. Let's start with Bitters.

Bitters is different from Bourbon and Neat in that it's not a library - but rather a scaffold. Installing it brings us a set of basic Sass files that help kickstart our project.
Bitters also provides a couple of sensible defaults: e.g. text size is reset to "1em"; lists, forms and buttons get basics styles assigned; ...

You're encouraged to modify and customize everything that Bitters brings. Simply dig in the installed files and make your adjustments.
This is in contrast to Bourbon and Neat: since they are libraries, their code should be left unchanged. Only then will you be able to update them later when new, improved versions come out.

Installing Bitters

Before initializing Bitters in our project, we first need to create an "scss" folder in our project. Then, on the command line, we change into this new folder and install Bitters:

$ cd scss
$ bitters install
Bitters files installed to base/base

Let's take a look at what this left us with:

Bitters file structure - GitHub

Instead of going through the files now (and just in theory), we'll have a closer look at them later when we make our adjustments.

Installing Neat & Bourbon

While we're at it, let's get the "installation" part over with. To keep things nice and clean, we create a new "lib" folder inside of our "scss" folder. On the command line, change into this folder and call the following two commands:

$ cd lib
$ bourbon install
Bourbon files installed to bourbon/
$ neat install
Neat files installed to neat/

Now, we have the following project structure in place:

Project structure after installation - GitHub

Importing All Components

Before we actually get our hands dirty with some Bourbon-and-Neat-enhanced Sass, we need to make sure that everything is available in our scripts. Create a main "styles.scss" file right in the "scss" folder with the following import rules:

/***** 3rd Party Components *****/
@import "lib/bourbon/bourbon";
@import "lib/neat/neat";
@import "base/base";

Although it adds a lot of useful default styles, Bitters does not replace a CSS reset script. Therefore, let's include the popular normalize.css, right at the top of our imports:

/***** 3rd Party Components *****/
@import "lib/normalize-css/normalize";
@import "lib/bourbon/bourbon";
@import "lib/neat/neat";
@import "base/base";

Project structure with base imports - GitHub

This expects to find a "_normalize.scss" file in "lib/normalize-css/".

On the command line, we can now start our Sass compiler. From the project's "www" folder, simply issue the following command:

$ sass --watch scss:css

This compiles our many Sass components into browser-readable CSS.

Get our popular Git Cheat Sheet for free!

About Us

As the makers of Tower, the best Git client for Mac and Windows, we help over 100,000 users in companies like Apple, Google, Amazon, Twitter, and Ebay get the most out of Git.

Just like with Tower, our mission with this platform is to help people become better professionals.

That's why we provide our guides, videos, and cheat sheets (about version control with Git and lots of other topics) for free.