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

new grids and autogrids system

Browse source
This commit is contained in:
Raphael Goetter 2014-05-03 11:08:29 +02:00
parent 65d39d67d1
commit 81a2441455
2 changed files with 49 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
less/02-grids.less
View file

@ -7,36 +7,34 @@
/* grids inspired from SUIT https://github.com/suitcss/suit */ /* grids inspired from SUIT https://github.com/suitcss/suit */
.grid { .grid { /* overall container of grids */
overflow: hidden; overflow: hidden;
font-family: @fontstack3;
} }
.grid > * { .grid > * { /* global styles for direct child ex. .grid3 */
display: block; display: block;
padding: 0; padding: 0;
margin-left: -@gutter; /* gutter value */ margin-left: -@gutter; /* gutter value */
text-align: left; text-align: left;
letter-spacing: -0.31em; }
text-rendering: optimizespeed; .grid > * > * { /* global styles for each "cell" */
display: inline-block;
padding-left: -@gutter; /* gutter value */
margin-left: 0;
vertical-align: top;
}
/* whitespace fixing for modern browsers including IE9+ */
:root .grid {
font-size: 0;
}
:root .grid > * > * {
font-size: @basefont; /* fallback for Opera Mini */
font-size: unit((@basefont / 10), rem);
} }
/* Opera hack */ /* Opera hack */
.opera:-o-prefocus, .opera:-o-prefocus,
.grid > * { .grid > * {
word-spacing: -0.43em; word-spacing: -0.43em;
} }
.grid > * > * {
display: inline-block;
*display: inline; *zoom: 1; /* IE67 hack */
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;
font-family: @fontstack1;
}
.grid2 > * {width: 50%;} .grid2 > * {width: 50%;}
.grid3 > * {width: 33.333%;} .grid3 > * {width: 33.333%;}
.grid4 > * {width: 25%;} .grid4 > * {width: 25%;}
@ -77,7 +75,6 @@
.grid > * > * {width: 100% !important} .grid > * > * {width: 100% !important}
} }
/* ---------------------------------- */ /* ---------------------------------- */
/* ==autogrids */ /* ==autogrids */
/* .. to automatically justify blocs */ /* .. to automatically justify blocs */
@ -85,15 +82,8 @@
/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */ /* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */
[class*="autogrid"] { [class*="autogrid"] { /* container of autogrids */
text-align: justify; 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 { [class*="autogrid"]:after {
content: ""; content: "";
@ -102,13 +92,20 @@
} }
[class*="autogrid"] > * { [class*="autogrid"] > * {
display: inline-block; display: inline-block;
*display: inline; zoom: 1; /* ie6 ie7 hack */
font-family: @fontstack1;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top; vertical-align: top;
text-align: left; text-align: left;
text-rendering: auto; }
/* whitespace fixing for modern browsers including IE9+ */
:root [class*="autogrid"] {
font-size: 0;
}
:root [class*="autogrid"] > * > * {
font-size: @basefont; /* fallback for Opera Mini */
font-size: unit((@basefont / 10), rem);
}
/* Opera hack */
[class*="autogrid"]:-o-prefocus {
word-spacing: -0.43em;
} }
.autogrid2 > * {width: 49%} .autogrid2 > * {width: 49%}
.autogrid3 > * {width: 32%} .autogrid3 > * {width: 32%}

20
less/11-ie.less
View file

@ -47,6 +47,26 @@
.visually-hidden { .visually-hidden {
*clip: rect(1px 1px 1px 1px); *clip: rect(1px 1px 1px 1px);
} }
/* IE8 grid hack */
.ie8 .grid > *,
.ie8 [class*="autogrid"] > * {
letter-spacing: -0.31em;
text-rendering: optimizespeed;
}
.ie8 .grid > * > *,
.ie8 [class*="autogrid"] > * > *{
letter-spacing: normal;
word-spacing: normal;
text-rendering: auto;
}
/* IE7 grid hack */
.grid > * > *,
[class*="autogrid"] > * > *{
*display: inline;
*zoom: 1;
}
/* Active box-sizing for IE6/IE7 */ /* Active box-sizing for IE6/IE7 */
/* @source https://github.com/Schepp/box-sizing-polyfill */ /* @source https://github.com/Schepp/box-sizing-polyfill */