Features Videos Help About Updates
Menu Buy Now

Bourbon

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 Know:
CodeKit + Git
Troubleshooting
License Recovery
PostCSS Tools:
Autoprefixer
PurgeCSS
Custom PostCSS Plugins
Other Tools:
npm
Babel — (JS Transpiler)
Terser — (JS Minifier)
Rollup — (JS Bundler)
Cache-Buster
HTML-Minifier
LightningCSS
Bless
Languages:
Sass
Less
Stylus
JavaScript
CoffeeScript
TypeScript
Pug
Haml
Slim
Kit
Markdown
JSON
Image Optimizers:
WebP
PNG
JPEG
SVG
GIF
Frameworks:
CodeKit Frameworks
Tailwind
Bootstrap
Bourbon
Bitters
Zurb Foundation
Susy
Nib
Jeet
Syntax Checkers:
ESLint
Advanced:
Hooks
Environment Variables
Adding Custom Languages
Team Workflows
Scripting CodeKit
Editor Plugins:
Nova
Atom
Sublime Text
Coda 2
More
Read-Only Mode
Upgrading From 2.0
FAQ

What's Bourbon?

The Bourbon logo

Bourbon is a simple and lightweight mixin library for Sass. It's a great way to kickstart a project without having to write boilerplate styles yourself.


Using Bourbon

Just add this line to the top of your main Sass stylesheet, then save:

@import "bourbon";
That's It?

Yes. Just start using Bourbon features in your Sass. You can even copy the import statement from the Bourbon category of Project Settings if you're feeling lazy:

a screenshot of the Bourbon category of Project Settings in the CodeKit window
How Does The Magic Work?

CodeKit contains a bundled copy of Bourbon. When the app sees the above @import statement in your stylesheet, CodeKit tells the Sass compiler where it can find Bourbon's files, even though they aren't in your project.


Optional: Install Bourbon's Files

Future CodeKit updates will include newer releases of Bourbon as they become available. When you recompile your Sass file, it will use the newer version of Bourbon in CodeKit.

You can "lock" a project to the current version of Bourbon by installing the framework's files in your Project. To do so, click the Install Bourbon Files button. Afterwards, update the @import "bourbon"; statement with a relative path from your Sass file to the location where you installed Bourbon. Otherwise, the Sass compiler will still use the version of Bourbon in CodeKit rather than the one you installed in your Project.

Made in San Diego, CA

Follow the Developer on Twitter

Email Support

Report a Bug

Privacy Policy