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

18
css/grids.css
View file

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

16
less/02-grids.less
View file

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