Total Width $total_width: 960px; // px or % Defines the overall width of the grid. If set to 100% the grid becomes fluid.

Total Columns $total_columns: 12; // number Defines the amount of columns in your grid.

Gutter Width $gutter_width: 1%; // px or % Sets the grid's gutter width. This can be % or px and will automatically determine the width of each column.

Container Margin $container_margin: 1%; // px or % Determines the margin on the left and right side of the grid. Example: If this is set to 0 for a 100% fluid grid, the grid will touch the sides of the browser.

Helper Classes $class_container: 'grid';

$class_column: 'col';

$class_push: 'push'; Allows you to change the name of the helper classes, that you can use to build your grid through markup.

Mixin: Helper Classes //helper_classes()

@include helper_classes(); Builds helper classes that can used to build the grid in the markup. Default classnames are: .container, .col1 - .colx, .push0 - .pushx

Mixin: Container //container()

.grid{ @include container(); } Establish the outer grid-containing element.

Mixin: Column //column($width, $padding:null)

.col{ @include column(3); } Creates a column of the specified width. The optional argument sets the columns position.

Mixin: Push //push($_column_index)

.col{ @include push(1); } Sets the position of a "column()" element. The argument is a 0-based index, so the above example would align the element the 2nd colum of the grid.

Mixin: Positions //positions($selector, $width)

@include positions('.grid', 3); Creates CSS Styles to automatically position every element in a grid of equal sized elements.