Cheatography
https://cheatography.com
A lightweight semantic grid framework for Sass and Bourbon.
Bourbon Neat Mixinsfill-parent() Forces the element to fill its parent container. | media( [$first-feature] $first-value [$second-feature, $second-value], [$total-columns] ) Outputs a media-query block with an optional grid context. | span-columns( $columns [of $container-columns], [$display] ) Sets the width of an element to that of the number of columns it spans. | pad( [$padding-shorthand] ) Adds padding to the element. | omega( [$pseudo-target $display] ) Removes block and table elements' gutter. | outer-container() Centers the element in the viewport, clears its floats, and sets its max-width. | reset-display() Resets the active display property to block. | reset-layout() Resets the active layout direction to the default value set in $default-layout-direction. | reset-all() Resets both the active layout direction and the active display property. | row( [$display, $direction] ) Designates the element as a grid row. | shift( $columns ) Translates an element horizontally positively or negatively. |
| | Bourbon Neat Variables$border-box-sizing [Boolean] When true, it sets the box-sizing property of all elements to border-box. Default: true | $column [Number (positive, unit)] Sets the relative width of a single grid-column. Default: golden-ratio(1em, 3) | $default-feature [String] Sets the default media feature that media() and new-breakpoint() revert to when only a breakpoint value is passed. Default: min-width | $default-layout-direction [String (LTR|RTL)] Sets the default layout direction of the grid. Default: LTR | $grids-columns [Number (positive, unitless)] Sets the total number of columns in the grid. Default: 12 | $gutter [Number (positive, unit)] Sets the relative width of a single grid gutter. Default: golden-ratio(1em, 1) | $max-width [Number (positive, unit)] Sets the max-width property of the element that includes outer-container(). Default: em(1088) |
| | Bourbon Neat Functionsnew-breakpoint( $first-feature $first-value [$second-feature, $second-value] [$total-columns] ) Returns a media context (media query / grid context) that can be stored in a variable and passed to media() as a single-keyword argument. Media contexts defined using new-breakpoint are used by the visual grid, as long as they are defined before importing Neat. |
Bourbon Neat Visual Grid$visual-grid [Boolean] When true, it displays the visual grid. Default: false | $visual-grid-color [Color] Sets the visual grid color. Default: #eee | $visual-grid-index [String (back|front)] Sets the z-index of the visual grid. Default: back | $visual-grid-opacity [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!
Created By
janineandclay.com
Metadata
Favourited By
Comments
Cool.thanks.!
Add a Comment
Related Cheat Sheets