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

autogrids added, prefix deleted

Browse source
This commit is contained in:
Raphael Goetter 2014-02-01 18:37:56 +01:00
parent 8e3c6aa61e
commit 9eb7aa58d6
9 changed files with 322 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

69
less/02-grids.less
View file

@ -1,4 +1,10 @@
@import "00-config";
/* ---------------------------------- */
/* ==classic grids */
/* .. use it when gutter size matters */
/* ---------------------------------- */
/* grids inspired from SUIT https://github.com/suitcss/suit */
/* font-family hack explained here : https://github.com/raphaelgoetter/KNACSS/issues/37 */
@ -21,6 +27,7 @@
}
.grid > * > * {
display: inline-block;
*display: inline; *zoom: 1; /* IE67 hack */
width: 100%;
padding-left: @gutter; /* gutter value */
margin-left: 0;
@ -29,7 +36,6 @@
letter-spacing: normal;
word-spacing: normal;
text-rendering: auto;
*display: inline; *zoom: 1; /* IE67 hack */
font-family: @fontstack1;
}
.grid2 > * {width: 50%;}
@ -70,4 +76,65 @@
}
@media (max-width: @tinyscreen) {
.grid > * > * {width: 100% !important}
}
/* ---------------------------------- */
/* ==autogrids */
/* .. to automatically justify blocs */
/* ---------------------------------- */
/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */
[class*="autogrid"] {
text-align: justify;
font-family: @fontstack3;
letter-spacing: -0.31em;
text-rendering: optimizespeed;
}
/* Opera hack */
[class*="autogrid"]:-o-prefocus {
word-spacing: -0.43em;
}
[class*="autogrid"]:after {
content: "";
display: inline-block;
width: 100%;
}
[class*="autogrid"] > * {
display: inline-block;
*display: inline; zoom: 1; /* ie6 ie7 hack */
font-family: @fontstack1;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
.autogrid2 > * {width: 49%}
.autogrid3 > * {width: 32%}
.autogrid4 > * {width: 23.6%}
.autogrid5 > * {width: 19%}
.autogrid6 > * {width: 15%}
.autogrid8 > * {width: 10.8%}
.autogrid10 > * {width: 9%}
.autogrid12 > * {width: 6.4%}
@media (max-width: @largescreen) {
.autogrid5 > *,
.autogrid6 > *,
.autogrid8 > *,
.autogrid10 > *,
.autogrid12 > * {width: 32%}
}
@media (max-width: @smallscreen) {
.autogrid5 > *,
.autogrid6 > *,
.autogrid8 > *,
.autogrid10 > *,
.autogrid12 > * {width: 49%}
}
@media (max-width: @tinyscreen) {
[class*="autogrid"] > * {width: 100%}
}