Blueprint Documentation: Grid Module

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.sass

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 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)

Name	Overridable?	Default Value	Description
`!blueprint_grid_columns`	Yes	24	The number of grid units within a container.
`!blueprint_grid_width`	Yes	30px	The width of a grid unit less the grid margin
`!blueprint_grid_margin`	Yes	10px	The width of a grid margin
`!blueprint_grid_outer_width`	No	40px¹	The width of a grid unit plus margin
`!blueprint_container_size`	No	950px¹	The width of a grid container

¹ Calculated based on columns, width, and margin values.