diff --git a/bower.json b/bower.json index 6d0a91e..39e87cf 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "KNACSS", - "version": "2.9.1", + "version": "2.9.2", "homepage": "http://www.knacss.com/", "authors": [ "Raphaƫl GOETTER, Alsacreations" diff --git a/css/knacss.css b/css/knacss.css index 74b977d..034e2a0 100644 --- a/css/knacss.css +++ b/css/knacss.css @@ -1,15 +1,58 @@ /*! -* www.KNACSS.com V2.9 (2013-10) @author: Raphael Goetter, Alsacreations +* www.KNACSS.com V2.9.2 (2014-01) @author: Raphael Goetter, Alsacreations * Licence WTFPL http://www.wtfpl.net/ */ /* ----------------------------- */ -/* ==reset */ +/* == soft reset */ +/* ----------------------------- */ + +/* switching box model for all elements */ +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/* soft reset */ +html, +body { + margin: 0; + padding: 0; +} +ul, +ol { + padding-left: 2em; +} +ul.unstyled { + list-style: none; +} +img { + vertical-align: middle; + border: 0; +} +audio, +canvas, +video { + display: inline-block; +} +svg:not(:root) { + overflow: hidden; +} +figure { + margin: 0; +} + + +/* ----------------------------- */ +/* == typography */ /* ----------------------------- */ /* base font-size corresponds to 10px and is adapted to rem unit */ html { font-size: 62.5%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; } body { background-color: #fff; @@ -85,23 +128,11 @@ h6, .h6-like { font-size: 1.4286em; /* equiv 20px */ } -/* soft reset */ -html, -body { - margin: 0; - padding: 0; -} -ul, -ol { - padding-left: 2em; -} -ul.unstyled { - list-style: none; -} code, pre, samp, kbd { + white-space: pre-line; /* IE fix */ white-space: pre-wrap; font-family: consolas, 'DejaVu Sans Mono', courier, monospace; line-height: 1em; @@ -139,7 +170,47 @@ sup { sub { top: .5ex; } -table { margin-bottom: 1.5em; } + +/* ----------------------------- */ +/* == hiding content */ +/* ----------------------------- */ + +/* hiding content */ +.visually-hidden { + position: absolute; + left: -7000px; + overflow: hidden; +} +[dir=rtl] .visually-hidden { + left: auto; + right: -7000px; +} +.desktop-hidden { display: none; } /* hidden on desktop */ + + +/* ----------------------------- */ +/* == skip links styling */ +/* ----------------------------- */ + +.skip-links { + position: absolute; +} +.skip-links a { + position: absolute; + left: -7000px; + padding: 0.5em; + background: #000; + color:#fff; + text-decoration: none; +} +.skip-links a:focus { + position: static; +} + + +/* ----------------------------- */ +/* == browsers consistency */ +/* ----------------------------- */ /* avoid top margins on first content element */ p:first-child, @@ -169,10 +240,10 @@ li ol { img, table, td, blockquote, code, pre, textarea, input, video { max-width: 100%; } -/* pictures */ -img { - vertical-align: middle; -} + +/* margin-bottom on tables */ +table { margin-bottom: 1.5em; } + /* Google Gmap3 bug fix on images */ :not(.gm-style) img { height: auto !important; @@ -186,38 +257,14 @@ img { max-width: none !important; } -a img { border: 0; } - /* scripts */ body > script {display: none !important;} -/* skip-links */ -.skip-links { - position: absolute; -} -.skip-links a { - position: absolute; - left: -7000px; - padding: 0.5em; - background: #000; - color:#fff; - text-decoration: none; -} -.skip-links a:focus { - position: static; -} /* ----------------------------- */ /* ==layout and modules */ /* ----------------------------- */ -/* switching box model for all elements */ -* { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - /* float layout */ /* module, gains superpower "BFC" Block Formating Context */ .mod { @@ -286,6 +333,11 @@ img.left, img.right { .txtright { text-align: right; } .txtcenter { text-align: center; } +/* ----------------------------- */ +/* == width helpers */ +/* .. use only when needed */ +/* ----------------------------- */ + /* blocks widths (percentages and pixels) */ .w10 { width: 10%; } .w20 { width: 20%; } @@ -317,6 +369,12 @@ img.left, img.right { .w1140p { width: 1140px; } .mw1140p { max-width: 1140px; } + +/* ----------------------------- */ +/* == spacing helpers */ +/* .. use only when needed */ +/* ----------------------------- */ + /* spacing helpers p,m = padding,margin a,t,r,b,l = all,top,right,bottom,left @@ -366,21 +424,9 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css .pl2, .plm { padding-left: 20px; } .pl3, .pll { padding-left: 30px; } -/* hiding content */ -.visually-hidden { - position: absolute; - left: -7000px; - overflow: hidden; -} -[dir=rtl] .visually-hidden { - left: auto; - right: -7000px; -} - -.desktop-hidden { display: none; } /* hidden on desktop */ /* ----------------------------- */ -/* ==iefix */ +/* == iefix */ /* ----------------------------- */ /* hasLayout for IE6/IE7 */ @@ -408,15 +454,15 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css /* @source https://github.com/Schepp/box-sizing-polyfill */ /* .ie67 * { - behavior: url(/js/boxsizing.htc); + behavior: url(/lib/box-sizing-polyfill/boxsizing.htc); } */ + /* ----------------------------- */ -/* ==print */ +/* == quick print reset */ /* ----------------------------- */ -/* quick print reset */ @media print { p, blockquote { @@ -441,21 +487,3 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css background: pink; outline: 3px solid maroon; } - -/* orientation iOS font-size fix */ -@media (orientation: landscape) and (max-device-width: 768px) { - html, - body { - -webkit-text-size-adjust: 100%; - } -} - -/* ----------------------------- */ -/* ==own stylesheet */ -/* ----------------------------- */ - -/* Here should go your own CSS styles */ -/* You can link them with an @import or, better for webperf, just paste them here */ - -/* @import url(my-styles.css); */ - diff --git a/less/_01-base.less b/less/_01-base.less index 1a47bce..44d4c9d 100644 --- a/less/_01-base.less +++ b/less/_01-base.less @@ -1,11 +1,55 @@ /* ----------------------------- */ -/* ==reset */ +/* == soft reset */ +/* ----------------------------- */ + +/* switching box model for all elements */ +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/* soft reset */ +html, +body { + margin: 0; + padding: 0; +} +ul, +ol { + padding-left: 2em; +} +ul.unstyled { + list-style: none; +} +img { + vertical-align: middle; + border: 0; +} +audio, +canvas, +video { + display: inline-block; +} +svg:not(:root) { + overflow: hidden; +} +figure { + margin: 0; +} + + + +/* ----------------------------- */ +/* == typography */ /* ----------------------------- */ /* base font-size corresponds to 10px and is adapted to rem unit */ html { font-size: 62.5%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; } body { background-color: @basebg; @@ -71,23 +115,11 @@ h6, .h6-like { .em(@basefont + 6); } -/* soft reset */ -html, -body { - margin: 0; - padding: 0; -} -ul, -ol { - padding-left: 2em; -} -ul.unstyled { - list-style: none; -} code, pre, samp, kbd { + white-space: pre-line; /* IE fix */ white-space: pre-wrap; font-family: @fontstack2; line-height: 1; @@ -114,7 +146,61 @@ mark { padding:2px 4px; background: #ff0; } -table { margin-bottom: 1.5em; } +sup, +sub { + vertical-align: 0; + position: relative; +} +sup { + bottom: 1ex; +} +sub { + top: .5ex; +} + + +/* ----------------------------- */ +/* == hiding content */ +/* ----------------------------- */ + +/* hiding content */ +.visually-hidden { + position: absolute; + left: -7000px; + overflow: hidden; +} +[dir=rtl] .visually-hidden { + left: auto; + right: -7000px; +} +.desktop-hidden { display: none; } /* hidden on desktop */ + + +/* ----------------------------- */ +/* == skip links styling */ +/* ----------------------------- */ + +.skip-links { + position: absolute; + + a { + position: absolute; + left: -7000px; + padding: 0.5em; + background: black; + color: white; + text-decoration: none; + + &:focus { + position: static; + } + } +} + + +/* ----------------------------- */ +/* == browsers consistency */ +/* ----------------------------- */ /* avoid top margins on first content element */ p, ul, ol, dl, @@ -138,10 +224,9 @@ img, table, td, blockquote, code, pre, textarea, input, video { max-width: 100%; } -/* pictures */ -img { - vertical-align: middle; -} +/* margin-bottom on tables */ +table { margin-bottom: 1.5em; } + /* Google Gmap3 bug fix on images */ :not(.gm-style) img { height: auto !important; @@ -155,40 +240,14 @@ img { max-width: none !important; } -a img { border: 0; } - /* scripts */ body > script {display: none !important;} -/* skip-links */ -.skip-links { - position: absolute; - - a { - position: absolute; - left: -7000px; - padding: 0.5em; - background: black; - color: white; - text-decoration: none; - - &:focus { - position: static; - } - } -} /* ----------------------------- */ /* ==layout and modules */ /* ----------------------------- */ -/* switching box model for all elements */ -* { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - /* float layout */ /* module, gains superpower "BFC" Block Formating Context */ .mod { @@ -259,6 +318,11 @@ img.left, img.right { .txtcenter { text-align: center; } +/* ----------------------------- */ +/* == width helpers */ +/* .. use only when needed */ +/* ----------------------------- */ + /* blocks widths (percentage and pixels) */ .w10 { width: 10%; } .w20 { width: 20%; } @@ -290,6 +354,12 @@ img.left, img.right { .w1140p { width: 1140px; } .mw1140p { max-width: 1140px; } + +/* ----------------------------- */ +/* == spacing helpers */ +/* .. use only when needed */ +/* ----------------------------- */ + /* spacing helpers p,m = padding,margin a,t,r,b,l = all,top,right,bottom,left @@ -339,25 +409,9 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css .pl2, .plm { padding-left: @mediumvalue; } .pl3, .pll { padding-left: @largevalue; } -/* hiding content */ -.visually-hidden { - position: absolute; - left: -7000px; - overflow: hidden; -} -[dir=rtl] .visually-hidden { - left: auto; - right: -7000px; -} - -/* hidden on desktop */ -.desktop-hidden { display: none; } -/* hidden on mobile */ -.mobile-hidden { display: block; } - /* ----------------------------- */ -/* ==iefix */ +/* == iefix */ /* ----------------------------- */ /* Make sure you are using Conditional Classes in your HTML */ @@ -407,15 +461,15 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css /* @source https://github.com/Schepp/box-sizing-polyfill */ /* .ie67 * { - behavior: url(/inc/box-sizing-polyfill/boxsizing.htc); + behavior: url(/lib/box-sizing-polyfill/boxsizing.htc); } */ + /* ----------------------------- */ -/* ==print */ +/* == quick print reset */ /* ----------------------------- */ -/* quick print reset */ @media print { p, blockquote { @@ -440,11 +494,3 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css background: pink; outline: 3px solid maroon; } - -/* orientation iOS font-size fix */ -@media (orientation: landscape) and (max-device-width: @smallscreen) { - html, - body { - -webkit-text-size-adjust: 100%; - } -} \ No newline at end of file diff --git a/less/knackLESS.zip b/less/knackLESS.zip index ae7ec16..f53a275 100644 Binary files a/less/knackLESS.zip and b/less/knackLESS.zip differ diff --git a/less/knacss.less b/less/knacss.less index 630ce67..4a27af6 100644 --- a/less/knacss.less +++ b/less/knacss.less @@ -1,5 +1,5 @@ /*! -* www.KNACSS.com V2.9 (2013-11) @author: Raphael Goetter, Alsacreations +* www.KNACSS.com V2.9.2 (2014-01) @author: Raphael Goetter, Alsacreations * Licence WTFPL http://www.wtfpl.net/ */