better vertical rythm for headings

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 */
+	margin: 0.6563em 0 0 0;
-	line-height: 1.6154em;
+	font-size: 2.2857em; /* equiv 32px */
-	margin: .8077em 0 0 0;
+	line-height: 1.3126em;
 }
 h2, .h2-like {
+	margin: 0.75em 0 0 0;
 	font-size: 2em; /* equiv 28px */
-	line-height: 1.75em;
+	line-height: 1.5em;
-	margin: .875em 0 0 0;
 }
 h3, .h3-like {
-	font-size: 1.714em; /* equiv 24px */
+	margin: 0.875em 0 0 0;
-	line-height: 1.909em;
+	font-size: 1.7143em; /* equiv 24px */
-	margin: .9545em 0 0 0;
+	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 */

less/01-base.less

@@ -11,8 +11,8 @@ body {
 	background-color: #fff;
 	color: #000;
 	font-family: @fontstack1;
-	font-size: ((@basefont / 10) + 0em);
+	font-size: unit((@basefont / 10), em);
-	line-height: @l-h; // adapt to your design
+	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 */

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) {

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
+@basefont		: 14px; // if "14px" then 1em = 14px
-@l-h			: 1.5; // equiv line-height 1.5em
+@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);}
+// px to em/rem 
-.line (@fontsize) {line-height: (@l-h *2 / (@fontsize / @basefont) + 0em)}
+.rem(@size, @bf: @basefont){
-.mtop (@fontsize) {margin: (@l-h / (@fontsize / @basefont) + 0em) 0 0}
+	@em: round((@size / @bf),4);
-.flow(@font-size, @base-font: @basefont, @base-height: @l-h) {
+	font-size: unit(@em, em);
-        @coef: ceil((1 / (@base-height * @base-font / @font-size)));
+	@rem: round((@size / 10),4);
-        @size: ((@font-size / @base-font) + 0em);
+	font-size: unit(@rem, rem);
-        @height: ((@base-font * @base-height / @font-size) + 0em);    
+}
-        font-size:   @size;
+// flow for headings
-        line-height: (@height * @coef);
+.flow(@size, @bf: @basefont, @bh: @lh) {
-        margin-top:  @height;
+	@marg: @bh * @bf / @size;
-        margin-bottom: 0;
+	@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";