Super simple 12 span grid system in LESS, use with or without media queries!

magic_grid.less

@wrap: 740px;
@gutter: 20px;

* {
  -moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box; 
}

.gridMake(@gutter : @gutter) {
  .span1 {.columnConstructor(1,   @gutter)}
	.span2 {.columnConstructor(2,   @gutter)}
	.span3 {.columnConstructor(3,   @gutter)}
	.span4 {.columnConstructor(4,   @gutter)}
	.span5 {.columnConstructor(5,   @gutter)}
	.span6 {.columnConstructor(6,   @gutter)}
	.span7 {.columnConstructor(7,   @gutter)}
	.span8 {.columnConstructor(8,   @gutter)}
	.span9 {.columnConstructor(9,   @gutter)}
	.span10 {.columnConstructor(10, @gutter)}
	.span11 {.columnConstructor(11, @gutter)}
	.span12 {.columnConstructor(12, @gutter)}
}

.columnConstructor(@percentage, @gutter) {
	@calcPercentage: (@percentage/12) * 100;
	float:left;
	padding:@gutter;
	width:~"@{calcPercentage}%";	
	&.compact {padding:0}
	&.compact-vertical {padding:0 @gutter}
}