Semantic Grid

semantic-grid.less

/* ==|=======================================================================
   Grid //  http://semantic.gs/ 
========================================================================== */
 
/*	Altere estes valores de acordo com a largura das colunas, 
	largura das margens e o número de colunas do seu grid.*/
	
@column-width: 60;
@gutter-width: 20;
@columns: 12;
 
@gridsystem-width: (@column-width*@columns) + (@gutter-width*@columns) * 1px;
 
/*Delete a linha abaixo se desejar trabalhar com valores em pixel.*/
@total-width: 100%;
 
.clearfix() {
	*zoom:1;
 
	&:before,
	&:after {
	    content:"";
	    display:table;
	}
	&:after {
	    clear:both;
	}
}
 
body {
	width: 100%;
	.clearfix;
}
 
.row(@columns:@columns) {
	display: block;
	width: @total-width*((@gutter-width + @gridsystem-width)/@gridsystem-width);
	margin: 0 @total-width*(((@gutter-width*.5)/@gridsystem-width)*-1);
	.clearfix;
}
.column(@x,@columns:@columns) {
	display: inline;
	float: left;
	width: @total-width*((((@gutter-width+@column-width)*@x)-@gutter-width) / @gridsystem-width);
	margin: 0 @total-width*((@gutter-width*.5)/@gridsystem-width);
	}
 
.push(@offset:1) {
	margin-left: @total-width*(((@gutter-width+@column-width)*@offset) / @gridsystem-width) + @total-width*((@gutter-width*.5)/@gridsystem-width);
}
.pull(@offset:1) {
	margin-right: @total-width*(((@gutter-width+@column-width)*@offset) / @gridsystem-width) + @total-width*((@gutter-width*.5)/@gridsystem-width);
}
 
/*Determine a largura do seu container.*/
.wrap {
	max-width: 960px;
	margin: 0 auto;
}