KNACSS 2.7 brand new grid system !
see https://github.com/raphaelgoetter/KNACSS/issues/29
This commit is contained in:
Raphael Goetter
parent
361c764906
commit
c9da966252
2 changed files with 106 additions and 145 deletions
111
css/grids.css
111
css/grids.css
|
|
@ -3,79 +3,70 @@
|
||||||
/* ==grids */
|
/* ==grids */
|
||||||
/* ----------------------------- */
|
/* ----------------------------- */
|
||||||
|
|
||||||
/* equal grids with 2% gutter */
|
/* grids inspired from SUIT https://github.com/suitcss/suit */
|
||||||
[class^=grid]:after {
|
|
||||||
content: "";
|
.grid {overflow-x: hidden;}
|
||||||
display: table;
|
.grid > * {
|
||||||
clear: both;
|
display: block;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 -20px; /* half gutter value */
|
||||||
|
text-align: left;
|
||||||
|
letter-spacing: -0.31em;
|
||||||
|
text-rendering: optimizespeed;
|
||||||
}
|
}
|
||||||
[class^=grid] > * {float: left; } /* direct childrens are floating */
|
/* Opera hack */
|
||||||
[class^=grid] > * + * { margin-left: 2%; } /* here's the gutter */
|
.opera:-o-prefocus,
|
||||||
.grid2 > * { width: 49%; }
|
.grid > * {word-spacing: -0.43em;}
|
||||||
.grid3 > * { width: 32%; }
|
|
||||||
.grid4 > * { width: 23.5%; }
|
|
||||||
.grid5 > * { width: 18.4%; }
|
|
||||||
.grid6 > * { width: 15%; }
|
|
||||||
|
|
||||||
/* unequal grids (1-2, 2-1, 1-3 and 3-1) with 2% gutter */
|
.grid > * > * {
|
||||||
.grid2-1 > *:first-child,
|
|
||||||
.grid1-2 > * + * { width: 66%; }
|
|
||||||
.grid1-2 > *:first-child,
|
|
||||||
.grid2-1 > * + * { width: 32%; }
|
|
||||||
.grid1-3 > *:first-child,
|
|
||||||
.grid3-1 > * + * { width: 23.5%; }
|
|
||||||
.grid3-1 > *:first-child,
|
|
||||||
.grid1-3 > * + * { width: 74.5%; }
|
|
||||||
|
|
||||||
/* ----------------------------- */
|
|
||||||
/* ==autogrids */
|
|
||||||
/* ----------------------------- */
|
|
||||||
|
|
||||||
/* auto-justified equal grids */
|
|
||||||
|
|
||||||
[class*="autogrid"] {
|
|
||||||
text-align: justify;
|
|
||||||
font-size: 1px; letter-spacing: -1px; /* whitespace fi xpart 1 */
|
|
||||||
}
|
|
||||||
[class*="autogrid"]:after {
|
|
||||||
content: "";
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
|
||||||
[class*="autogrid"] > * {
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
padding: 0 20px; /* half gutter value */
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-size: 14em; font-size: 1.4rem; letter-spacing: normal; /* whitespace fix part 2 */
|
letter-spacing: normal;
|
||||||
*display: inline; *zoom: 1; /* ie6 / ie7 hack */
|
word-spacing: normal;
|
||||||
|
text-rendering: auto;
|
||||||
|
*display: inline; *zoom: 1; /* IE67 hack */
|
||||||
}
|
}
|
||||||
.autogrid2 > * {width: 49%}
|
|
||||||
.autogrid3 > * {width: 32%}
|
.grid2 > * {width: 50%;}
|
||||||
.autogrid4 > * {width: 23.6%}
|
.grid3 > * {width: 33.333%;}
|
||||||
.autogrid5 > * {width: 19%}
|
.grid4 > * {width: 25%;}
|
||||||
.autogrid6 > * {width: 15%}
|
.grid5 > * {width: 20%;}
|
||||||
.autogrid8 > * {width: 10.8%}
|
.grid6 > * {width: 16.667%;}
|
||||||
.autogrid10 > * {width: 9%}
|
.grid8 > * {width: 12.5%;}
|
||||||
.autogrid12 > * {width: 6.4%}
|
.grid10 > * {width: 10%;}
|
||||||
|
.grid12 > * {width: 8.333%;}
|
||||||
|
|
||||||
|
/* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */
|
||||||
|
.grid2-1 > *:first-child,
|
||||||
|
.grid1-2 > * + * { width: 66.666%; }
|
||||||
|
.grid1-2 > *:first-child,
|
||||||
|
.grid2-1 > * + * { width: 33.333%; }
|
||||||
|
.grid1-3 > *:first-child,
|
||||||
|
.grid3-1 > * + * { width: 25%; }
|
||||||
|
.grid3-1 > *:first-child,
|
||||||
|
.grid1-3 > * + * { width: 75%; }
|
||||||
|
|
||||||
/* Responsiv-o-matic */
|
/* Responsiv-o-matic */
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
@media (max-width: 1024px) {
|
||||||
.autogrid5 > *,
|
.grid5 > *,
|
||||||
.autogrid6 > *,
|
.grid6 > *,
|
||||||
.autogrid8 > *,
|
.grid8 > *,
|
||||||
.autogrid10 > *,
|
.grid10 > *,
|
||||||
.autogrid12 > * {width: 32%}
|
.grid12 > * {width: 33.333%}
|
||||||
}
|
}
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.autogrid3 > *,
|
.grid3 > *,
|
||||||
.autogrid4 > *,
|
.grid4 > *,
|
||||||
.autogrid5 > *,
|
.grid5 > *,
|
||||||
.autogrid6 > *,
|
.grid6 > *,
|
||||||
.autogrid8 > *,
|
.grid8 > *,
|
||||||
.autogrid10 > *,
|
.grid10 > *,
|
||||||
.autogrid12 > * {width: 49%}
|
.grid12 > * {width: 50%}
|
||||||
}
|
}
|
||||||
@media (max-width: 640px) {
|
@media (max-width: 640px) {
|
||||||
[class*="autogrid"] > * {width: 100%}
|
.grid > * > * {width: 100%}
|
||||||
}
|
}
|
||||||
136
less/knacss.less
136
less/knacss.less
|
|
@ -1,5 +1,5 @@
|
||||||
/*
|
/*
|
||||||
* www.KNACSS.com V2.6n (2013-07) @author: Raphael Goetter, Alsacreations
|
* www.KNACSS.com V2.7 (2013-08) @author: Raphael Goetter, Alsacreations
|
||||||
* Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
|
* Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
@tinyscreen : 480px; // tiny screens media query
|
@tinyscreen : 480px; // tiny screens media query
|
||||||
@smallscreen : 768px; // small screens media query
|
@smallscreen : 768px; // small screens media query
|
||||||
@largescreen : 1280px; // large screens media query
|
@largescreen : 1280px; // large screens media query
|
||||||
@gutter : 1.5%; // gutter value (%) for grid layouts
|
@gutter : 20px; // gutter value (%, px, em, rem, etc) for grid layouts
|
||||||
|
|
||||||
// LESS functions : don't touch ;)
|
// LESS functions : don't touch ;)
|
||||||
.pxtoem (@fontsize) {font-size: ((@fontsize / @basefont) + 0em);}
|
.pxtoem (@fontsize) {font-size: ((@fontsize / @basefont) + 0em);}
|
||||||
|
|
@ -340,102 +340,72 @@ img.left, img.right {
|
||||||
.txtright { text-align: right; }
|
.txtright { text-align: right; }
|
||||||
.txtcenter { text-align: center; }
|
.txtcenter { text-align: center; }
|
||||||
|
|
||||||
/* grids */
|
/* grids inspired from SUIT https://github.com/suitcss/suit */
|
||||||
/* ------------------------------ */
|
|
||||||
[class^=grid]:after {
|
|
||||||
content: "";
|
|
||||||
display: table;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
[class^=grid] > * {float: left; } /* direct childrens are floating */
|
|
||||||
|
|
||||||
.grid2 > * {.grid(2);}
|
.grid {overflow-x: hidden;}
|
||||||
.grid3 > * {.grid(3);}
|
.grid > * {
|
||||||
.grid4 > * {.grid(4);}
|
display: block;
|
||||||
.grid5 > * {.grid(5);}
|
padding: 0;
|
||||||
.grid6 > * {.grid(6);}
|
margin: 0 (@gutter/2); /* half gutter value */
|
||||||
|
text-align: left;
|
||||||
|
letter-spacing: -0.31em;
|
||||||
|
text-rendering: optimizespeed;
|
||||||
|
}
|
||||||
|
/* Opera hack */
|
||||||
|
.opera:-o-prefocus,
|
||||||
|
.grid > * {word-spacing: -0.43em;}
|
||||||
|
|
||||||
.grid2 > * + *,
|
.grid > * > * {
|
||||||
.grid3 > * + *,
|
|
||||||
.grid4 > * + *,
|
|
||||||
.grid5 > * + *,
|
|
||||||
.grid6 > * + *,
|
|
||||||
.grid2-1 > * + *,
|
|
||||||
.grid1-2 > * + *,
|
|
||||||
.grid3-1 > * + *,
|
|
||||||
.grid1-3 > * + * {
|
|
||||||
margin-left: @gutter;
|
|
||||||
}
|
|
||||||
.grid2-1 > *,
|
|
||||||
.grid1-2 > * {
|
|
||||||
width: (100%-@gutter) / 3;
|
|
||||||
}
|
|
||||||
.grid2-1 > :first-child,
|
|
||||||
.grid1-2 > * + * {
|
|
||||||
width: (100%-@gutter) * 2 / 3;
|
|
||||||
}
|
|
||||||
.grid3-1 > *,
|
|
||||||
.grid1-3 > * {
|
|
||||||
width: (100%-@gutter) / 4;
|
|
||||||
}
|
|
||||||
.grid3-1 > :first-child,
|
|
||||||
.grid1-3 > * + * {
|
|
||||||
width: (100%-@gutter) * 3 / 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ----------------------------- */
|
|
||||||
/* ==autogrids */
|
|
||||||
/* ----------------------------- */
|
|
||||||
|
|
||||||
/* auto-justified equal grids */
|
|
||||||
|
|
||||||
[class*="autogrid"] {
|
|
||||||
text-align: justify;
|
|
||||||
font-size: 1px; letter-spacing: -1px; /* whitespace fi xpart 1 */
|
|
||||||
}
|
|
||||||
[class*="autogrid"]:after {
|
|
||||||
content: "";
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
|
||||||
[class*="autogrid"] > * {
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
padding: 0 (@gutter/2); /* half gutter value */
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-size: (@basefont + 0em);
|
letter-spacing: normal;
|
||||||
font-size: ((@basefont / 10) + 0rem);
|
word-spacing: normal;
|
||||||
letter-spacing: normal; /* whitespace fix part 2 */
|
text-rendering: auto;
|
||||||
*display: inline; *zoom: 1; /* ie6 / ie7 hack */
|
*display: inline; *zoom: 1; /* IE67 hack */
|
||||||
}
|
}
|
||||||
.autogrid2 > * {width: 49%}
|
|
||||||
.autogrid3 > * {width: 32%}
|
.grid2 > * {width: 50%;}
|
||||||
.autogrid4 > * {width: 23.6%}
|
.grid3 > * {width: 33.333%;}
|
||||||
.autogrid5 > * {width: 19%}
|
.grid4 > * {width: 25%;}
|
||||||
.autogrid6 > * {width: 15%}
|
.grid5 > * {width: 20%;}
|
||||||
.autogrid8 > * {width: 10.8%}
|
.grid6 > * {width: 16.667%;}
|
||||||
.autogrid10 > * {width: 9%}
|
.grid8 > * {width: 12.5%;}
|
||||||
.autogrid12 > * {width: 6.4%}
|
.grid10 > * {width: 10%;}
|
||||||
|
.grid12 > * {width: 8.333%;}
|
||||||
|
|
||||||
|
/* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */
|
||||||
|
.grid2-1 > *:first-child,
|
||||||
|
.grid1-2 > * + * { width: 66.666%; }
|
||||||
|
.grid1-2 > *:first-child,
|
||||||
|
.grid2-1 > * + * { width: 33.333%; }
|
||||||
|
.grid1-3 > *:first-child,
|
||||||
|
.grid3-1 > * + * { width: 25%; }
|
||||||
|
.grid3-1 > *:first-child,
|
||||||
|
.grid1-3 > * + * { width: 75%; }
|
||||||
|
|
||||||
/* Responsiv-o-matic */
|
/* Responsiv-o-matic */
|
||||||
|
|
||||||
@media (max-width: @largescreen) {
|
@media (max-width: @largescreen) {
|
||||||
.autogrid5 > *,
|
.grid5 > *,
|
||||||
.autogrid6 > *,
|
.grid6 > *,
|
||||||
.autogrid8 > *,
|
.grid8 > *,
|
||||||
.autogrid10 > *,
|
.grid10 > *,
|
||||||
.autogrid12 > * {width: 32%}
|
.grid12 > * {width: 33.333%}
|
||||||
}
|
}
|
||||||
@media (max-width: @smallscreen) {
|
@media (max-width: @smallscreen) {
|
||||||
.autogrid3 > *,
|
.grid3 > *,
|
||||||
.autogrid4 > *,
|
.grid4 > *,
|
||||||
.autogrid5 > *,
|
.grid5 > *,
|
||||||
.autogrid6 > *,
|
.grid6 > *,
|
||||||
.autogrid8 > *,
|
.grid8 > *,
|
||||||
.autogrid10 > *,
|
.grid10 > *,
|
||||||
.autogrid12 > * {width: 49%}
|
.grid12 > * {width: 50%}
|
||||||
}
|
}
|
||||||
@media (max-width: @tinyscreen) {
|
@media (max-width: @tinyscreen) {
|
||||||
[class*="autogrid"] > * {width: 100%}
|
.grid > * > * {width: 100%}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* blocks widths (percentage and pixels) */
|
/* blocks widths (percentage and pixels) */
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue