From 9eb7aa58d678b0db7f593ab8de16eb958f2db547 Mon Sep 17 00:00:00 2001 From: Raphael Goetter Date: Sat, 1 Feb 2014 18:37:56 +0100 Subject: [PATCH] autogrids added, prefix deleted --- bower.json | 2 +- css/02-grids.css | 113 ++++++++++++++++++++++++++++++- css/06-rwd.css | 1 - css/07-flexbox.css | 41 +++++------- css/knacss.css | 155 +++++++++++++++++++++++++++++++++++-------- less/01-base.less | 8 +-- less/02-grids.less | 69 ++++++++++++++++++- less/06-rwd.less | 4 -- less/07-flexbox.less | 31 --------- 9 files changed, 322 insertions(+), 102 deletions(-) diff --git a/bower.json b/bower.json index 6435907..de31f29 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "KNACSS", - "version": "2.9.3", + "version": "2.9.4", "homepage": "http://www.knacss.com/", "authors": [ "Raphaël GOETTER, Alsacreations" diff --git a/css/02-grids.css b/css/02-grids.css index 6ed6c98..67ca38b 100644 --- a/css/02-grids.css +++ b/css/02-grids.css @@ -1,3 +1,11 @@ +/* ---------------------------------- */ + +/* ==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 */ @@ -26,6 +34,9 @@ .grid > * > * { display: inline-block; + *display: inline; + *zoom: 1; + /* IE67 hack */ width: 100%; padding-left: 20px; /* gutter value */ @@ -35,9 +46,6 @@ letter-spacing: normal; word-spacing: normal; text-rendering: auto; - *display: inline; - *zoom: 1; - /* IE67 hack */ font-family: Helvetica, Arial, sans-serif; } @@ -123,4 +131,103 @@ .grid > * > * { width: 100% !important; } +} + +/* ---------------------------------- */ + +/* ==autogrids */ + +/* .. to automatically justify blocs */ + +/* ---------------------------------- */ + +/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */ + +[class*="autogrid"] { + text-align: justify; + font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; + 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: Helvetica, Arial, sans-serif; + 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: 1280px) { + .autogrid5 > *, + .autogrid6 > *, + .autogrid8 > *, + .autogrid10 > *, + .autogrid12 > * { + width: 32%; + } +} + +@media (max-width: 768px) { + .autogrid5 > *, + .autogrid6 > *, + .autogrid8 > *, + .autogrid10 > *, + .autogrid12 > * { + width: 49%; + } +} + +@media (max-width: 480px) { + [class*="autogrid"] > * { + width: 100%; + } } \ No newline at end of file diff --git a/css/06-rwd.css b/css/06-rwd.css index aabac73..ea9994c 100644 --- a/css/06-rwd.css +++ b/css/06-rwd.css @@ -147,7 +147,6 @@ -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; - -o-hyphens: auto; hyphens: auto; } diff --git a/css/07-flexbox.css b/css/07-flexbox.css index 6b51794..b39a5d8 100644 --- a/css/07-flexbox.css +++ b/css/07-flexbox.css @@ -3,69 +3,60 @@ Tutorial: http://knacss.com/demos/tutoriel.html#flex */ .flex { display: -webkit-box; + display: -webkit-flex; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; } .flex-h { -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - -webkit-flex-direction: row; - -ms-flex-direction: row; -webkit-box-direction: normal; + -webkit-flex-direction: row; + -moz-box-orient: horizontal; -moz-box-direction: normal; + -ms-flex-direction: row; flex-direction: row; } .flex-v { -webkit-box-orient: vertical; - -moz-box-orient: vertical; - -webkit-flex-direction: column; - -ms-flex-direction: column; -webkit-box-direction: normal; + -webkit-flex-direction: column; + -moz-box-orient: vertical; -moz-box-direction: normal; + -ms-flex-direction: column; flex-direction: column; } .flex-fluid { - -moz-box-flex: 1; - -webkit-flex: 1; - -moz-flex: 1; - -ms-flex: 1; -webkit-box-flex: 1; + -webkit-flex: 1; + -moz-box-flex: 1; + -ms-flex: 1; flex: 1; } .flex-start { - -webkit-box-ordinal-group: -1; + -webkit-box-ordinal-group: 0; + -webkit-order: -1; -moz-box-ordinal-group: 0; -ms-flex-order: -1; - -webkit-order: -1; - -moz-order: -1; - -webkit-box-ordinal-group: 0; order: -1; } .flex-mid { - -webkit-box-ordinal-group: 1; - -moz-box-ordinal-group: 1; - -ms-flex-order: 1; - -webkit-order: 1; - -moz-order: 1; -webkit-box-ordinal-group: 2; + -webkit-order: 1; -moz-box-ordinal-group: 2; + -ms-flex-order: 1; order: 1; } .flex-end { - -webkit-box-ordinal-group: 42; - -moz-box-ordinal-group: 42; - -ms-flex-order: 42; - -webkit-order: 42; - -moz-order: 42; -webkit-box-ordinal-group: 43; + -webkit-order: 42; -moz-box-ordinal-group: 43; + -ms-flex-order: 42; order: 42; } \ No newline at end of file diff --git a/css/knacss.css b/css/knacss.css index ac28758..00d50ac 100644 --- a/css/knacss.css +++ b/css/knacss.css @@ -896,6 +896,14 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css outline: 3px solid maroon; } +/* ---------------------------------- */ + +/* ==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 */ @@ -924,6 +932,9 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css .grid > * > * { display: inline-block; + *display: inline; + *zoom: 1; + /* IE67 hack */ width: 100%; padding-left: 20px; /* gutter value */ @@ -933,9 +944,6 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css letter-spacing: normal; word-spacing: normal; text-rendering: auto; - *display: inline; - *zoom: 1; - /* IE67 hack */ font-family: Helvetica, Arial, sans-serif; } @@ -1023,6 +1031,105 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css } } +/* ---------------------------------- */ + +/* ==autogrids */ + +/* .. to automatically justify blocs */ + +/* ---------------------------------- */ + +/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */ + +[class*="autogrid"] { + text-align: justify; + font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; + 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: Helvetica, Arial, sans-serif; + 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: 1280px) { + .autogrid5 > *, + .autogrid6 > *, + .autogrid8 > *, + .autogrid10 > *, + .autogrid12 > * { + width: 32%; + } +} + +@media (max-width: 768px) { + .autogrid5 > *, + .autogrid6 > *, + .autogrid8 > *, + .autogrid10 > *, + .autogrid12 > * { + width: 49%; + } +} + +@media (max-width: 480px) { + [class*="autogrid"] > * { + width: 100%; + } +} + /* ----------------------------- */ /* ==tables */ @@ -1541,7 +1648,6 @@ input[type='submit']::-moz-focus-inner { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; - -o-hyphens: auto; hyphens: auto; } @@ -1699,70 +1805,61 @@ Tutorial: http://knacss.com/demos/tutoriel.html#flex */ .flex { display: -webkit-box; + display: -webkit-flex; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; } .flex-h { -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - -webkit-flex-direction: row; - -ms-flex-direction: row; -webkit-box-direction: normal; + -webkit-flex-direction: row; + -moz-box-orient: horizontal; -moz-box-direction: normal; + -ms-flex-direction: row; flex-direction: row; } .flex-v { -webkit-box-orient: vertical; - -moz-box-orient: vertical; - -webkit-flex-direction: column; - -ms-flex-direction: column; -webkit-box-direction: normal; + -webkit-flex-direction: column; + -moz-box-orient: vertical; -moz-box-direction: normal; + -ms-flex-direction: column; flex-direction: column; } .flex-fluid { - -moz-box-flex: 1; - -webkit-flex: 1; - -moz-flex: 1; - -ms-flex: 1; -webkit-box-flex: 1; + -webkit-flex: 1; + -moz-box-flex: 1; + -ms-flex: 1; flex: 1; } .flex-start { - -webkit-box-ordinal-group: -1; + -webkit-box-ordinal-group: 0; + -webkit-order: -1; -moz-box-ordinal-group: 0; -ms-flex-order: -1; - -webkit-order: -1; - -moz-order: -1; - -webkit-box-ordinal-group: 0; order: -1; } .flex-mid { - -webkit-box-ordinal-group: 1; - -moz-box-ordinal-group: 1; - -ms-flex-order: 1; - -webkit-order: 1; - -moz-order: 1; -webkit-box-ordinal-group: 2; + -webkit-order: 1; -moz-box-ordinal-group: 2; + -ms-flex-order: 1; order: 1; } .flex-end { - -webkit-box-ordinal-group: 42; - -moz-box-ordinal-group: 42; - -ms-flex-order: 42; - -webkit-order: 42; - -moz-order: 42; -webkit-box-ordinal-group: 43; + -webkit-order: 42; -moz-box-ordinal-group: 43; + -ms-flex-order: 42; order: 42; } diff --git a/less/01-base.less b/less/01-base.less index d713d2e..8a1faf3 100644 --- a/less/01-base.less +++ b/less/01-base.less @@ -10,9 +10,7 @@ /* switching box model for all elements */ * { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + box-sizing: border-box; } /* soft reset */ @@ -45,7 +43,6 @@ figure { } - /* ----------------------------- */ /* == typography */ /* ----------------------------- */ @@ -304,7 +301,6 @@ body > script {display: none !important;} img.left { margin-right: 1em; } - /* right elements */ .right { float: right; @@ -312,11 +308,9 @@ img.left { img.right { margin-left: 1em; } - img.left, img.right { margin-bottom: 5px; } - .center { margin-left: auto; margin-right: auto; } .txtleft { text-align: left; } .txtright { text-align: right; } diff --git a/less/02-grids.less b/less/02-grids.less index 468d8ca..0fa962c 100644 --- a/less/02-grids.less +++ b/less/02-grids.less @@ -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%} } \ No newline at end of file diff --git a/less/06-rwd.less b/less/06-rwd.less index 36943b8..3deba12 100644 --- a/less/06-rwd.less +++ b/less/06-rwd.less @@ -90,10 +90,6 @@ /* you shall not pass */ div, textarea, table, td, th, code, pre, samp { word-wrap: break-word; - -webkit-hyphens: auto; - -moz-hyphens: auto; - -ms-hyphens: auto; - -o-hyphens: auto; hyphens: auto; } diff --git a/less/07-flexbox.less b/less/07-flexbox.less index 61b7058..cd69d72 100644 --- a/less/07-flexbox.less +++ b/less/07-flexbox.less @@ -2,54 +2,23 @@ /* flexbox layout Tutorial: http://knacss.com/demos/tutoriel.html#flex */ .flex { - display : -webkit-box; - display : -moz-box; - display : -ms-flexbox; - display : -webkit-flex; display : flex; } .flex-h { - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - -webkit-flex-direction: row; - -ms-flex-direction: row; flex-direction: row; } .flex-v { - -webkit-box-orient: vertical; - -moz-box-orient: vertical; - -webkit-flex-direction: column; - -ms-flex-direction: column; flex-direction: column; } .flex-fluid { - -moz-box-flex: 1; - -webkit-flex: 1; - -moz-flex: 1; - -ms-flex: 1; flex: 1; } .flex-start { - -webkit-box-ordinal-group: -1; - -moz-box-ordinal-group: 0; - -ms-flex-order : -1; - -webkit-order : -1; - -moz-order : -1; order : -1; } .flex-mid { - -webkit-box-ordinal-group: 1; - -moz-box-ordinal-group: 1; - -ms-flex-order : 1; - -webkit-order : 1; - -moz-order : 1; order : 1; } .flex-end { - -webkit-box-ordinal-group: 42; - -moz-box-ordinal-group: 42; - -ms-flex-order : 42; - -webkit-order : 42; - -moz-order : 42; order : 42; } \ No newline at end of file