Add .font-baseline() mixin.

Author: chromice

README.md

@@ -266,7 +266,7 @@ Less code (see [full listing](examples/003_Baselines/stylesheet.less)):
 .use-column-grid(680px, 24px, 3);
 
 html {
-	font: @baseline-size / @baseline-height @main-font-family;
+	.font-baseline();
 }
 
 h1 {
@@ -388,12 +388,11 @@ You can also define baseline offset by referencing a font definition:
 .use-baseline-grid(16px, 1.5, verdana);
 ```
 
-You must set `font-size` and `line-height` properties of `html` element to the same values:
+You must set `font-size` and `line-height` properties of `html` element to the same values using `font-baseline()` mixin:
 
 ```less
 html {
-    font-size: @baseline-size;
-    line-height: @baseline-height;
+    .font-baseline();
 }
 ```
 

examples/001_Overview/stylesheet.css

@@ -95,9 +95,7 @@ html {
   padding: 24px;
   margin-left: 80px;
   margin-right: 80px;
-  font-family: 'Verdana', sans-serif;
-  font-size: 16px;
-  line-height: 1.5;
+  font: 16px / 1.5 'Verdana', sans-serif;
 }
 main {
   position: relative;

examples/001_Overview/stylesheet.less

@@ -55,9 +55,7 @@ html {
 	padding: @grid-gutter;
 	margin-left: 80px;
 	margin-right: 80px;
-	font-family: @verdana-font-family;
-	font-size: @baseline-size;
-	line-height: @baseline-height;
+	.font-baseline();
 }
 
 main {

examples/003_Baselines/stylesheet.less

@@ -70,7 +70,7 @@ main {
 .use-column-grid(680px, 24px, 3);
 
 html {
-	font: @baseline-size / @baseline-height @main-font-family;
+	.font-baseline();
 }
 
 h1 {

order.less

@@ -138,8 +138,18 @@
 	@baseline-name: @name;
 
 	@-offset: "@{name}-font-offset";
+	@-family: "@{name}-font-family";
 	.use-baseline-grid(@size, @height, @@-offset, @size, @height, @@-offset);
 
+	// Setting baseline font properties on root element
+	.font-baseline () when not(@-family = false) {
+		font: @baseline-size / @baseline-height @@-family;
+	}
+	.font-baseline () when (@-family = false) {
+		font-size: @baseline-size;
+		line-height: @baseline-height;
+	}
+	
 
 	//
 	// Property mixins
@@ -164,6 +174,7 @@
 		.-baseline-font(@current-size, @baseline-size, @current-height, @@-variation, @@-family);
 	}
 
+	
 	//
 	// Private mixins
 	//

tests/stylesheet.css

@@ -378,9 +378,7 @@ html {
   line-height: 0.65;
 }
 html {
-  font-family: Verdana, sans-serif;
-  font-size: 16px;
-  line-height: 1.5;
+  font: 16px / 1.5 'Verdana', sans-serif;
 }
 #baseline-horizontal,
 #baseline-vertical,

tests/stylesheet.less

@@ -370,9 +370,7 @@ html {
 .use-baseline-grid(@scale-base, 1.5, verdana);
 
 html {
-	font-family: Verdana, sans-serif;
-	font-size: @baseline-size;
-	line-height: @baseline-height;
+	.font-baseline();
 }
 
 #baseline-horizontal, #baseline-vertical, #baseline-vertical-family, #baseline-vertical-line, #baseline-vertical-offset {