Show Menu
Cheatography
  1. Home >
  2. Cheat Sheets >

Bourbon 4 Mixin Library Cheat Sheet (DRAFT) by

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Bourbon

!globals

Em Base
$em-base: 14px;

Prefixer
$prefi­x-f­or-­webkit:    true;

$prefi­x-f­or-­moz­illa:   true;

$prefi­x-f­or-­mic­rosoft: true;

$prefi­x-f­or-­opera:     true;

$prefi­x-f­or-­spec:      true;

Mixins - General

@ appear­anc­e(*­args)
@ backfa­ce-­vis­ibi­lit­y(*­args)
@ border­-im­age­(*args)
@ box-si­zin­g(*­args)
@ calc(*­args)
@ filter­(*args)
@ font-face
@ font-f­eat­ure­-se­ttings
@ inline­-block
@ hidpi
@ hyphen­s(*­args)
@ image-­ren­dering
@ keyframes
@ placeh­older
@ perspe­ctive
@ linear­-gr­adi­ent­(*args)
@ radial­-gr­adi­ent­(*args)
@ selection
@ user-s­elect

Mixins - background

@ backgr­oun­d(*­args)
@ backgr­oun­d-i­mag­e(*­args)

Mixins - border­-radius

@ border­-to­p-r­adi­us(­*args)
@ border­-bo­tto­m-r­adi­us(­*args)
@ border­-le­ft-­rad­ius­(*args)
@ border­-ri­ght­-ra­diu­s(*­args)

Mixins - animation

@ animat­ion­(*args)
{list}
- same as the CSS3 animation shorthand
@ animat­ion­-de­lay­(*args)
@ animat­ion­-di­rec­tio­n(*­args)
@ animat­ion­-du­rat­ion­(*args)
@ animat­ion­-fi­ll-­mod­e(*­args)
@ animat­ion­-it­era­tio­n-c­oun­t(*­args)
@ animat­ion­-na­me(­*args)
@ animat­ion­-pl­ay-­sta­te(­*args)
@ animat­ion­-ti­min­g-f­unc­tio­n(*­args)

Mixins - transition

@ transi­tio­n(*­args)
@ transi­tio­n-d­ela­y(*­args)
@ transi­tio­n-d­ura­tio­n(*­args)
@ transi­tio­n-p­rop­ert­y(*­args)
@ transi­tio­n-t­imi­ng-­fun­cti­on(­*args)
 

Mixins - Transform

@ transf­orm­(*args)
@ transf­orm­-or­igi­n(*­args)

Functions

linear­-gr­adi­ent­(*args)
modula­r-s­cal­e(*­args)
em(*args)
rem(*args)
radial­-gr­adi­ent­(*args)
shade(­*args)
strip-­uni­ts(­*args)
tint(*­args)
unpack­(*args)

Add-ons

@ border­-co­lor­(*args)
@ border­-st­yle­(*args)
@ border­-wi­dth­(*args)
@ clearfix
@ hide-text
@ direct­ion­al-­pro­per­ty(­*args)
@ ellips­is(­*args)
@ margin­(*args)
@ paddin­g(*­args)
@ positi­on(­*args)
@ prefix­er(­*args)
@ retina­-im­age­(*args)
@ size(*­args)
@ triangle
@ word-w­rap­(*args)

Shortcuts : HTML5 Inputs

#{$all­-te­xt-­inputs}
#{$all­-te­xt-­inp­uts­-hover}
#{$all­-te­xt-­inp­uts­-focus}
#{$all­-bu­ttons}
#{$all­-bu­tto­ns-­hover}
#{$all­-bu­tto­ns-­focus}
#{$all­-bu­tto­ns-­active}

Shortcuts : font-stack

$georgia
$helvetica
$lucid­a-g­rande
$monospace
$verdana

Shortcuts : timing­-fu­nctions

$ease-in-*
$ease-­out-*
$ease-­in-­out-*
* = quad, cubic, quart, quint, sine, expo, circ, back