From 133b38724b9e379f76c6a1fc5df3562656b61f00 Mon Sep 17 00:00:00 2001 From: Raphael Goetter Date: Mon, 16 Sep 2013 21:21:06 +0200 Subject: [PATCH] better vertical rythm for headings --- css/knacss.css | 27 +++++++++++++-------------- less/01-base.less | 30 ++++++++++++++++-------------- less/06-rwd.less | 7 ------- less/knacss.less | 37 ++++++++++++++++++++++--------------- 4 files changed, 51 insertions(+), 50 deletions(-) diff --git a/css/knacss.css b/css/knacss.css index ba72b64..13a5496 100644 --- a/css/knacss.css +++ b/css/knacss.css @@ -1,5 +1,5 @@ /* -* www.KNACSS.com V2.8 (2013-09) @author: Raphael Goetter, Alsacreations +* www.KNACSS.com V2.8a (2013-09) @author: Raphael Goetter, Alsacreations * Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/ */ @@ -34,39 +34,38 @@ textarea, caption, details, figure { - font-size: 1em; /* equiv 14px */ - line-height: 1.5; margin: .75em 0 0; + line-height: 1.5; } h1, .h1-like { - font-size: 2.286em; /* equiv 32px */ - line-height: 1.6154em; - margin: .8077em 0 0 0; + margin: 0.6563em 0 0 0; + font-size: 2.2857em; /* equiv 32px */ + line-height: 1.3126em; } h2, .h2-like { + margin: 0.75em 0 0 0; font-size: 2em; /* equiv 28px */ - line-height: 1.75em; - margin: .875em 0 0 0; + line-height: 1.5em; } h3, .h3-like { - font-size: 1.714em; /* equiv 24px */ - line-height: 1.909em; - margin: .9545em 0 0 0; + margin: 0.875em 0 0 0; + font-size: 1.7143em; /* equiv 24px */ + line-height: 1.75em; } h4, .h4-like { + margin: 1.05em 0 0 0; font-size: 1.4286em; /* equiv 20px */ line-height: 1.05em; - margin: 1.05em 0 0 0; } h5, .h5-like { + margin: 1.1667em 0 0 0; font-size: 1.2857em; /* equiv 18px */ line-height: 1.1667em; - margin: 1.1667em 0 0 0; } h6, .h6-like { + margin: 1.3125em 0 0 0; font-size: 1.1429em; /* equiv 16px */ line-height: 1.3125em; - margin: 1.3125em 0 0 0; } /* alternate font-sizing */ diff --git a/less/01-base.less b/less/01-base.less index 294e15a..149dae2 100644 --- a/less/01-base.less +++ b/less/01-base.less @@ -11,8 +11,8 @@ body { background-color: #fff; color: #000; font-family: @fontstack1; - font-size: ((@basefont / 10) + 0em); - line-height: @l-h; // adapt to your design + font-size: unit((@basefont / 10), em); + line-height: @lh; // adapt to your design } /* font-sizing for content */ @@ -31,42 +31,44 @@ caption, details, figure, hgroup { - .flow(@basefont); + margin-top: .75em; + margin-bottom: 0; + line-height: @lh; } h1, .h1-like { - .flow(32); // equiv 32px + .flow(32px); // equiv 32px } h2, .h2-like { - .flow(28); // equiv 28px + .flow(28px); // equiv 28px } h3, .h3-like { - .flow(24); // equiv 24px + .flow(24px); // equiv 24px } h4, .h4-like { - .flow(20); // equiv 20px + .flow(20px); // equiv 20px } h5, .h5-like { - .flow(18); // equiv 18px + .flow(18px); // equiv 18px } h6, .h6-like { - .flow(16); // equiv 16px + .flow(16px); // equiv 16px } /* alternate font-sizing */ .smaller { - .pxtoem (10); /* equiv 10px */ + .rem (10px); /* equiv 10px */ } .small { - .pxtoem (12); /* equiv 12px */ + .rem (12px); /* equiv 12px */ } .big { - .pxtoem (16); /* equiv 16px */ + .rem (16px); /* equiv 16px */ } .bigger { - .pxtoem (18); /* equiv 18px */ + .rem (18px); /* equiv 18px */ } .biggest { - .pxtoem (20); /* equiv 20px */ + .rem (20px); /* equiv 20px */ } /* soft reset */ diff --git a/less/06-rwd.less b/less/06-rwd.less index 87fcbd6..5f7e14a 100644 --- a/less/06-rwd.less +++ b/less/06-rwd.less @@ -116,13 +116,6 @@ } /* margins for small (s) screens */ .small-ma0 { margin: 0 !important; } - - /* Responsive grids */ - .grid4 > * {.grid(2);} - .grid4 > :first-child + * + * {margin-left: 0} - - .grid6 > * {.grid(3);} - .grid6 > :first-child + * + * + * {margin-left: 0} } @media (max-width: @tinyscreen) { diff --git a/less/knacss.less b/less/knacss.less index 321333f..87d681c 100644 --- a/less/knacss.less +++ b/less/knacss.less @@ -1,11 +1,11 @@ /* -* www.KNACSS.com V2.8 (2013-09) @author: Raphael Goetter, Alsacreations +* www.KNACSS.com V2.8a (2013-09) @author: Raphael Goetter, Alsacreations * Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/ */ // LESS values : adapt them to your design -@basefont : 14; // if "14" then 1em = 14px -@l-h : 1.5; // equiv line-height 1.5em +@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 @@ -17,17 +17,25 @@ @fontstack2 : "consolas, 'DejaVu Sans Mono', courier, monospace"; // monospace font // LESS mixins : don't touch or you'll be banned ;) -.pxtoem (@fontsize) {font-size: ((@fontsize / @basefont) + 0em);} -.line (@fontsize) {line-height: (@l-h *2 / (@fontsize / @basefont) + 0em)} -.mtop (@fontsize) {margin: (@l-h / (@fontsize / @basefont) + 0em) 0 0} -.flow(@font-size, @base-font: @basefont, @base-height: @l-h) { - @coef: ceil((1 / (@base-height * @base-font / @font-size))); - @size: ((@font-size / @base-font) + 0em); - @height: ((@base-font * @base-height / @font-size) + 0em); - font-size: @size; - line-height: (@height * @coef); - margin-top: @height; - margin-bottom: 0; +// 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: (@mt * @coef); } // LESS base styles @@ -41,7 +49,6 @@ /* You can link them with a LESS @import */ /* @import "my-styles.less"; */ - // LESS files : chose the ones you need @import "02-grids.less"; @import "03-tables.less";