From c9da966252f5dbd23b2f7d52ccf0d66debca062a Mon Sep 17 00:00:00 2001 From: Raphael Goetter Date: Fri, 30 Aug 2013 21:22:58 +0200 Subject: [PATCH] KNACSS 2.7 brand new grid system ! see https://github.com/raphaelgoetter/KNACSS/issues/29 --- css/grids.css | 113 ++++++++++++++++++-------------------- less/knacss.less | 138 +++++++++++++++++++---------------------------- 2 files changed, 106 insertions(+), 145 deletions(-) diff --git a/css/grids.css b/css/grids.css index f8303da..f064a81 100644 --- a/css/grids.css +++ b/css/grids.css @@ -3,79 +3,70 @@ /* ==grids */ /* ----------------------------- */ -/* equal grids with 2% gutter */ -[class^=grid]:after { - content: ""; - display: table; - clear: both; +/* grids inspired from SUIT https://github.com/suitcss/suit */ + +.grid {overflow-x: hidden;} +.grid > * { + 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 */ -[class^=grid] > * + * { margin-left: 2%; } /* here's the gutter */ -.grid2 > * { width: 49%; } -.grid3 > * { width: 32%; } -.grid4 > * { width: 23.5%; } -.grid5 > * { width: 18.4%; } -.grid6 > * { width: 15%; } +/* Opera hack */ +.opera:-o-prefocus, +.grid > * {word-spacing: -0.43em;} -/* unequal grids (1-2, 2-1, 1-3 and 3-1) with 2% gutter */ -.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%; -} -[class*="autogrid"] > * { +.grid > * > * { + width: 100%; display: inline-block; + padding: 0 20px; /* half gutter value */ vertical-align: top; text-align: left; - font-size: 14em; font-size: 1.4rem; letter-spacing: normal; /* whitespace fix part 2 */ - *display: inline; *zoom: 1; /* ie6 / ie7 hack */ + letter-spacing: normal; + word-spacing: normal; + text-rendering: auto; + *display: inline; *zoom: 1; /* IE67 hack */ } -.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%} + +.grid2 > * {width: 50%;} +.grid3 > * {width: 33.333%;} +.grid4 > * {width: 25%;} +.grid5 > * {width: 20%;} +.grid6 > * {width: 16.667%;} +.grid8 > * {width: 12.5%;} +.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 */ @media (max-width: 1024px) { - .autogrid5 > *, - .autogrid6 > *, - .autogrid8 > *, - .autogrid10 > *, - .autogrid12 > * {width: 32%} + .grid5 > *, + .grid6 > *, + .grid8 > *, + .grid10 > *, + .grid12 > * {width: 33.333%} } @media (max-width: 768px) { - .autogrid3 > *, - .autogrid4 > *, - .autogrid5 > *, - .autogrid6 > *, - .autogrid8 > *, - .autogrid10 > *, - .autogrid12 > * {width: 49%} + .grid3 > *, + .grid4 > *, + .grid5 > *, + .grid6 > *, + .grid8 > *, + .grid10 > *, + .grid12 > * {width: 50%} } @media (max-width: 640px) { - [class*="autogrid"] > * {width: 100%} + .grid > * > * {width: 100%} } \ No newline at end of file diff --git a/less/knacss.less b/less/knacss.less index 2caacfa..c84a996 100644 --- a/less/knacss.less +++ b/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/ */ @@ -12,7 +12,7 @@ @tinyscreen : 480px; // tiny screens media query @smallscreen : 768px; // small 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 ;) .pxtoem (@fontsize) {font-size: ((@fontsize / @basefont) + 0em);} @@ -340,102 +340,72 @@ img.left, img.right { .txtright { text-align: right; } .txtcenter { text-align: center; } -/* grids */ -/* ------------------------------ */ -[class^=grid]:after { - content: ""; - display: table; - clear: both; -} -[class^=grid] > * {float: left; } /* direct childrens are floating */ +/* grids inspired from SUIT https://github.com/suitcss/suit */ -.grid2 > * {.grid(2);} -.grid3 > * {.grid(3);} -.grid4 > * {.grid(4);} -.grid5 > * {.grid(5);} -.grid6 > * {.grid(6);} +.grid {overflow-x: hidden;} +.grid > * { + display: block; + padding: 0; + 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 > * + *, -.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%; -} -[class*="autogrid"] > * { +.grid > * > * { + width: 100%; display: inline-block; + padding: 0 (@gutter/2); /* half gutter value */ vertical-align: top; text-align: left; - font-size: (@basefont + 0em); - font-size: ((@basefont / 10) + 0rem); - letter-spacing: normal; /* whitespace fix part 2 */ - *display: inline; *zoom: 1; /* ie6 / ie7 hack */ + letter-spacing: normal; + word-spacing: normal; + text-rendering: auto; + *display: inline; *zoom: 1; /* IE67 hack */ } -.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%} + +.grid2 > * {width: 50%;} +.grid3 > * {width: 33.333%;} +.grid4 > * {width: 25%;} +.grid5 > * {width: 20%;} +.grid6 > * {width: 16.667%;} +.grid8 > * {width: 12.5%;} +.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 */ @media (max-width: @largescreen) { - .autogrid5 > *, - .autogrid6 > *, - .autogrid8 > *, - .autogrid10 > *, - .autogrid12 > * {width: 32%} + .grid5 > *, + .grid6 > *, + .grid8 > *, + .grid10 > *, + .grid12 > * {width: 33.333%} } @media (max-width: @smallscreen) { - .autogrid3 > *, - .autogrid4 > *, - .autogrid5 > *, - .autogrid6 > *, - .autogrid8 > *, - .autogrid10 > *, - .autogrid12 > * {width: 49%} + .grid3 > *, + .grid4 > *, + .grid5 > *, + .grid6 > *, + .grid8 > *, + .grid10 > *, + .grid12 > * {width: 50%} } @media (max-width: @tinyscreen) { - [class*="autogrid"] > * {width: 100%} + .grid > * > * {width: 100%} } /* blocks widths (percentage and pixels) */