dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Correction d'un bug dans les grids

Browse source
This commit is contained in:
Raphael Goetter 2013-09-26 20:38:02 +02:00
parent 528e4f0fb1
commit dbda2a53c9
2 changed files with 19 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
css/grids.css
View file

@ -9,16 +9,20 @@
.grid > * {
display: block;
padding: 0;
margin: 0 -10px; /* half gutter value */
margin-left: -20px; /* gutter value */
text-align: left;
letter-spacing: -0.31em;
word-spacing: -0.43em;
text-rendering: optimizespeed;
}
/* Opera hack */
.opera:-o-prefocus,
.grid > * {
word-spacing: -0.43em;
}
.grid > * > * {
width: 100%;
display: inline-block;
padding: 0 10px; /* half gutter value */
width: 100%;
padding-left: 20px; /* gutter value */
margin-left: 0;
vertical-align: top;
text-align: left;
@ -27,7 +31,6 @@
text-rendering: auto;
*display: inline; *zoom: 1; /* IE67 hack */
}
.grid2 > * {width: 50%;}
.grid3 > * {width: 33.333%;}
.grid4 > * {width: 25%;}
@ -48,7 +51,6 @@
.grid1-3 > * + * { width: 75%; }
/* Responsiv-o-matic */
@media (max-width: 1024px) {
.grid5 > *,
.grid6 > *,
@ -66,5 +68,5 @@
.grid12 > * {width: 50%}
}
@media (max-width: 640px) {
.grid > * > * {width: 100%}
.grid > * > * {width: 100% !important}
}

16
less/02-grids.less
View file

@ -5,16 +5,20 @@
.grid > * {
display: block;
padding: 0;
margin: 0 (@gutter/2); /* half gutter value */
margin-left: @gutter; /* gutter value */
text-align: left;
letter-spacing: -0.31em;
word-spacing: -0.43em;
text-rendering: optimizespeed;
}
/* Opera hack */
.opera:-o-prefocus,
.grid > * {
word-spacing: -0.43em;
}
.grid > * > * {
width: 100%;
display: inline-block;
padding: 0 (@gutter/2); /* half gutter value */
width: 100%;
padding-left: @gutter; /* gutter value */
margin-left: 0;
vertical-align: top;
text-align: left;
@ -23,7 +27,6 @@
text-rendering: auto;
*display: inline; *zoom: 1; /* IE67 hack */
}
.grid2 > * {width: 50%;}
.grid3 > * {width: 33.333%;}
.grid4 > * {width: 25%;}
@ -44,7 +47,6 @@
.grid1-3 > * + * { width: 75%; }
/* Responsiv-o-matic */
@media (max-width: @largescreen) {
.grid5 > *,
.grid6 > *,
@ -62,5 +64,5 @@
.grid12 > * {width: 50%}
}
@media (max-width: @tinyscreen) {
.grid > * > * {width: 100%}
.grid > * > * {width: 100% !important}
}