more variables in config.less

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
+@fontstack1				: Helvetica, Arial, sans-serif; // common font
-@fontstack2				: consolas, 'DejaVu Sans Mono', courier, monospace; // monospace 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);

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,