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

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.
Centers the element in the viewport, clears its floats, and sets its max-width.
Resets the active display property to block.
Resets the active layout direction to the default value set in $defau­lt-­lay­out­-di­rec­tion.
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

[Boolean] When true, it sets the box-sizing property of all elements to borde­r-box. Default: true
[Number (positive, unit)] Sets the relative width of a single grid-c­olumn. Default: golden­-ra­tio­(1em, 3)
[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
[String (LTR|RTL)] Sets the default layout direction of the grid. Default: LTR
[Number (positive, unitless)] Sets the total number of columns in the grid. Default: 12
[Number (positive, unit)] Sets the relative width of a single grid gutter. Default: golden­-ra­tio­(1em, 1)
[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

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

Download the Bourbon Neat Cheat Sheet

1 Page

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!



Ryan Ryan , 08:37 5 May 14


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