You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.1 KiB
50 lines
1.1 KiB
.clear-fix:after |
|
content: '' |
|
display: table |
|
clear: both |
|
|
|
// grille ultra-simple pour projets ultra-simples |
|
$grid_width : 100% // largeur de la grille en % |
|
$grid_max_width : 1080px // largeur max. en px |
|
$grid_cols : 12 // nombre de colonnes |
|
$grid_gut : 0 // largeur de la goutière en % |
|
$grid_col : ($grid_width - ($grid_gut * ($grid_cols - 1))) / $grid_cols |
|
$grid_col_push : $grid_width/$grid_cols |
|
$class-col : col !default |
|
$class-push : push !default |
|
|
|
// contenant |
|
.wrap |
|
width: $grid_width |
|
max-width: $grid_max_width |
|
margin: 0 auto |
|
background : transparent |
|
position: relative |
|
z-index: 10 |
|
+box-sizing(border-box) |
|
@extend .clear-fix |
|
.col |
|
float: left |
|
margin: 0 $grid_gut 0 0 |
|
+box-sizing(border-box) |
|
@extend .clear-fix |
|
@for $i from 1 through $grid_cols |
|
$j: $i - 1 |
|
.#{$class-col}-#{$i} |
|
width: ($i * $grid_col) + ($j * $grid_gut) |
|
.#{$class-col}-#{$i}-full |
|
width: ($i * $grid_col_push) |
|
float: left |
|
margin: 0 |
|
+box-sizing(border-box) |
|
@extend .clear-fix |
|
.#{$class-push}-#{$i} |
|
margin-left: ($i * $grid_col) + ($i * $grid_gut) |
|
|
|
|
|
.col.last, .#{$class-col}-#{$grid_cols} |
|
margin-right: 0 |
|
.col.first |
|
clear : left |
|
|
|
|
|
|