Layout Plugin

Usage

First, you set up your grid to activate the plugin.

@grid
{
	column-width:60;
	column-count:12;
	left-gutter-width:10;
	right-gutter-width:10;
	baseline:20;
	unit:px;
}

This sets up and enables the layout plugin. It needs these settings. Left gutter and right gutter are optional. You can use both, just one, or none. The rest of the settings are required.

To create all of the grid classes (.columns-1, .columns-2 etc), add this anywhere inside your CSS (not inside a selector or property). It is replaced with all of the layout classes.

+grid-classes;

You can use the classes to create a layout, or use mixins. Whichever is easiest for you. The classes you can use are:

• .columns-x
• .push-x
• .pull-x
• .baseline-x
• .baseline-up-x
• .baseline-down-x
• .append-x
• .prepend-x

And the mixins you can use are:

• grid-classes
• container
• container-alt (includes gutters into the overall width like 960.gs)
• baseline-up(!x)
• baseline-down(!x)
• baseline(!x)
• span(!x)
• columns(!x)
• push(!x)
• pull(!x)
• append(!x)
• prepend(!x)
• first
• last

You can also use these constants:

• column-width
• column-count
• gutter-width
• left-gutter-width
• right-gutter-width
• baseline
• grid-width

Grid Image

A class is automatically added to your css called .showgrid. This is dynamically generated grid image that you can give to your layout elements to display the grid as a background.

Examples

@grid
{
	column-width:60;
	column-count:12;
	left-gutter-width:10px;
	right-gutter-width:10px;
	baseline:20px;
	unit:px;
}

.container 
{ 
	+container; 
}

+grid-classes;

#page
{
	#header 		{ +columns(12); }
	#content 		{ +columns(6); }
	#sub-content 	{ +columns(3); }
	#aside 		{ +columns(3); }
	#footer 		{ +columns(12); }
}