Skip to content
Add a dash of pre-defined style to your Bourbon.
Branch: master
Clone or download

Latest commit

mike-burns Bitter v2.0.4
- Updated Bundler, Thor, and Sass dependencies.
- Removed duplication of normalize.css body styles.
Latest commit c2347f0 Apr 24, 2020


Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Set bundle path on CI Mar 23, 2020
.dependabot Unify stylelint version, ignore from Dependabot Mar 16, 2020
bin Code clean up Mar 4, 2016
contrib Replace gulp with Parcel Mar 3, 2020
core Bitter v2.0.4 Apr 24, 2020
lib Bitter v2.0.4 Apr 24, 2020
spec Remove bourbon runtime dependency Sep 3, 2019
.gitignore Replace gulp with Parcel Mar 3, 2020
.hound.yml Remove ESLint Mar 16, 2020
.stylelintrc.json Replace scss-lint with stylelint Mar 30, 2019
.tool-versions Update Ruby to 2.7.0 Mar 23, 2020 Bitter v2.0.4 Apr 24, 2020 Add Jun 27, 2017 Replace gulp with Parcel Mar 3, 2020
Gemfile Consistently use double quotes Oct 19, 2019 Update copyright to 2019 Jul 11, 2019 Remove The Bourbon Family in ToC Dec 20, 2019 Update releasing documentation Oct 8, 2019
Rakefile Make Bitters compliant with Bourbon 3.2 Jun 3, 2014
bitters.gemspec Update bundler, thor gems Mar 9, 2020
netlify.toml Add redirect Apr 1, 2020
package.json Bitter v2.0.4 Apr 24, 2020


Reviewed by Hound

Scaffold styles, variables and structure for web projects.

Bitters helps designers start projects faster by defining a basic set of CSS and Sass variables, default element style and project structure. It’s been specifically designed for use within web applications. Bitters should live in your project’s root Sass directory and we encourage you to modify and extend it to meet your project's needs.

Bitters is made to work alongside a CSS reset or style-normalizer; not replace one. We like to use Normalize.

Helpful Links

Table of Contents


  • Sass 3.4+ or LibSass 3.3+
  • Ruby 1.9.3+ (required to install Bitters from the command line)


  1. Install the Bitters gem using the RubyGems package manager:

    gem install bitters
  2. Install the Bitters library into the current directory by running the following command at the command-line. If you’re using Ruby on Rails, run the command in app/assets/stylesheets:

    bitters install

    A base directory will be generated which contains all of the Bitters files.

  3. Import Bitters in your application.css.scss or main manifest file. All additional stylesheets should be imported below Bitters.

    @import "base/base";
  4. Once Bitters is set up, you can begin to import your styles below them.

    @import "base/base";
    @import "my-project-styles";

Using Bitters

Sass structure & default style

The Bitters directory (base/) should contain styles for all the basic elements used throughout the project. Add code to the existing files or add new files. 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.


All type is based on a font-size of 100%, set on the html element.


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


Adds basic styles all form elements. The variables at the top of the file all inherit from the variables file but make it really easy to be overridden.


Basic style for button and input[type="submit"]. Base button styles can be changed by modifying the styles applied to button as well as [type='button'], [type='reset'], and [type='submit'] in the base/_buttons.scss file.

Command Line Interface

bitters [options]


Option Description
-h, --help Show help
-v, --version Show the version number
--path Specify a custom path
--force Force install (overwrite)


Command Description
bitters install Install Bitters into the current directory
bitters reset Reset Bitters
bitters remove Removes Bitters from the current directory
bitters help Show help
bitters version Show the version number


See the contributing document. Thank you, contributors!


Bitters is copyright © 2013-2019 thoughtbot, inc. It is free software, and may be redistributed under the terms specified in the license.


Bitters is maintained by the thoughtbot design team. It is funded by thoughtbot, inc. and the names and logos for thoughtbot are trademarks of thoughtbot, inc.


We love open-source software! See our other projects or hire us to design, develop, and grow your product.

You can’t perform that action at this time.