Skip to content

Instantly share code, notes, and snippets.

@mistergraphx
Last active June 8, 2016 23:01
Show Gist options
  • Save mistergraphx/9d67ed70b4be642dca41 to your computer and use it in GitHub Desktop.
Save mistergraphx/9d67ed70b4be642dca41 to your computer and use it in GitHub Desktop.
Bourbon Mixin Cheat-sheet From http://bourbon.io/docs/#asset-pipeline ** @ denotes a mixin and must be prefaced with @include.**

Addons

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

HTML5 Inputs

  #{$all-text-inputs}
  #{$all-text-inputs-hover}
  #{$all-text-inputs-focus}
  #{$all-button-inputs}
  #{$all-button-inputs-hover}
  #{$all-button-inputs-focus}
  #{$all-button-inputs-active}

font-family


  $georgia
  $helvetica
  $lucida-grande
  $monospace
  $verdana

timing-functions

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

Functions

  linear-gradient(*args)
  modular-scale(*args)
  em(*args)
  rem(*args)
  radial-gradient(*args)
  shade(*args)
  strip-units(*args)
  tint(*args)
  unpack(*args)

#Bourbon Mixin Cheat-sheet

From http://bourbon.io/docs/#asset-pipeline

animation

  @ 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

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

border-radius

  @ 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)

columns

  @columns(*args)
  @column-count(*args)
  @column-fill(*args)
  @column-gap(*args)
  @column-rule(*args)
  @column-rule-color(*args)
  @column-rule-style(*args)
  @column-rule-width(*args)
  @column-span(*args)
  @column-width(*args)
@ filter(*args)

flexbox

Latest Spec

  @ align-content(*args)
  @ align-items(*args)
  @ align-self(*args)
  @ display(*args)
  @ flex(*args)
  @ flex-basis(*args)
  @ flex-direction(*args)
  @ flex-flow(*args)
  @ flex-grow(*args)
  @ flex-shrink(*args)
  @ flex-wrap(*args)
  @ justify-content(*args)
  @ order(*args)

2009 Spec

  @ 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
@ hyphens(*args)
@ image-rendering
@ keyframes
@ placeholder
@ perspective
@ linear-gradient(*args)
@ radial-gradient(*args)
@ selection
@ user-select

transform

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

transition

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

asset-pipeline

  $asset-pipeline

em-base

  $em-base

prefixer-settings

  $prefix-for-webkit
  $prefix-for-mozilla
  $prefix-for-microsoft
  $prefix-for-opera
  $prefix-for-spec
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment