Show Menu
Cheatography
  1. Home >
  2. Programming >

Bourbon Neat Cheat Sheet by

A lightweight semantic grid framework for Sass and Bourbon.

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
                   

Help Us Go Positive!

We offset our carbon usage with Ecologi. Click the link below to help us!

We offset our carbon footprint via Ecologi
 

Metadata

  • Languages:
  • Published: 30th September, 2013
  • Last Updated: 12th May, 2016
  • Rated: 5 stars based on 1 ratings

Favourited By

Mist. GraphX claysmith

Comments

Cool.thanks.!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          Cypressio Cheat Sheet
          Selenium WebDriver Cheat Sheet Cheat Sheet
          ISTQB Test Automation Engineering Cheat Sheet