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

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index cffcb1bab9fb5e67e6ac937f39c12b3ac45ec498..e902cdaf7ec0dcc077623115ea25993ccfa26c2f 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -288,11 +288,6 @@ html {
 }
 
 body {
-  margin: 0;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  font-size: 1.4rem;
-  line-height: 1.5;
   color: #333333;
   background-color: #ffffff;
 }
@@ -304,6 +299,7 @@ select,
 textarea {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
+  font-size: 1.4rem;
   line-height: 20px;
 }
 
@@ -346,6 +342,7 @@ p {
 .lead {
   margin-bottom: 20px;
   font-size: 21px;
+  font-size: 2.1rem;
   font-weight: 200;
   line-height: 1.25;
 }
@@ -470,58 +467,58 @@ h6 {
 
 h1,
 .h1 {
-  font-size: 38.5px;
+  font-size: 38.5;
   font-size: 4rem;
 }
 
 h2,
 .h2 {
-  font-size: 31.5px;
+  font-size: 31.5;
   font-size: 3rem;
 }
 
 h3,
 .h3 {
-  font-size: 24.5px;
+  font-size: 24.5;
   font-size: 2.5rem;
 }
 
 h4,
 .h4 {
-  font-size: 17.5px;
+  font-size: 17.5;
   font-size: 2rem;
 }
 
 h5,
 .h5 {
-  font-size: 14px;
+  font-size: 14;
   font-size: 1.6rem;
 }
 
 h6,
 .h6 {
-  font-size: 11.9px;
+  font-size: 11.9;
   font-size: 1.2rem;
 }
 
 h1 small,
 .h1 small {
-  font-size: 24.5px;
+  font-size: 24.5;
 }
 
 h2 small,
 .h2 small {
-  font-size: 17.5px;
+  font-size: 17.5;
 }
 
 h3 small,
 .h3 small {
-  font-size: 14px;
+  font-size: 14;
 }
 
 h4 small,
 .h4 small {
-  font-size: 14px;
+  font-size: 14;
 }
 
 .page-header {
@@ -627,7 +624,7 @@ blockquote {
 
 blockquote p {
   margin-bottom: 0;
-  font-size: 17.5px;
+  font-size: 17.5;
   font-weight: 300;
   line-height: 1.25;
 }
@@ -681,7 +678,7 @@ code,
 pre {
   padding: 0 3px 2px;
   font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
-  font-size: 12px;
+  font-size: 12;
   color: #333333;
   border-radius: 4px;
 }
@@ -698,7 +695,7 @@ pre {
   display: block;
   padding: 9.5px;
   margin: 0 0 10px;
-  font-size: 13px;
+  font-size: 13;
   line-height: 20px;
   word-break: break-all;
   word-wrap: break-word;
@@ -1118,7 +1115,7 @@ legend {
   width: 100%;
   padding: 0;
   margin-bottom: 20px;
-  font-size: 21px;
+  font-size: 21;
   line-height: 40px;
   color: #333333;
   border: 0;
@@ -1150,7 +1147,7 @@ input[type="color"] {
   display: inline-block;
   min-height: 34px;
   padding: 6px 9px;
-  font-size: 14px;
+  font-size: 14;
   line-height: 20px;
   color: #555555;
   vertical-align: middle;
@@ -1326,7 +1323,7 @@ input[type="search"].input-large,
 input[type="tel"].input-large,
 input[type="color"].input-large {
   padding: 11px 14px;
-  font-size: 17.5px;
+  font-size: 17.5;
   border-radius: 6px;
 }
 
@@ -1348,7 +1345,7 @@ input[type="tel"].input-small,
 input[type="color"].input-small {
   min-height: 26px;
   padding: 2px 10px;
-  font-size: 11.9px;
+  font-size: 11.9;
   border-radius: 3px;
 }
 
@@ -1535,7 +1532,7 @@ select:focus:invalid:focus {
 
 .input-group-addon {
   padding: 6px 8px;
-  font-size: 14px;
+  font-size: 14;
   font-weight: normal;
   line-height: 20px;
   text-align: center;
@@ -1549,12 +1546,12 @@ select:focus:invalid:focus {
 
 .input-group-addon.input-small {
   padding: 2px 10px;
-  font-size: 11.9px;
+  font-size: 11.9;
 }
 
 .input-group-addon.input-large {
   padding: 11px 14px;
-  font-size: 17.5px;
+  font-size: 17.5;
 }
 
 .input-group input:first-child,
@@ -1690,7 +1687,7 @@ select:focus:invalid:focus {
   display: inline-block;
   padding: 6px 12px;
   margin-bottom: 0;
-  font-size: 14px;
+  font-size: 14;
   font-weight: 500;
   line-height: 20px;
   text-align: center;
@@ -1734,19 +1731,19 @@ fieldset[disabled] .btn {
 
 .btn-large {
   padding: 11px 14px;
-  font-size: 17.5px;
+  font-size: 17.5;
   border-radius: 6px;
 }
 
 .btn-small {
   padding: 2px 10px;
-  font-size: 11.9px;
+  font-size: 11.9;
   border-radius: 3px;
 }
 
 .btn-mini {
   padding: 0 6px;
-  font-size: 10.5px;
+  font-size: 10.5;
   border-radius: 3px;
 }
 
@@ -3788,7 +3785,7 @@ button.close {
 .pagination-large > li > a,
 .pagination-large > li > span {
   padding: 11px 14px;
-  font-size: 17.5px;
+  font-size: 17.5;
 }
 
 .pagination-large > li:first-child > a,
@@ -3822,13 +3819,13 @@ button.close {
 .pagination-small > li > a,
 .pagination-small > li > span {
   padding: 2px 10px;
-  font-size: 11.9px;
+  font-size: 11.9;
 }
 
 .pagination-mini > li > a,
 .pagination-mini > li > span {
   padding: 0 6px;
-  font-size: 10.5px;
+  font-size: 10.5;
 }
 
 .pager {

diff --git a/less/mixins.less b/less/mixins.less
index a5c02d5fd784ce8640678cd6fad368edf308813d..3a1663ab40c1beddecc9f01266204b259ea247c7 100644 (file)
--- 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 9844a95f2d47f668091c3d63506d56b2b185f4c9..2b82d1e90c0de603f77aec6d8c61773155065b0a 100644 (file)
--- 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 03566ebefa5714dc8ea6ff6f20d4577d3ee53649..55aea4d8a68396a1d2a1ed57cb88051a32adc61d 100644 (file)
--- 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 bb73e3dce4575e442aecb7630c2a6cb2a8d3cde0..45495a9e1a14f4f7253ed61b859a0ab126b80173 100644 (file)
--- 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