74cc6f27ba
Petit ménage répétition inutile Fix font-size iOS version LESS Grilles et typo Changer la licence de KNACSS Conserver le commentaire de présentation de licence Correction grid reponsive classes manquantes version LESS (largeurs de blocs)
72 lines
No EOL
1.5 KiB
Text
72 lines
No EOL
1.5 KiB
Text
|
|
/* grids inspired from SUIT https://github.com/suitcss/suit */
|
|
|
|
.grid {
|
|
overflow: hidden;
|
|
font-family: @fontstack3;
|
|
}
|
|
.grid > * {
|
|
display: block;
|
|
padding: 0;
|
|
margin-left: @gutter; /* gutter value */
|
|
text-align: left;
|
|
letter-spacing: -0.31em;
|
|
text-rendering: optimizespeed;
|
|
}
|
|
/* Opera hack */
|
|
.opera:-o-prefocus,
|
|
.grid > * {
|
|
word-spacing: -0.43em;
|
|
}
|
|
.grid > * > * {
|
|
display: inline-block;
|
|
width: 100%;
|
|
padding-left: @gutter; /* gutter value */
|
|
margin-left: 0;
|
|
vertical-align: top;
|
|
text-align: left;
|
|
letter-spacing: normal;
|
|
word-spacing: normal;
|
|
text-rendering: auto;
|
|
*display: inline; *zoom: 1; /* IE67 hack */
|
|
font-family: @fontstack1;
|
|
}
|
|
.grid2 > * {width: 50%;}
|
|
.grid3 > * {width: 33.333%;}
|
|
.grid4 > * {width: 25%;}
|
|
.grid5 > * {width: 20%;}
|
|
.grid6 > * {width: 16.667%;}
|
|
.grid8 > * {width: 12.5%;}
|
|
.grid10 > * {width: 10%;}
|
|
.grid12 > * {width: 8.333%;}
|
|
|
|
/* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */
|
|
.grid2-1 > *:first-child,
|
|
.grid1-2 > * + * { width: 66.666%; }
|
|
.grid1-2 > *:first-child,
|
|
.grid2-1 > * + * { width: 33.333%; }
|
|
.grid1-3 > *:first-child,
|
|
.grid3-1 > * + * { width: 25%; }
|
|
.grid3-1 > *:first-child,
|
|
.grid1-3 > * + * { width: 75%; }
|
|
|
|
/* Responsiv-o-matic */
|
|
@media (max-width: @largescreen) {
|
|
.grid5 > *,
|
|
.grid6 > *,
|
|
.grid8 > *,
|
|
.grid10 > *,
|
|
.grid12 > * {width: 33.333%}
|
|
}
|
|
@media (max-width: @smallscreen) {
|
|
.grid3 > *,
|
|
.grid4 > *,
|
|
.grid5 > *,
|
|
.grid6 > *,
|
|
.grid8 > *,
|
|
.grid10 > *,
|
|
.grid12 > * {width: 50%}
|
|
}
|
|
@media (max-width: @tinyscreen) {
|
|
.grid > * > * {width: 100% !important}
|
|
} |