View source View spec

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.

box:hover {
  @include animation-name(scale, slide);
  @include animation-duration(2s);
  @include animation-timing-function(ease);
  @include animation-iteration-count(infinite);

  // Animation shorthand works the same as the CSS3 animation shorthand
  @include animation(scale 1.0s ease-in, slide 2.0s ease);



View source View spec

The appearance CSS property is used to display an element using a platform-native styling based on the operating system's theme.

@include appearance(none);


View source View spec

The CSS backface-visibility property determines whether or not the back face of the element is visible when facing the user. The back face of an element always is a transparent background, letting, when visible, a mirror image of the front face be displayed.

@include backface-visibility(visible);


View source View spec

The background mixin is used for adding multiple backgrounds using shorthand notation.

@include background(linear-gradient(red, green) left repeat);
@include background(linear-gradient(red, green) left repeat, radial-gradient(red, orange) left repeat);
@include background(url("/images/a.png"), linear-gradient(red, green), center no-repeat orange scroll);


View source View spec

The background-image mixin is helpful for chaining multiple comma delimited background images and/or linear/radial-gradients into one background-image property. The Background-image mixin supports up to 10 background-images.

Use in combination with the linear-gradient function and the radial-gradient function.

// Image asset with a linear-gradient
@include background-image(url("/images/a.png"), linear-gradient(white 0, yellow 50%, transparent 50%));

// Multiple linear-gradients - Demo
@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%),
                           linear-gradient(#4e7ba3, darken(#4e7ba4, 10%)));

@include background-image(url("/images/a.png") center no-repeat, url("images/b.png") left repeat);

// Background-image is not a shorthand property, therefore this doesn't make sense.


Note about shorthand notation

All CSS background properties support comma delimited values. For multiple background images you can specify the background properties like position, repeat, etc. for each image. For example:

@include background-image(url("/images/a.png"), url("images/b.png"));
background-position: center top, center;
background-repeat: no-repeat, repeat-x;


View source View spec

Border-image supports short-hand notation.

@include border-image(url(/images/border.png) 27 repeat);



View source View spec

The border-radius helper mixins provide shortcuts for targeting sides. These mixins are supported in Bourbon v3.0+

@include border-top-radius(5px);
@include border-bottom-radius(5px);
@include border-left-radius(5px);
@include border-right-radius(5px);

Deprecation Warning: The official border-radius mixin was deprecated and removed in Bourbon 3.0. Here's why.


View source View spec

Box-sizing will change the box-model of the element it is applied to.

@include box-sizing(border-box);


View source View spec

A mixin for vendor-prefixing the CSS3 calc function. It accepts a property and a value.

@include calc(width, '100% - 80px');
Note: You must use interpolation to pass in a variable—#{ }.
$width: 100%;

@include calc(width, '#{$width} - 80px');


View source View spec

A mixin for generating clean, vendor-prefixed CSS3 filters.

@include filter(grayscale(50%));


View source

The flex-box mixin is based on the 2009 w3c spec. More info

Looking for mixins for the latest 2012 spec? Click here

div.parent {
  @include display-box;
  @include box-align(start);
  @include box-orient(horizontal);
  @include box-pack(start);

div.parent > div.child {
  @include box-flex(2);

// Alternative custom shorthand mixin.
div.parent {
  @include box($orient: horizontal, $pack: center, $align: stretch); // defaults
  @include box(vertical, start, stretch);


View source View spec

A simple @font-face mixin allowing easier custom fonts integration, like so:

The mixin also takes an optional $asset-pipeline: true argument for use with the Rails asset pipeline.

@include font-face(SourceSansPro, '/fonts/Source_Sans_Pro/SourceSansPro-Regular');
@include font-face(SourceSansPro, '/fonts/Source_Sans_Pro/SourceSansPro-Bold', bold);
@include font-face(SourceSansPro, '/fonts/Source_Sans_Pro/SourceSansPro-Italic', normal, italic);

// Rails asset-pipeline - place fonts in app/assets/fonts/
@include font-face(SourceSansPro, 'Source_Sans_Pro/SourceSansPro-Regular', normal, $asset-pipeline: true);


View source View spec

The font-feature-settings mixin is helpful for using the advanced typographic features included in some OpenType fonts.

// Use ligatures if the typeface and font file include them
@include font-feature-settings("liga");

// Use proportional numbers, but not automatic kerning
@include font-feature-settings("pnum", "kern" false);


View source View spec

The HIDPI Meda Query will allow you to generate a media query that targes HIDPI devices. It accepts an optional ratio argument, default ratio is 1.3. Find my device pixel ratio.

@include hidpi(1.5) {
  width: 260px;

CSS Output

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 1.5/1),
only screen and (min-resolution: 144dpi),
only screen and (min-resolution: 1.5dppx) {
  width: 260px;


View source View spec

The image-rendering property provides a hint to the user agent about how to handle its image rendering.

@include image-rendering(optimizeSpeed);


View source View spec

A mixin for generating clean vendor-prefixed keyframes.

@include keyframes(fadeIn) {
  from {
    @include transform(scale(0));
  to {
    @include transform(scale(1));

CSS Output

@-webkit-keyframes fadeIn {
  from {
    -webkit-transform: scale(0); }

  to {
    -webkit-transform: scale(1); } }

@-moz-keyframes fadeIn {
  from {
    -moz-transform: scale(0); }

  to {
    -moz-transform: scale(1); } }

@-o-keyframes fadeIn {
  from {
    -o-transform: scale(0); }

  to {
    -o-transform: scale(1); } }

@keyframes fadeIn {
  from {
    transform: scale(0); }

  to {
    transform: scale(1); } }


View source View spec

Gradient Position is optional. Position can be a degree (90deg). Mixin supports up to 10 color-stops.

This mixin will output a fallback background-color: #first-color; declaration. A $fallback argument can be passed to change the fallback color.

@include linear-gradient(#1e5799, #2989d8);
@include linear-gradient(to top, #8fdce5, #3dc3d1);
@include linear-gradient(to top, #8fdce5, #3dc3d1, $fallback: red);
@include linear-gradient(50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);



View source View spec

The perspective CSS property determines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective.

The perspective-origin CSS property determines the position the viewer is looking at. It is used as the vanishing point by the perspective property.

@include perspective(300px);
@include perspective-origin(30% 30%);




View source View spec

Outputs vendor-prefixed placeholders for styling. Must be nested in a rule-set.

input {
  width: 300px;

  @include placeholder {
    color: red;

CSS Output

input {
  width: 300px;

input::-webkit-input-placeholder {
  color: red;
input:-moz-placeholder {
  color: red;
input::-moz-placeholder {
  color: red;
input:-ms-input-placeholder {
  color: red;


View source View spec

Takes up to 10 gradients. See also the background-image mixin.

This mixin will output a fallback background-color: #first-color; declaration. A $fallback argument can be passed to change the fallback color.

@include radial-gradient(#1e5799, #3dc3d1);
@include radial-gradient(#1e5799, #3dc3d1, $fallback: red);
@include radial-gradient(circle at 50% 50%, #eee 10%, #1e5799 30%, #efefef);



View source View spec

The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed according to the values set

The transform-origin CSS property lets you modify the origin for transformations of an element.

The transform-style CSS property determines if the children of the element are positioned in the 3D-space or are flattened in the plane of the element.

@include transform(translateY(50px));

@include transform-origin(center top);

@include transform-style(preserve-3d);


View source View spec

The shorthand mixin supports multiple transition.

@include transition (all 2.0s ease-in-out);
@include transition (opacity 1.0s ease-in 0s, width 2.0s ease-in 2s);

To transition specific vendor-prefixed properties (`-webkit-transform, -moz-transform, ...`), do not use the shorthand mixin. Use the individual transition mixins.

@include transition-property (transform);
@include transition-duration(1.0s);
@include transition-timing-function(ease-in);
@include transition-delay(0.5s);


View source View spec

Controls the appearance (only) of selection. This does not have any affect on actual selection operation.

@include user-select(none);



View source

Use this mixin to easily create a flexible-grid layout.

The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function.

This function takes the fluid grid equation (target / context = result) and uses columns to help define each.

$fg-column: 60px;             // Column Width
$fg-gutter: 25px;             // Gutter Width
$fg-max-columns: 12;          // Total Columns For Main Container

div {
  width: flex-grid(4);        // returns (315px / 1020px) = 30.882353%;
  margin-left: flex-gutter(); // returns (25px / 1020px) = 2.45098%;

  p {
    width: flex-grid(2, 4);   // returns (145px / 315px) = 46.031746%;
    float: left;
    margin: flex-gutter(4);   // returns (25px / 315px) = 7.936508%;

  blockquote {
    float: left;
    width: flex-grid(2, 4);   // returns (145px / 315px) = 46.031746%;


View Source

Returns the golden ratio of a given number. Must provide a pixel or em value for the first argument. Also takes a required integer for an increment value: ...-3, -2, -1, 0, 1, 2, 3...

Note: The golden-ratio function can be wrapped in sass's abs(), floor(), or ceil() functions to get the absolute value, round down, or round up respectively.

// Positive number will increment up the golden-ratio
font-size: golden-ratio(14px,  1);
// returns: 22.652px

// Negative number will increment down the golden-ratio
font-size: golden-ratio(14px, -1);
// returns: 8.653px

Resources: modularscale.com


View source

Easily setup and follow a grid based design. Check out gridulator.com

The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function.

$gw-column: 100px;          // Column Width
$gw-gutter: 40px;           // Gutter Width

div {
  width: grid-width(4);     // returns 520px;
  margin-left: $gw-gutter;  // returns 40px;


View Source

Returns the modular scale of a given number. Must provide a number value for the first argument. The second argument is a required integer for an increment value: ...-3, -2, -1, 0, 1, 2, 3... The third value is the ratio number.

Note: The function can be wrapped in sass's abs(), floor(), or ceil() functions to get the absolute value, round down, or round up respectively.

div {
 // Increment Up GR with positive value
 font-size:        modular-scale(14px,   1, 1.618); // returns: 22.652px

 // Increment Down GR with negative value
 font-size:        modular-scale(14px,  -1, 1.618); // returns: 8.653px

 // Can be used with ceil(round up) or floor(round down)
 font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px
 font-size:  ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px

Resources: modularscale.com & goldenrationcalculator.com


View source

Outputs a radial-gradient. Use in conjunction with the background-image mixin. The function takes the same arguments as the radial-gradient mixin.

@include background-image( radial-gradient(#1e5799, #3dc3d1) );
@include background-image( radial-gradient(50% 50%, circle cover, #1e5799, #3dc3d1) );
@include background-image( radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef) );


Tint & Shade

View source

Tint and Shade are different from lighten() and darken() functions that are built into sass.

Tint is a mix of color with white.
Shade is a mix of color with black.
Both take a color and a percent argument.

background: tint(red, 40%);
background: shade(blue, 60%);



View source

The border-color mixin accepts up to four values, including null, and uses the directional-property mixin to map them to their respective directions.

@include border-color(red green null blue);

CSS Output

border-top-color: red;
border-right-color: green;
border-left-color: blue;


View source

The border-style mixin accepts up to four values, including null, and uses the directional-property mixin to map them to their respective directions.

@include border-style(dashed null solid);

CSS Output

border-top-style: dashed;
border-bottom-style: solid;


View source

The border-width mixin accepts up to four widths, including null, and uses the directional-property mixin to map them to their respective directions.

@include border-width(1em 20px null 100%);

CSS Output

border-top-width: 1em;
border-right-width: 20px;
border-left-width: 100%;


View source

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 button styles are:

  • simple (default)
  • shiny
  • pill

Simple Button Style

The mixin can be called with no arguments, which will render a blue button with the simple style.

button {
  @include button;

Pill Button Style

button {
  @include button(pill);

Shiny Button Style

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.

button {
  @include button(shiny, #ff0000);


View source

This mixin will output a clearfix to the selector where the mixin is declared.

This clearfix uses Nicolas Gallagher's Micro Clearfix.

div {
  @include clearfix;


View source

A helper mixin enabling short-hand notation for directional properties. It accepts a prefix, suffix, and array of up to four values that map to top, right, bottom, and left, respectively. You can optionally pass in null for the suffix argument to ignore it. You can optionally pass a null argument for a directional value to ignore it.

This mixin is mostly used as a helper for others. See border-color, border-style, border-width, margin, and padding.

@include directional-property(border, width, 10px null 4px 3px);

CSS Output

border-top-width: 10px;
border-bottom-width: 4px;
border-left-width: 3px;


View source

This mixin will truncate text, adding an ellipsis to represent overflow. It accepts an optional max-width argument, default max-width is 100%.

div {
  @include ellipsis(50%);


View source

Bourbon defines default font-families as variables for the sake of convenience:

font-family: $helvetica;
font-family: $georgia;
font-family: $lucida-grande;
font-family: $monospace;
font-family: $verdana;

CSS Output

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
font-family: Verdana, Geneva, sans-serif;

HTML5 Input Types

View source

This addon provides you with three variables which each contain 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 mimic input[type="text"].

Note: You must use interpolation with the variable—#{ }.

#{$all-text-inputs} {
  border: 1px solid green;

#{$all-text-inputs-hover} { // Target the :hover pseudo-class
  background: yellow;

#{$all-text-inputs-focus} { // Target the :focus pseudo-class
  background: white;

CSS Output

input[type="email"], input[type="number"],   input[type="password"], input[type="search"],
input[type="tel"],   input[type="text"],     input[type="url"],      input[type="color"],
input[type="date"],  input[type="datetime"], input[type="datetime-local"],
input[type="month"], input[type="time"],     input[type="week"] {
  border: 1px solid green;

input[type="email"]:hover, input[type="number"]:hover,   input[type="password"]:hover, input[type="search"]:hover,
input[type="tel"]:hover,   input[type="text"]:hover,     input[type="url"]:hover,      input[type="color"]:hover,
input[type="date"]:hover,  input[type="datetime"]:hover, input[type="datetime-local"]:hover,
input[type="month"]:hover, input[type="time"]:hover,     input[type="week"]:hover {
  background: yellow;

input[type="email"]:focus, input[type="number"]:focus,   input[type="password"]:focus, input[type="search"]:focus,
input[type="tel"]:focus,   input[type="text"]:focus,     input[type="url"]:focus,      input[type="color"]:focus,
input[type="date"]:focus,  input[type="datetime"]:focus, input[type="datetime-local"]:focus,
input[type="month"]:focus, input[type="time"]:focus,     input[type="week"]:focus {
  background: white;


View source

Deprecation Warning: The inline-block mixin has been deprecated and will be removed in the next major version release. Bourbon will no longer support IE8 or lower.

The inline-block mixin provides support for the inline-block property in IE6 and IE7.

@include inline-block;


View source

The margin mixin accepts up to four values, including null, and uses the directional-property mixin to map them to their respective directions.

@include margin(null 10px 3em 20vh);

CSS Output

margin-right: 10px;
margin-bottom: 3em;
margin-left: 20vh;


View source

The padding mixin accepts up to four values, including null, and uses the directional-property mixin to map them to their respective directions.

@include padding(20vh null 10px 3em);

CSS Output

padding-top: 20vh;
padding-bottom: 10px;
padding-left: 3em;


View source

Convert pixels to ems.

For a relational value, the input is calculated based on a parent value. The default parent is 16px.
The parent can be changed by passing an optional second value.

font-size: em(12);
font-size: em(12, 24);

CSS Output

font-size: 0.75em;
font-size: 0.5em;


View source

Shorthand notation for setting the position of elements in your page.

The first parameter is optional, with a default value of relative. The second parameter is a space delimited list of values that follow the standard CSS shorthand notation.

Note: null values will be ignored. In the example below, this means that selectors will not be generated for the right and bottom positions, while the top position is set to 0px.

Instead of writing:

position: relative;
top: 0px;
left: 100px;

Your can write:

@include position(relative, 0px null null 100px);

Prefixer Settings

View source

By default, Bourbon outputs all vendor-prefixes specified by each mixin. You can optionally overwrite these global defaults by setting any of these variables to false at the top of your stylesheet.

$prefix-for-webkit:    true;
$prefix-for-mozilla:   true;
$prefix-for-microsoft: true;
$prefix-for-opera:     true;
$prefix-for-spec:      true;


View source

The prefixer is for generating vendor prefixed declarations. The prefixer accepts the following prefixes: webkit moz ms o spec.

@mixin box-sizing($box) {
  @include prefixer(box-sizing, $box, webkit moz spec);

CSS Output

-webkit-box-sizing: $box;
   -moz-box-sizing: $box;
        box-sizing: $box;


View source

The mixin is a helper to generate a retina background-image and non-retina background-image. The retina background-image will output to a hidpi media-query.

The mixin uses a _2x.png retina filename by default.
For rails, you can use the asset-pipeline by passing true to the argument.

@ retina-image($filename, $background-size, $extension*, $retina-filename*, $asset-pipeline*)
* = optional

Argument Defaults

  • $extension: png
  • $retina-filename: null
  • $asset-pipeline: false
span {
  @include retina-image(home-icon, 32px 20px)

CSS Output

span {
  background-image: url(home-icon.png);
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
  span {
    background-image: url(home-icon_2x.png);
    background-size: 32px 20px; }


View source

Width x Height. Accepts all units. Unitless values default to px.

@include size(25);        // width: 25px; height: 25px;
@include size(30px 70px); // width: 30px; height: 70px;
@include size(auto 80px); // width: auto; height: 80px;


View source

These CSS cubic-bezier timing functions are variables that can be used with CSS3 animations and transitions. The provided timing functions are the same as the jQuery UI demo: easing functions.

@include transition(all 5s $ease-in-circ);


  • $ease-in-quad
  • $ease-out-quad
  • $ease-in-out-quad
  • $ease-in-cubic
  • $ease-out-cubic
  • $ease-in-out-cubic
  • $ease-in-quart
  • $ease-out-quart
  • $ease-in-out-quart
  • $ease-in-quint
  • $ease-out-quint
  • $ease-in-out-quint
  • $ease-in-sine
  • $ease-out-sine
  • $ease-in-out-sine
  • $ease-in-expo
  • $ease-out-expo
  • $ease-in-out-expo
  • $ease-in-circ
  • $ease-out-circ
  • $ease-in-out-circ
  • $ease-in-back
  • $ease-out-back
  • $ease-in-out-back


View source

Creates a visual triangle. Mixin takes ($size, $color, $direction)

The $size argument can take one or two values—width height.

The $color argument can take one or two values—foreground-color background-color.

$direction: up, down, left, right, up-right, up-left, down-right, down-left

@include triangle(12px, gray, down);
@include triangle(12px 6px, gray lavender, up-left);



View Source

The word-wrap mixin makes it easy to force long text (like URLs) to wrap instead of breaking your layout.

It uses the ($word-wrap)argument, with a default value of break-word.

@include word-wrap;
@include word-wrap(normal);

Complete List

All Supported Functions, Mixins, and Addons

@ denotes a mixin and must be prefaced with @include.


  @ animation(*args)
  @ animation-delay(*args)
  @ animation-direction(*args)
  @ animation-duration(*args)
  @ animation-fill-mode(*args)
  @ animation-iteration-count(*args)
  @ animation-name(*args)
  @ animation-play-state(*args)
  @ animation-timing-function(*args)

  @ background(*args)
  @ background-image(*args)

  @ border-top-radius(*args)
  @ border-bottom-radius(*args)
  @ border-left-radius(*args)
  @ border-right-radius(*args)

@ appearance(*args)
@ backface-visibility(*args)
@ border-image(*args)
@ box-sizing(*args)
@ calc(*args)


@ filter(*args)

  @ box(*args)
  @ box-align(*args)
  @ box-direction(*args)
  @ box-flex(*args)
  @ box-flex-group(*args)
  @ box-lines(*args)
  @ box-ordinal-group(*args)
  @ box-orient(*args)
  @ box-pack(*args)
  @ display-box

@ font-face
@ font-feature-settings
@ inline-block
@ hidpi
@ image-rendering
@ keyframes
@ placeholder
@ perspective
@ linear-gradient(*args)
@ radial-gradient(*args)
@ user-select

  @ transform(*args)
  @ transform-origin(*args)

  @ transition(*args)
  @ transition-delay(*args)
  @ transition-duration(*args)
  @ transition-property(*args)
  @ transition-timing-function(*args)




@ border-color(*args)
@ border-style(*args)
@ border-width(*args)
@ button(*args)
@ clearfix
@ hide-text
@ directional-property(*args)
@ ellipsis(*args)
@ margin(*args)
@ padding(*args)
@ em(*args)
@ position(*args)
@ prefixer(*args)
@ retina-image(*args)
@ size(*args)
@ triangle
@ word-wrap(*args)

HTML5 Inputs


  * = quad, cubic, quart, quint, sine, expo, circ, back