LESS grid system

grid.less

.desktop(@rules){
	@media (min-width: 769px) { @rules(); }
}
.pad(@rules) {
	@media (max-width: 769px) { @rules(); }
}
.phone(@rules){
	@media (max-width: 420px) { @rules(); }
}
.clearfix(){
	&:after, &:before {  content: "";  display: table;
		// height: 0; visibility: hidden;
	}
	&:after {clear:both;}
	& { zoom:1; }
}
.col-offset(@num, @columns:12){ margin-left:@num*100%/@columns; }
.col(@num, @columns:12) {
	float: left; width:@num*100%/@columns; box-sizing: border-box;
	position: relative; min-height: 1px; display: block;}
.col-push(@num, @columns:12) {
	left: @num*100%/@columns;
}
.col-pull(@num, @columns:12) {
	right: @num*100%/@columns;
}
.col-xs-offset(@num){ .phone({ .col-offset(@num); }) }
.col-xs-push(@num){ .phone({ .col-push(@num); }) }
.col-xs-pull(@num){ .phone({ .col-pull(@num); }) }
.col-xs(@num){ .phone({ .col(@num); }) }
.col-sm-offset(@num){ .pad({ .col-offset(@num); }) }
.col-sm-push(@num){ .pad({ .col-push(@num); }) }
.col-sm-pull(@num){ .pad({ .col-pull(@num); }) }
.col-sm(@num){ .pad({ .col(@num); }) }
.col-md-offset(@num){ .desktop({ .col-offset(@num); }) }
.col-md-push(@num){ .desktop({ .col-push(@num); }) }
.col-md-pull(@num){ .desktop({ .col-pull(@num); }) }
.col-md(@num){ .desktop({ .col(@num); }) }