Blueprint Documentation: Grid Module

The Reset module provides mixins that allow you to reset your html so that every element has browser-supplied no styling. The source of the grid module can be found here.

Importing

To import the Blueprint Grid Module to any Sass File:

@import blueprint/modules/grid

Class & Element Mixins

Class mixins provide classes and/or define styles for elements. These will be scoped according to the selector you mix them into.

Mixin	Description
+blueprint-grid	Mix into a selector to get all the blueprint grid CSS classes scoped by that selector.

Style Mixins

Style mixins provide styles that can be mixed into any selector.

Mixin	Description
+container	Defines the selector as container of columns.
+column(n[, last])	Defines the selector as a column. The first argument is the number of grid units to span and the second argument is a boolean that indicates whether the column is the last in the current row. E.g. +column(12) or +column(8, true)
+span(n[, last])	Defines the selector as spanning n grid units in width without bringing along the other column styles. This is useful on non div elements where alignment is required but floating is not. The first argument is the number of grid units to span and the second argument is a boolean that indicates whether the column is the last in the current row. E.g. +span(12) or +span(8, true)
+last	Declares a column is the last column in its row. This mixin is useful when you need to apply last styles separately from the column declaration. E.g. +last
+append(n)	Appends n grid units to the right of the column. E.g. +append(2)
+prepend(n)	Prepends n grid units to the left of the column. E.g. +prepend(2)
+pull(n)	Move a column n grid units to the left. E.g. +pull(2)
+push(n)	Move a column n grid units to the right. E.g. +push(2)
+border	Border on right hand side of a column.
+colborder	Border on right hand side of a column. Consumes one grid unit.
+colruler	Mixin to an hr that should span the column containing it.
+colspacer	Mixin to an hr that should span the column containing it but not be visible (adds vertical space)

Constants

Name	Overridable?	Default Value	Description
!layout_grid_columns	No	24	The number of grid units within a container.
!layout_grid_width	No	30px	The width of a grid unit less the grid margin
!layout_grid_margin	No	10px	The width of a grid margin
!layout_grid_outer_width	No	40px	The width of a grid unit
!layout_grid_size	No	950px	The width of a grid container