Features Videos Help About Updates
Menu Buy Now

Bitters

First Steps
Getting Started
Live-Reload Browsers
Browser Sync
Set Language Options
Set Output Paths & Action
Second Steps
Defaults For New Projects
Build Your Project
Set Target Browsers
Stuff To Be Aware Of
CodeKit + Git
Troubleshooting
License Recovery
Tools
npm
Autoprefixer
Babel—JS Transpiler
Terser—JS Minifier
Rollup—JS Bundler
Cache-Buster
HTML-Minifier
Libsass
Bless
Languages
Sass
Less
Stylus
JavaScript
CoffeeScript
TypeScript
Pug (Jade)
Haml
Slim
Kit
Markdown
JSON
Image Optimizers
WebP
PNG
JPEG
SVG
GIF
Frameworks
CodeKit Frameworks
Bourbon
Bourbon Neat
Bitters
Zurb Foundation
Susy
Nib
Jeet
Compass
Syntax Checkers
ESLint
JSHint
JSLint
CoffeeLint
Advanced
Hooks
Environment Variables
Adding Custom Languages
Team Workflows
Scripting CodeKit
Editor Plugins
Nova
Atom
Sublime Text
Coda 2
More
New in 3.0
Read-Only Mode
Upgrading From 2.0
FAQ

What's Bitters?

The Bitters logo

Bitters is a basic set of Sass variables, default element styles, and project structure. It’s been specifically designed for use within web applications. Bitters requires Bourbon. Both are part of CodeKit.


Using Bitters

Open the Bitters category of Project Settings, then click the Install Bitters Files button and choose a subfolder of your Project to contain Bitters' stylesheets:

a screenshot of the Bitters category of Project Settings in the CodeKit window

Then, add the following to the top of your main Sass stylesheet and save:

@import "bourbon", "bitters/base";

Note: the paths in the import statement should be relative from your Sass file to the location where you installed Bitters. You may need different paths that those in the example above.


Bitters + Neat

Neat is a grid system built by the same folks that make Bitters and Bourbon. If you plan to use Neat with Bitters, there are a few additional steps to perform. Those are listed in the Bitters category of Project Settings, above.

Made in San Diego, CA

Follow the Developer on Twitter

Email Support

Report a Bug

Privacy Policy