Show Menu

Bourbon Neat Cheat Sheet by

A lightweight semantic grid framework for Sass and Bourbon.
development     css     bourbon     framework     sass     neat

Bourbon Neat Mixins

fill­-pa­ren­t()
Forces the element to fill its parent container.
media( [$firs­t-f­eature] $first­-value [$seco­nd-­fea­ture, $secon­d-v­alue], [$tota­l-c­olumns] )
Outputs a media-­query block with an optional grid context.
span­-co­lum­ns( $columns [of $conta­ine­r-c­olu­mns], [$display] )
Sets the width of an element to that of the number of columns it spans.
pad( [$padd­ing­-sh­ort­hand] )
Adds padding to the element.
omega( [$pseu­do-­target $display] )
Removes block and table elements' gutter.
oute­r-c­ont­ain­er()
Centers the element in the viewport, clears its floats, and sets its max-width.
rese­t-d­isp­lay()
Resets the active display property to block.
rese­t-l­ayo­ut()
Resets the active layout direction to the default value set in $defau­lt-­lay­out­-di­rec­tion.
rese­t-a­ll()
Resets both the active layout direction and the active display property.
row( [$display, $direc­tion] )
Designates the element as a grid row.
shift( $columns )
Translates an element horizo­ntally positively or negati­vely.
 

Bourbon Neat Variables

$bor­der­-bo­x-s­izing
[Boolean] When true, it sets the box-sizing property of all elements to borde­r-box. Default: true
$col­umn
[Number (positive, unit)] Sets the relative width of a single grid-c­olumn. Default: golden­-ra­tio­(1em, 3)
$def­aul­t-f­eat­ure
[String] Sets the default media feature that media() and new-b­rea­kpo­int() revert to when only a breakpoint value is passed. Default: min-width
$def­aul­t-l­ayo­ut-­dir­ect­ion
[String (LTR|RTL)] Sets the default layout direction of the grid. Default: LTR
$gri­ds-­col­umns
[Number (positive, unitless)] Sets the total number of columns in the grid. Default: 12
$gut­ter
[Number (positive, unit)] Sets the relative width of a single grid gutter. Default: golden­-ra­tio­(1em, 1)
$max­-wi­dth
[Number (positive, unit)] Sets the max-width property of the element that includes outer­-co­nta­ine­r(). Default: em(1088)
 

Bourbon Neat Functions

new-­bre­akp­oint( $first­-fe­ature $first­-value [$seco­nd-­fea­ture, $secon­d-v­alue] [$tota­l-c­olumns] )
Returns a media context (media query / grid context) that can be stored in a variable and passed to media() as a single­-ke­yword argument. Media contexts defined using new-br­eak­point are used by the visual grid, as long as they are defined before importing Neat.

Bourbon Neat Visual Grid

$vis­ual­-grid
[Boolean] When true, it displays the visual grid. Default: false
$vis­ual­-gr­id-­color
[Color] Sets the visual grid color. Default: #eee
$vis­ual­-gr­id-­index
[String (back|­front)] Sets the z-index of the visual grid. Default: back
$vis­ual­-gr­id-­opa­city
[Number (0.0-1.0)] Sets the opacity property of the visual grid. Default: 0.4

Download the Bourbon Neat Cheat Sheet

1 Page
//media.cheatography.com/storage/thumb/claysmith_bourbon-neat.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

 

Comments

Ryan Ryan , 08:37 5 May 14

Cool.thanks.!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          Polymer.js Cheat Sheet
          Selenium WebDriver Cheat Sheet Cheat Sheet