readme.md

Bourbon Sass Mixins

The purpose of Bourbon Sass Mixins is to provide a comprehensive library of sass mixins that are designed to be as vanilla as possible, meaning they should not deter from the original CSS syntax.
The mixins contain vendor specific prefixes for all CSS3 properties for support amongst modern browsers. The prefixes also ensure graceful degradation for older browsers that support only CSS3 prefixed properties.
Bourbon uses SCSS syntax.

Requirements

Sass 3.1+

Install for Rails

Update your Gemfile

gem 'bourbon'
$ bundle install

Rails 3.1.x

Bourbon needs the sass files to be imported in a specific order to function properly. Therefore, you will need to disabled the require_tree sprocket directive.
Delete the following sprocket directive in application.css.scss

Rails 3.0.9 and below

For Rails < 3.1 you must run the installation rake task. Please note, you should run this task every time a new version of Bourbon is released.
This will copy the Sass files into your project's public/stylesheets/sass directory.

rake bourbon:install

Import the mixins at the beginning of your stylesheet

@import 'bourbon/bourbon';

Install without Rails

The following script will generate a bourbon directory and convert all .css.scss to .scss extensions. The bourbon directory is for 'sass --watch' use outside of rails.
Preliminary step: clone this repo and cd into the directory.

In this case as well, you will need to import the mixins at the beginning of your stylesheet

@import 'bourbon/bourbon';

Browser support

Bourbon aims to provide support for CSS3 properties that are not yet fully supported in modern stable browsers.
Pull requests: A general rule when considering a new mixin: Do the following browsers only support the CSS3 property using vendor specific prefixes? If the answer is yes, there is a high chance the mixin will be accepted via a pull request.

Using Bourbon Mixins

Below are a few examples of mixin usage. Note that these are just a few, explore the repo to find out more.

Animation

The animation mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.

Tint & Shade

Tint & shade are different from lighten() and darken() functions built into sass.
Tint is a mix of a color with white. Tint takes a color and a percent argument.

div {
background: tint(red, 40%);
}

Shade is a mix of a color with black. Shade takes a color and a percent argument.

div {
background: shade(blue, 60%);
}

Add-ons

Buttons

The button add-on provides well-designed buttons with a single line in your CSS.
The mixin supports a style parameter and an optional color argument. The available styles are "simple" (default), "shiny", and "pill".

# The mixin can be called with no arguments, which will render a blue button with the "simple" style.
button, input[type="button"] {
@include button;
}
# Pass a style argument
button, input[type="button"] {
@include button(shiny);
}

Create beautiful buttons by defining a style and color argument; using a single color, the mixin calculates the gradient, borders, box shadow, text shadow and text color of the button. The mixin will change the text to be light when on a dark background, and dark when on a light background.

HTML5 Input Types

This addon generates a variable which contains a list of all html5 input types that render as text-based inputs, excluding textarea.
In other words, it allows for easy targeting of all inputs that mimick input[type="text"].