Exploring rems as font-size unit

* Added a new mixin to calculate rems and pixels for IE fallback
* Updated the body, p, and .lead elements to use the new .font-size() mixin
* New mixin has default value of 14px or 1.4rem
* Still needs exploration, and change this means lots of work rejiggering margins and line-heights
* Related, started to reorganize the mixins a bit to call out mixins that are used by the framework and not utilities or snippets

4 files changed, 35 insertions, 30 deletions

diff --git a/less/mixins.less b/less/mixins.less
index a5c02d5fd..3a1663ab4 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -114,28 +114,6 @@
 }
 
 
-// FORMS
-// --------------------------------------------------
-
-.formFieldState(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) {
-  // Color the label text
-  .control-label {
-    color: @text-color;
-  }
-  // Set the border and box shadow on specific inputs to match
-  .input-with-feedback {
-    padding-right: 32px; // to account for the feedback icon
-    border-color: @border-color;
-    .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
-    &:focus {
-      border-color: darken(@border-color, 10%);
-      @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
-      .box-shadow(@shadow);
-    }
-  }
-}
-
-
 
 // CSS3 PROPERTIES
 // --------------------------------------------------
@@ -553,3 +531,35 @@
   .pushX(@grid-columns);
   .pullX(@grid-columns);
 }
+
+
+
+// Framework mixins
+// --------------------------------------------------
+
+// Generate rem font-sizes with pixel fallbacks
+// By default uses `@font-size-base` with an initial value of 14 (1.4rem or 14px)
+.font-size(@font-size: @font-size-base) {
+  @rem-size: (@font-size / 10);
+  font-size: ~"@{font-size}px";
+  font-size: ~"@{rem-size}rem";
+}
+
+// Generate form validation states
+.formFieldState(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) {
+  // Color the label text
+  .control-label {
+    color: @text-color;
+  }
+  // Set the border and box shadow on specific inputs to match
+  .input-with-feedback {
+    padding-right: 32px; // to account for the feedback icon
+    border-color: @border-color;
+    .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
+    &:focus {
+      border-color: darken(@border-color, 10%);
+      @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
+      .box-shadow(@shadow);
+    }
+  }
+}
diff --git a/less/scaffolding.less b/less/scaffolding.less
index 9844a95f2..2b82d1e90 100644
--- a/less/scaffolding.less
+++ b/less/scaffolding.less
@@ -30,12 +30,7 @@ html {
 }
 
 body {
-  margin: 0;
   color: @text-color;
-  font-family: @font-family-base;
-  font-size: 14px;
-  font-size: 1.4rem;
-  line-height: 1.5;
   background-color: @body-background;
 }
 
@@ -46,7 +41,7 @@ button,
 select,
 textarea {
   font-family: @font-family-base;
-  font-size: @font-size-base;
+  .font-size();
   line-height: @line-height-base;
 }
 
diff --git a/less/type.less b/less/type.less
index 03566ebef..55aea4d8a 100644
--- a/less/type.less
+++ b/less/type.less
@@ -11,7 +11,7 @@ p {
 }
 .lead {
   margin-bottom: @line-height-base;
-  font-size: (@font-size-base * 1.5);
+  .font-size((@font-size-base * 1.5));
   font-weight: 200;
   line-height: 1.25;
 }
diff --git a/less/variables.less b/less/variables.less
index bb73e3dce..45495a9e1 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -45,7 +45,7 @@
 @font-family-monospace:   Monaco, Menlo, Consolas, "Courier New", monospace;
 @font-family-base:        @font-family-sans-serif;
 
-@font-size-base:          14px;
+@font-size-base:          14;
 @font-size-large:         (@font-size-base * 1.25); // ~18px
 @font-size-small:         (@font-size-base * 0.85); // ~12px
 @font-size-mini:          (@font-size-base * 0.75); // ~11px