Columns template for LESS CSS

columns_template.less

/************************
	Columns
	=======
	General template for creating columns.
	
	Usage
	-----
	To use, just set a parent div with three different classes:
	
	* .columns -- this defines the column class
	* .two, .three, .four, .five, .six -- set the amount of child divs
	* .grid -- OPTIONAL -- sets the grid layout (margin on bottom of elements)
	
	Then, you need to build divs inside the parent div. Each div will be floated
	left, and the last div will be floated right with no margin on the right.
	
	THE LAST CHILD DIV (COLUMN) IN A ROW NEEDS TO HAVE A .last CLASS!!
	
	Example
	-------
	div.columns.three
		div
		div
		div.last
	
************************/

@pageWidth: 960px;

// Basic Columns
.columns {
	> div {
		float: left;
		margin: 0 20px 0 0;
	}
	> div.last {
		float: right;
		margin: 0;
	}
}
// Grid layout
.columns.grid {
	> div {
		margin: 0 20px 20px 0;
	}
	> div.last {
		margin: 0 0 20px 0;
	}
}

// Two Columns
.columns.two {
	> div {
		width: (@pageWidth - 20) / 2;
	}
}

// Three Columns
.columns.three {
	> div {
		width: (@pageWidth - 40) / 3;
	}
}

// Four Columns
.columns.four {
	> div {
		width: (@pageWidth - 60) / 4;
	}
}

// Five Columns
.columns.five {
	> div {
		width: (@pageWidth - 80) / 5;
	}
}

// Six Columns
.columns.six {
	> div {
		width: (@pageWidth - 100) / 6;
	}
}

/************************
	Clearfix
************************/
.clearfix:after, .columns:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix, .columns {
	display: inline-block;
}
 
html[xmlns] .clearfix, html[xmlns] .columns {
	display: block;
}
 
* html .clearfix, * html .columns {
	height: 1%;
}