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 */
.grid {
.grid { /* overall container of grids */
overflow: hidden;
font-family: @fontstack3;
}
.grid > * {
.grid > * { /* global styles for direct child ex. .grid3 */
display: block;
padding: 0;
margin-left: -@gutter; /* gutter value */
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:-o-prefocus,
.grid > * {
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%;}
.grid3 > * {width: 33.333%;}
.grid4 > * {width: 25%;}
@ -77,7 +75,6 @@
.grid > * > * {width: 100% !important}
}
/* ---------------------------------- */
/* ==autogrids */
/* .. to automatically justify blocs */
@ -85,15 +82,8 @@
/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */
[class*="autogrid"] {
[class*="autogrid"] { /* container of autogrids */
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: "";
@ -102,13 +92,20 @@
}
[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-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%}
.autogrid3 > * {width: 32%}

20
less/11-ie.less
View file

@ -47,6 +47,26 @@
.visually-hidden {
*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 */
/* @source https://github.com/Schepp/box-sizing-polyfill */