diff --git a/less/_00-config.less b/less/_00-config.less index e1925e3..79f1f5c 100644 --- a/less/_00-config.less +++ b/less/_00-config.less @@ -3,6 +3,12 @@ // LESS values : adapt them to your design @basefont : 14px; // if "14px" then 1em = 14px @lh : 1.5; // equiv line-height 1.5em +@h1-size : 32px; // equiv "32px" +@h2-size : 28px; // equiv "28px" +@h3-size : 24px; // equiv "24px" +@h4-size : 20px; // equiv "20px" +@h5-size : 18px; // equiv "18px" +@h6-size : 16px; // equiv "16px" @basecolor : #000; // text color on body @basebg : #fff; // body background color @basecolor-link : #333; // primary links color; @@ -14,26 +20,26 @@ @smallscreen : 768px; // small screens media query @largescreen : 1280px; // large screens media query @gutter : 20px; // gutter value (%, px, em, rem, etc) for grid layouts -@fontstack1 : helvetica, arial, sans-serif; // common font -@fontstack2 : consolas, 'DejaVu Sans Mono', courier, monospace; // monospace font +@fontstack1 : Helvetica, Arial, sans-serif; // common font +@fontstack2 : Consolas, 'DejaVu Sans Mono', Courier, monospace; // monospace font @fontstack3 : FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack // LESS mixins : don't touch or you'll be banned ;) // px to em/rem .rem(@size, @bf: @basefont){ - @em: round((@size / @bf),4); - font-size: unit(@em, em); @rem: round((@size / 10),4); font-size: unit(@rem, rem); } +.em(@size, @bf: @basefont){ + @em: round((@size / @bf),4); + font-size: unit(@em, em); +} // flow for headings .flow(@size, @bf: @basefont, @bh: @lh) { @marg: @bh * @bf / @size; - @mt: unit(round(@marg,4),em); + @mt: unit(@marg,em); margin-top: @mt; margin-bottom: 0; - @em: round((@size / @bf),4); - font-size: unit(@em, em); @rem: round((@size / 10),4); font-size: unit(@rem, rem); @coef: ceil(1/@mt); diff --git a/less/_01-base.less b/less/_01-base.less index e2fba25..2e554ab 100644 --- a/less/_01-base.less +++ b/less/_01-base.less @@ -36,39 +36,39 @@ hgroup { line-height: @lh; } h1, .h1-like { - .flow(32px); // equiv 32px + .flow(@h1-size); } h2, .h2-like { - .flow(28px); // equiv 28px + .flow(@h2-size); } h3, .h3-like { - .flow(24px); // equiv 24px + .flow(@h3-size); } h4, .h4-like { - .flow(20px); // equiv 20px + .flow(@h4-size); } h5, .h5-like { - .flow(18px); // equiv 18px + .flow(@h5-size); } h6, .h6-like { - .flow(16px); // equiv 16px + .flow(@h6-size); } /* alternate font-sizing */ .smaller { - .rem (10px); /* equiv 10px */ + .em(@basefont - 4); } .small { - .rem (12px); /* equiv 12px */ + .em(@basefont - 2); } .big { - .rem (16px); /* equiv 16px */ + .em(@basefont + 2); } .bigger { - .rem (18px); /* equiv 18px */ + .em(@basefont + 4); } .biggest { - .rem (20px); /* equiv 20px */ + .em(@basefont + 6); } /* soft reset */ @@ -90,7 +90,7 @@ samp, kbd { white-space: pre-wrap; font-family: @fontstack2; - line-height: 1em; + line-height: 1; } code, kbd, mark { border-radius: 2px; @@ -360,6 +360,28 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css /* ==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 { + .em(@h1-size); +} +.ie678 h2, .ie678 .h2-like { + .em(@h2-size); +} +.ie678 h3, .ie678 .h3-like { + .em(@h3-size); +} +.ie678 h4, .ie678 .h4-like { + .em(@h4-size); +} +.ie678 h5, .ie678 .h5-like { + .em(@h5-size); +} +.ie678 h6, .ie678 .h6-like { + .em(@h6-size); +} + /* haslayout for IE6/IE7 */ .ie67 .clearfix, .ie67 .line, diff --git a/less/knackLESS.zip b/less/knackLESS.zip index 4f494ef..0d97260 100644 Binary files a/less/knackLESS.zip and b/less/knackLESS.zip differ