bourbon

Github Docs

A simple and lightweight mixin library for Sass.

            
  ol {
    > li {
      background-color: #F4F5F7;
      @include background-image( linear-gradient(to left, #FFF, #F4F5F7) );
      float: left;
      font-family: $lucida-grande;
      position: relative;
      @include transition( all 0.8s );

      &::after {
        content: " ";
        height: 23px;
        @include position( absolute, 10px -13px 0 0 );
        @include transform( rotate(45deg) skew(20deg, 30deg) );
        width: 23px;
      }
    }
  }

CSS Output

background-image: -webkit-linear-gradient(   left, #FFF, #F4F5F7);
background-image:         linear-gradient(to left, #FFF, #F4F5F7);

CSS Output

font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;

CSS Output

-webkit-transition: all 0.8s;
   -moz-transition: all 0.8s;
        transition: all 0.8s;

CSS Output

position: absolute;
right: -13px;
top: 10px;

CSS Output

-webkit-transform: rotate(45deg) skew(20deg, 30deg);
   -moz-transform: rotate(45deg) skew(20deg, 30deg);
    -ms-transform: rotate(45deg) skew(20deg, 30deg);
     -o-transform: rotate(45deg) skew(20deg, 30deg);
        transform: rotate(45deg) skew(20deg, 30deg);

Forget about vendor prefixes.

The mixins contain up-to-date vendor prefixes for support in modern browsers.

// Bourbon mixin with Sass

section {
  @include linear-gradient(to top, red, orange);
}
/* Compiled CSS  */

section {
  background-color: red;
  background-image: -webkit-linear-gradient(bottom, red, orange);
  background-image:         linear-gradient(to top, red, orange);
}

Write CSS faster and easier.

The library contains mixins, functions, and other addons to build kick ass web stuff.

// Bourbon mixin with Sass

h1 {
  font-family: $helvetica;
  font-size: golden-ratio(14px,  1);
}
/* Compiled CSS  */

h1 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 23px;
}
Ruby Gem

Usage & Installation

Install for Rails 3.1+

In your Gemfile:

gem 'bourbon'

Then run:

$ bundle install

Restart your server. Then rename application.css to application.scss:

mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

Delete the sprocket directive in application.scss:

*= require_tree .

Import Bourbon at the beginning of application.scss. All additional stylesheets must be imported below Bourbon:

@import "bourbon";
@import "home";
@import "users";

Install for a Non-Rails App

Installation

Install the gem

$ gem install bourbon

Install Bourbon into your project’s stylesheets directory by generating the bourbon folder:

$ bourbon install

The generated folder will contain all the mixins and other necessary Bourbon files. It is recommended not to add or modify the Bourbon files so that you can update Bourbon easily.


Sass Watch

Run a standard sass --watch from the command line:

$ sass --watch stylesheets/sass:stylesheets

Lastly, import the mixins at the beginning of your stylesheet(s):

@import "bourbon/bourbon";
Other Commands

See the complete list of tools available via the Command Line Interface.

$ bourbon help
$ bourbon update
Using Rails 3.0.x?

Or use it in your favorite companion app

Apps configured for Bourbon

Try Neat, our grid framework

Bourbon Neat Demo

A lightweight semantic grid framework for Sass with Bourbon.