diff --git a/css/01-base.css b/css/01-base.css index b293cca..54a3fd0 100644 --- a/css/01-base.css +++ b/css/01-base.css @@ -2,71 +2,50 @@ * www.KNACSS.com V2.9.3 (2014-02) @author: Raphael Goetter, Alsacreations * Licence WTFPL http://www.wtfpl.net/ */ - /* ----------------------------- */ - /* == 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: #ffffff; color: #000000; @@ -74,11 +53,8 @@ body { font-size: 1.4em; line-height: 1.5; } - /* font-sizing for content */ - /* preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */ - p, ul, ol, @@ -97,7 +73,6 @@ hgroup { margin-bottom: 0; line-height: 1.5; } - h1, .h1-like { margin-top: 0.65625em; @@ -105,7 +80,6 @@ h1, font-size: 3.2rem; line-height: 1.3125; } - h2, .h2-like { margin-top: 0.75em; @@ -113,7 +87,6 @@ h2, font-size: 2.8rem; line-height: 1.5; } - h3, .h3-like { margin-top: 0.875em; @@ -121,7 +94,6 @@ h3, font-size: 2.4rem; line-height: 1.75; } - h4, .h4-like { margin-top: 1.05em; @@ -129,15 +101,13 @@ h4, font-size: 2rem; line-height: 1.05; } - h5, .h5-like { - margin-top: 1.1666666666666667em; + margin-top: 1.16666667em; margin-bottom: 0; font-size: 1.8rem; - line-height: 1.1666666666666667; + line-height: 1.16666667; } - h6, .h6-like { margin-top: 1.3125em; @@ -145,29 +115,22 @@ h6, font-size: 1.6rem; line-height: 1.3125; } - /* alternate font-sizing */ - .smaller { - font-size: 0.7142857142857143em; + font-size: 0.71428571em; } - .small { - font-size: 0.8571428571428571em; + font-size: 0.85714286em; } - .big { - font-size: 1.1428571428571428em; + font-size: 1.14285714em; } - .bigger { - font-size: 1.2857142857142858em; + font-size: 1.28571429em; } - .biggest { - font-size: 1.4285714285714286em; + font-size: 1.42857143em; } - code, pre, samp, @@ -178,86 +141,64 @@ kbd { font-family: Consolas, 'DejaVu Sans Mono', Courier, monospace; line-height: 1; } - code, kbd, mark { border-radius: 2px; } - em { font-style: italic; } - strong { font-weight: bold; } - kbd { padding: 0 2px; border: 1px solid #999; } - code { padding: 2px 4px; background: rgba(0, 0, 0, 0.04); color: #b11; } - mark { padding: 2px 4px; background: #ff0; } - 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; } - .skip-links a { position: absolute; left: -7000px; @@ -266,19 +207,13 @@ sub { color: white; text-decoration: none; } - .skip-links a:focus { position: static; } - /* ----------------------------- */ - /* == browsers consistency */ - /* ----------------------------- */ - /* avoid top margins on first content element */ - p:first-child, ul:first-child, ol:first-child, @@ -293,18 +228,14 @@ h5:first-child, h6:first-child { margin-top: 0; } - /* avoid margins on nested elements */ - li p, li ul, li ol { margin-top: 0; margin-bottom: 0; } - /* max values */ - img, table, td, @@ -316,518 +247,389 @@ input, video { max-width: 100%; } - /* margin-bottom on tables */ - table { margin-bottom: 1.5em; } - /* Google Gmap3 bug fix on images */ - :not(.gm-style) img { height: auto !important; } - .ie678 .gm-style img { height: 100%; /* IE678 hack */ } - .gm-style img, .gmnoscreen img, .gmnoprint img { max-width: none !important; } - /* scripts */ - body > script { display: none !important; } - /* ----------------------------- */ - /* ==layout and modules */ - /* ----------------------------- */ - /* float layout */ - /* module, gains superpower "BFC" Block Formating Context */ - .mod { overflow: hidden; } - /* blocks that needs to be placed under floats */ - .clear, .line, .row { clear: both; } - /* blocks that must contain floats */ - .clearfix:after, -.line:after, -.mod:after { +.line:after { content: ""; display: table; clear: both; } - /* table layout */ - .row { display: table; table-layout: fixed; width: 100%; } - .row > *, .col { display: table-cell; vertical-align: top; } - /* inline-block */ - .inbl { display: inline-block; vertical-align: top; } - /* alignments (blocks and inline) */ - /* ------------------------------ */ - /* left elements */ - .left { float: left; } - img.left { margin-right: 1em; } - /* right elements */ - .right { float: right; } - 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; } - .txtcenter { text-align: center; } - /* ----------------------------- */ - /* == width helpers */ - /* .. use only when needed */ - /* ----------------------------- */ - /* blocks widths (percentage and pixels) */ - .w10 { width: 10%; } - .w20 { width: 20%; } - .w25 { width: 25%; } - .w30 { width: 30%; } - .w33 { width: 33.3333%; } - .w40 { width: 40%; } - .w50 { width: 50%; } - .w60 { width: 60%; } - .w66 { width: 66.6666%; } - .w70 { width: 70%; } - .w75 { width: 75%; } - .w80 { width: 80%; } - .w90 { width: 90%; } - .w100 { width: 100%; } - .w50p { width: 50px; } - .w100p { width: 100px; } - .w150p { width: 150px; } - .w200p { width: 200px; } - .w300p { width: 300px; } - .w400p { width: 400px; } - .w500p { width: 500px; } - .w600p { width: 600px; } - .w700p { width: 700px; } - .w800p { width: 800px; } - .w960p { width: 960px; } - .mw960p { max-width: 960px; } - .w1140p { width: 1140px; } - .mw1140p { max-width: 1140px; } - .wauto { width: auto; } - /* ----------------------------- */ - /* == spacing helpers */ - /* .. use only when needed */ - /* ----------------------------- */ - /* spacing helpers p,m = padding,margin a,t,r,b,l = all,top,right,bottom,left s,m,l,n = small(10px),medium(20px),large(30px),none(0) source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css */ - .m-reset, .ma0 { margin: 0; } - .p-reset, .pa0 { padding: 0; } - .ma1, .mas { margin: 10px; } - .ma2, .mam { margin: 20px; } - .ma3, .mal { margin: 30px; } - .pa1, .pas { padding: 10px; } - .pa2, .pam { padding: 20px; } - .pa3, .pal { padding: 30px; } - .mt0, .mtn { margin-top: 0; } - .mt1, .mts { margin-top: 10px; } - .mt2, .mtm { margin-top: 20px; } - .mt3, .mtl { margin-top: 30px; } - .mr0, .mrn { margin-right: 0; } - .mr1, .mrs { margin-right: 10px; } - .mr2, .mrm { margin-right: 20px; } - .mr3, .mrl { margin-right: 30px; } - .mb0, .mbn { margin-bottom: 0; } - .mb1, .mbs { margin-bottom: 10px; } - .mb2, .mbm { margin-bottom: 20px; } - .mb3, .mbl { margin-bottom: 30px; } - .ml0, .mln { margin-left: 0; } - .ml1, .mls { margin-left: 10px; } - .ml2, .mlm { margin-left: 20px; } - .ml3, .mll { margin-left: 30px; } - .pt0, .ptn { padding-top: 0; } - .pt1, .pts { padding-top: 10px; } - .pt2, .ptm { padding-top: 20px; } - .pt3, .ptl { padding-top: 30px; } - .pr0, .prn { padding-right: 0; } - .pr1, .prs { padding-right: 10px; } - .pr2, .prm { padding-right: 20px; } - .pr3, .prl { padding-right: 30px; } - .pb0, .pbn { padding-bottom: 0; } - .pb1, .pbs { padding-bottom: 10px; } - .pb2, .pbm { padding-bottom: 20px; } - .pb3, .pbl { padding-bottom: 30px; } - .pl0, .pln { padding-left: 0; } - .pl1, .pls { padding-left: 10px; } - .pl2, .plm { padding-left: 20px; } - .pl3, .pll { padding-left: 30px; } - /* ----------------------------- */ - /* == iefix */ - /* ----------------------------- */ - /* Make sure you are using Conditional Classes in your HTML */ - /* see : http://www.alsacreations.com/astuce/lire/988-classes-conditionnelles-HTML.html */ - .ie678 h1, .ie678 .h1-like { - font-size: 2.2857142857142856em; + font-size: 2.28571429em; } - .ie678 h2, .ie678 .h2-like { font-size: 2em; } - .ie678 h3, .ie678 .h3-like { - font-size: 1.7142857142857142em; + font-size: 1.71428571em; } - .ie678 h4, .ie678 .h4-like { - font-size: 1.4285714285714286em; + font-size: 1.42857143em; } - .ie678 h5, .ie678 .h5-like { - font-size: 1.2857142857142858em; + font-size: 1.28571429em; } - .ie678 h6, .ie678 .h6-like { - font-size: 1.1428571428571428em; + font-size: 1.14285714em; } - /* hasLayout for IE6/IE7 */ - .ie67 .clearfix, .ie67 .line, .ie67 .mod, @@ -835,52 +637,39 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css .ie67 .col { zoom: 1; } - /* inline-block and table-cell for IE6/IE7 */ - /* warning: .col needs width on IE6/IE7 */ - .ie67 .btn, .ie67 .col, .ie67 .inbl { display: inline; zoom: 1; } - .ie8 img { width: auto; /* @bugfix for IE8 */ } - /* Active box-sizing for IE6/IE7 */ - /* @source https://github.com/Schepp/box-sizing-polyfill */ - /* .ie67 * { behavior: url(/lib/box-sizing-polyfill/boxsizing.htc); } */ - /* ----------------------------- */ - /* == quick print reset */ - /* ----------------------------- */ - @media print { p, blockquote { orphans: 2; widows: 2; } - blockquote, ul, ol { page-break-inside: avoid; } - h1, h2, h3, @@ -888,10 +677,8 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css page-break-after: avoid; } } - /* debug helper */ - .knacss-debug { background: pink; outline: 3px solid maroon; -} \ No newline at end of file +} diff --git a/less/01-base.less b/less/01-base.less index 8a1faf3..63fa612 100644 --- a/less/01-base.less +++ b/less/01-base.less @@ -265,8 +265,7 @@ body > script {display: none !important;} /* blocks that must contain floats */ .clearfix:after, -.line:after, -.mod:after { +.line:after { content: ""; display: table; clear: both; diff --git a/less/knackLESS.zip b/less/knackLESS.zip index 620c58b..4a854a7 100644 Binary files a/less/knackLESS.zip and b/less/knackLESS.zip differ