Scaffold styles, variables and structure for Bourbon projects.

Built for speed

Bitters helps designers start projects faster by defining a basic set of Sass variables, default element style and project structure.

Made to change

After you have Bitters installed, jump in and start customizing the styles and variables to your design and brand requirements.

Sass Structure

The Bitters folder should contain styles for all the basic elements used throughout the site’s style. Add code to the existing files or add new files to the folders. Customize Bitters for your site as you see fit.


This houses all variables that are used, or will be used, in more than one file in your site. Variable names in Bitters that are used outside of the variables file start with $base to indicate that they are the most basic variables.

Grid Settings

Variables specifically created for Neat resets and breakpoints. To be used, these need to be imported separately from the rest of your base file above Neat in your main stylesheet. Otherwise just remove the file.


All type is based on $base-font-size which is set to 1em (16px) by default. The spacing around type is based on $base-line-height to keep a semi-baseline grid. All sizes are scaled up or down by a factor of 0.25.


All lists have stripped out styles. No bullets, no left padding.


Adds basic styles all form elements. Form-specific variables make it really easy to be overridden.

Install Instructions

  1. Install Bitters:

    gem install bitters
  2. Install Bourbon. Then cd into your Sass directory and run:

    bitters install
  3. A base directory will be generated which contains all of the Bitters files. Import Bitters after Bourbon in your application.css.scss:

    @import "bourbon";
    @import "base/base";
  4. You’re all set. Now add to or remove Bitters styles.

In-depth instructions on GitHub