diff --git a/less/_00-config.less b/less/_00-config.less new file mode 100644 index 0000000..e1925e3 --- /dev/null +++ b/less/_00-config.less @@ -0,0 +1,41 @@ +// Config file : variables, mixins, ... + +// LESS values : adapt them to your design +@basefont : 14px; // if "14px" then 1em = 14px +@lh : 1.5; // equiv line-height 1.5em +@basecolor : #000; // text color on body +@basebg : #fff; // body background color +@basecolor-link : #333; // primary links color; +@basecolor-link-hover : #000; // primary hovered/focused links color; +@smallvalue : 10px; // small value for margins / paddings +@mediumvalue : 20px; // medium value for margins / paddings +@largevalue : 30px; // large value for margins / paddings +@tinyscreen : 480px; // tiny screens media query +@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 +@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); +} +// flow for headings +.flow(@size, @bf: @basefont, @bh: @lh) { + @marg: @bh * @bf / @size; + @mt: unit(round(@marg,4),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); + line-height: unit((@mt * @coef)); +} \ No newline at end of file diff --git a/less/_01-base.less b/less/_01-base.less index 4f4e43b..e2fba25 100644 --- a/less/_01-base.less +++ b/less/_01-base.less @@ -8,8 +8,8 @@ html { font-size: 62.5%; } body { - background-color: #fff; - color: #000; + background-color: @basebg; + color: @basecolor; font-family: @fontstack1; font-size: unit((@basefont / 10), em); line-height: @lh; // adapt to your design diff --git a/less/knackLESS.zip b/less/knackLESS.zip index 5be4dfc..4f494ef 100644 Binary files a/less/knackLESS.zip and b/less/knackLESS.zip differ diff --git a/less/knacss.less b/less/knacss.less index 48e2e80..630ce67 100644 --- a/less/knacss.less +++ b/less/knacss.less @@ -1,43 +1,10 @@ /*! -* www.KNACSS.com V2.9 (2013-10) @author: Raphael Goetter, Alsacreations +* www.KNACSS.com V2.9 (2013-11) @author: Raphael Goetter, Alsacreations * Licence WTFPL http://www.wtfpl.net/ */ -// LESS values : adapt them to your design -@basefont : 14px; // if "14px" then 1em = 14px -@lh : 1.5; // equiv line-height 1.5em -@smallvalue : 10px; // small value for margins / paddings -@mediumvalue : 20px; // medium value for margins / paddings -@largevalue : 30px; // large value for margins / paddings -@tinyscreen : 480px; // tiny screens media query -@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 -@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); -} -// flow for headings -.flow(@size, @bf: @basefont, @bh: @lh) { - @marg: @bh * @bf / @size; - @mt: unit(round(@marg,4),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); - line-height: unit((@mt * @coef)); -} +// LESS config file +@import "_00-config"; // LESS base styles @import "_01-base"; @@ -56,5 +23,5 @@ /* ----------------------------- */ /* Here should go your own CSS styles */ -/* You can link them with a LESS @import */ -/* @import "_my-styles.less"; */ \ No newline at end of file +/* You can also link them with a LESS @import */ +/* @import "my-styles.less"; */ \ No newline at end of file