hacks-guide-minimal-mistake.../assets/less/grid.less

47 lines
1,016 B
Text
Raw Normal View History

2013-05-24 16:25:31 +02:00
// Defining number of columns in the grid.
// Common Values would be 12, 16 or 24
@width: 100%;
@def_grid: 12;
@margin: 0;
.container(){
margin:0 auto;
width:@width;
}
// Works out the width of elements based
// on total number of columns and width
// number of columns being displayed.
// Removes 20px for margins
.grid(@grid:@def_grid,@cols:'',@float:left,@display:inline){
display:@display;
float:@float;
width:(100%/@grid * @cols) - (@margin * 2);
}
// Allows for padding before element
.prefix(@grid:@def_grid,@cols:''){
margin-left:(100%/@grid * @cols);
}
// Allows for padding after element
.suffix(@grid:@def_grid,@cols:''){
margin-right:(100%/@grid * @cols);
}
// Removes left margin
.first(){
margin-left:0;
}
// Removes right margin
.last(){
margin-right:0;
}
.push(@grid:@def_grid,@move:'') {
position:relative;
left:(100%/@grid * @move);
}
.pull(@grid:@def_grid,@move:''){
position:relative;
left:(100%/@grid * @move) * -1;
}