Unitless line-height

* Instead of 20px as @line-height-base, use 1.5
* Update typographic scale for headings to use unitless as well--required some twerking of decimals a bit and some rounding
* Introduce new @line-height-computed value, which takes base font-size and multiplies it by 1.5, for use in padding and margin on components

8 files changed, 124 insertions, 128 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 5e6eab48d..49e6073cf 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -290,7 +290,7 @@ html {
 body {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
-  line-height: 20px;
+  line-height: 1.5;
   color: #333333;
   background-color: #ffffff;
 }
@@ -336,11 +336,11 @@ img {
 }
 
 p {
-  margin: 0 0 10px;
+  margin: 0 0 10.5px;
 }
 
 .lead {
-  margin-bottom: 20px;
+  margin-bottom: 21px;
   font-size: 21px;
   font-weight: 200;
   line-height: 1.4;
@@ -424,7 +424,7 @@ h6,
 .h6 {
   font-family: inherit;
   font-weight: 500;
-  line-height: 20px;
+  line-height: 1.1;
 }
 
 h1 small,
@@ -447,40 +447,35 @@ h6 small,
 h1,
 h2,
 h3 {
-  margin-top: 20px;
-  margin-bottom: 10px;
-  line-height: 40px;
-}
-
-h3 {
-  line-height: 30px;
+  margin-top: 21px;
+  margin-bottom: 10.5px;
 }
 
 h4,
 h5,
 h6 {
-  margin-top: 10px;
-  margin-bottom: 10px;
+  margin-top: 10.5px;
+  margin-bottom: 10.5px;
 }
 
 h1,
 .h1 {
-  font-size: 38.5px;
+  font-size: 38px;
 }
 
 h2,
 .h2 {
-  font-size: 31.5px;
+  font-size: 32px;
 }
 
 h3,
 .h3 {
-  font-size: 24.5px;
+  font-size: 24px;
 }
 
 h4,
 .h4 {
-  font-size: 17.5px;
+  font-size: 18px;
 }
 
 h5,
@@ -490,39 +485,36 @@ h5,
 
 h6,
 .h6 {
-  font-size: 11.9px;
+  font-size: 12px;
 }
 
 h1 small,
 .h1 small {
-  font-size: 24.5px;
+  font-size: 24px;
 }
 
 h2 small,
 .h2 small {
-  font-size: 17.5px;
+  font-size: 18px;
 }
 
 h3 small,
-.h3 small {
-  font-size: 14px;
-}
-
+.h3 small,
 h4 small,
 .h4 small {
   font-size: 14px;
 }
 
 .page-header {
-  padding-bottom: 9px;
-  margin: 40px 0 20px;
+  padding-bottom: 9.5px;
+  margin: 42px 0 21px;
   border-bottom: 1px solid #eeeeee;
 }
 
 ul,
 ol {
   padding: 0;
-  margin: 0 0 10px 25px;
+  margin: 0 0 10.5px 25px;
 }
 
 ul ul,
@@ -533,7 +525,7 @@ ol ul {
 }
 
 li {
-  line-height: 20px;
+  line-height: 1.5;
 }
 
 .list-unstyled {
@@ -553,12 +545,12 @@ li {
 }
 
 dl {
-  margin-bottom: 20px;
+  margin-bottom: 21px;
 }
 
 dt,
 dd {
-  line-height: 20px;
+  line-height: 1.5;
 }
 
 dt {
@@ -566,7 +558,7 @@ dt {
 }
 
 dd {
-  margin-left: 10px;
+  margin-left: 10.5px;
 }
 
 .dl-horizontal:before,
@@ -604,7 +596,7 @@ dd {
 }
 
 hr {
-  margin: 20px 0;
+  margin: 21px 0;
   border: 0;
   border-top: 1px solid #eeeeee;
   border-bottom: 1px solid #fff;
@@ -623,8 +615,8 @@ abbr.initialism {
 }
 
 blockquote {
-  padding: 10px 20px;
-  margin: 0 0 20px;
+  padding: 10.5px 21px;
+  margin: 0 0 21px;
   border-left: 5px solid #eeeeee;
 }
 
@@ -640,7 +632,7 @@ blockquote p:last-child {
 
 blockquote small {
   display: block;
-  line-height: 20px;
+  line-height: 1.5;
   color: #999999;
 }
 
@@ -678,9 +670,9 @@ blockquote:after {
 
 address {
   display: block;
-  margin-bottom: 20px;
+  margin-bottom: 21px;
   font-style: normal;
-  line-height: 20px;
+  line-height: 1.5;
 }
 
 code,
@@ -702,10 +694,10 @@ code {
 
 pre {
   display: block;
-  padding: 9.5px;
-  margin: 0 0 10px;
+  padding: 0.25;
+  margin: 0 0 0.75;
   font-size: 13px;
-  line-height: 20px;
+  line-height: 1.5;
   word-break: break-all;
   word-wrap: break-word;
   white-space: pre;
@@ -717,7 +709,7 @@ pre {
 }
 
 pre.prettyprint {
-  margin-bottom: 20px;
+  margin-bottom: 1.5;
 }
 
 pre code {
@@ -1025,7 +1017,7 @@ th {
 
 .table {
   width: 100%;
-  margin-bottom: 20px;
+  margin-bottom: 1.5;
 }
 
 .table thead > tr > th,
@@ -1033,7 +1025,7 @@ th {
 .table thead > tr > td,
 .table tbody > tr > td {
   padding: 8px;
-  line-height: 20px;
+  line-height: 1.5;
   vertical-align: top;
   border-top: 1px solid #dddddd;
 }
@@ -1219,9 +1211,9 @@ legend {
   display: block;
   width: 100%;
   padding: 0;
-  margin-bottom: 20px;
+  margin-bottom: 21px;
   font-size: 21px;
-  line-height: 40px;
+  line-height: 1.1;
   color: #333333;
   border: 0;
   border-bottom: 1px solid #e5e5e5;
@@ -1250,10 +1242,10 @@ input[type="search"],
 input[type="tel"],
 input[type="color"] {
   display: block;
-  min-height: 34px;
+  min-height: 35px;
   padding: 6px 9px;
   font-size: 14px;
-  line-height: 20px;
+  line-height: 1.5;
   color: #555555;
   vertical-align: middle;
   background-color: #ffffff;
@@ -1328,10 +1320,10 @@ input[type="checkbox"] {
 
 select,
 input[type="file"] {
-  height: 34px;
+  height: 35px;
   /* In IE7, the height of the select element cannot be changed by height, only font-size. TODO: Check if this is still needed when dropping IE7 support */
 
-  line-height: 34px;
+  line-height: 35px;
 }
 
 select[multiple],
@@ -1371,7 +1363,7 @@ textarea::-webkit-input-placeholder {
 .radio,
 .checkbox {
   display: block;
-  min-height: 20px;
+  min-height: 21px;
   padding-left: 20px;
   margin-top: 10px;
   margin-bottom: 10px;
@@ -1460,7 +1452,7 @@ input[type="url"].input-small,
 input[type="search"].input-small,
 input[type="tel"].input-small,
 input[type="color"].input-small {
-  min-height: 26px;
+  min-height: 27px;
   padding: 2px 10px;
   font-size: 11.9px;
   border-radius: 3px;
@@ -1555,9 +1547,9 @@ select:focus:invalid:focus {
 }
 
 .form-actions {
-  padding: 19px 20px 20px;
-  margin-top: 20px;
-  margin-bottom: 20px;
+  padding: 21px 20px;
+  margin-top: 21px;
+  margin-bottom: 21px;
   background-color: #f5f5f5;
   border-top: 1px solid #e5e5e5;
 }
@@ -1636,7 +1628,7 @@ select:focus:invalid:focus {
   padding: 6px 8px;
   font-size: 14px;
   font-weight: normal;
-  line-height: 20px;
+  line-height: 1.5;
   text-align: center;
   text-shadow: 0 1px 0 #fff;
   background-color: #eeeeee;
@@ -1785,7 +1777,7 @@ select:focus:invalid:focus {
   margin-bottom: 0;
   font-size: 14px;
   font-weight: 500;
-  line-height: 20px;
+  line-height: 1.5;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
@@ -2823,7 +2815,7 @@ input[type="button"].btn-block {
 
 .dropdown-menu .divider {
   height: 2px;
-  margin: 9px 0;
+  margin: -0.25 0;
   overflow: hidden;
   background-color: #e5e5e5;
   border-bottom: 1px solid #ffffff;
@@ -2834,7 +2826,7 @@ input[type="button"].btn-block {
   padding: 3px 20px;
   clear: both;
   font-weight: normal;
-  line-height: 20px;
+  line-height: 1.5;
   color: #333333;
   white-space: nowrap;
 }
@@ -3252,7 +3244,7 @@ button.close {
 
 .nav .nav-divider {
   height: 2px;
-  margin: 9px 0;
+  margin: -0.25 0;
   overflow: hidden;
   background-color: #e5e5e5;
   border-bottom: 1px solid #ffffff;
@@ -3269,7 +3261,7 @@ button.close {
 
 .nav-tabs > li > a {
   margin-right: 2px;
-  line-height: 20px;
+  line-height: 1.5;
   border: 1px solid transparent;
   border-radius: 4px 4px 0 0;
 }
@@ -3359,7 +3351,7 @@ button.close {
   padding: 3px 15px;
   font-size: 10.5px;
   font-weight: bold;
-  line-height: 20px;
+  line-height: 1.5;
   color: #999999;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
   text-transform: uppercase;
@@ -3498,8 +3490,8 @@ button.close {
 }
 
 .navbar-nav > li > a {
-  padding-top: 15px;
-  padding-bottom: 15px;
+  padding-top: 14.5px;
+  padding-bottom: 14.5px;
   line-height: 20px;
   color: #777777;
 }
@@ -3554,7 +3546,7 @@ button.close {
   margin-left: auto;
   font-size: 17.5px;
   font-weight: 500;
-  line-height: 20px;
+  line-height: 21px;
   color: #777777;
   text-align: center;
 }
@@ -3762,7 +3754,12 @@ button.close {
 }
 
 .navbar-btn {
-  margin-top: 8px;
+  margin-top: 7.5px;
+}
+
+.navbar-text {
+  margin-top: 14.5px;
+  margin-bottom: 14.5px;
 }
 
 .navbar-link {
@@ -3973,7 +3970,7 @@ button.close {
 
 .breadcrumb {
   padding: 8px 15px;
-  margin: 0 0 20px;
+  margin: 0 0 1.5;
   list-style: none;
   background-color: #f5f5f5;
   border-radius: 4px;
@@ -4001,7 +3998,7 @@ button.close {
 
 .pagination {
   display: inline-block;
-  margin: 20px 0;
+  margin: 1.5 0;
   border-radius: 4px;
 }
 
@@ -4013,7 +4010,7 @@ button.close {
 .pagination > li > span {
   float: left;
   padding: 4px 12px;
-  line-height: 20px;
+  line-height: 1.5;
   text-decoration: none;
   background-color: #ffffff;
   border: 1px solid #dddddd;
@@ -4102,7 +4099,7 @@ button.close {
 }
 
 .pager {
-  margin: 20px 0;
+  margin: 1.5 0;
   text-align: center;
   list-style: none;
 }
@@ -4239,7 +4236,7 @@ button.close {
 }
 
 .modal-header {
-  min-height: 35px;
+  min-height: 16.5px;
   padding: 15px;
   border-bottom: 1px solid #e5e5e5;
 }
@@ -4250,7 +4247,7 @@ button.close {
 
 .modal-title {
   margin: 0;
-  line-height: 20px;
+  line-height: 1.5;
 }
 
 .modal-body {
@@ -4539,8 +4536,8 @@ button.close {
 }
 
 .alert {
-  padding: 8px 35px 8px 14px;
-  margin-bottom: 20px;
+  padding: 10px 35px 10px 15px;
+  margin-bottom: 21px;
   color: #c09853;
   background-color: #fcf8e3;
   border: 1px solid #fbeed5;
@@ -4615,8 +4612,8 @@ button.close {
 }
 
 .alert-block {
-  padding-top: 14px;
-  padding-bottom: 14px;
+  padding-top: 15px;
+  padding-bottom: 15px;
 }
 
 .alert-block > p,
@@ -4631,7 +4628,7 @@ button.close {
 .thumbnail,
 .img-thumbnail {
   padding: 4px;
-  line-height: 20px;
+  line-height: 1.5;
   background-color: #ffffff;
   border: 1px solid #dddddd;
   border-radius: 4px;
@@ -4851,8 +4848,8 @@ a.list-group-item.active > .badge,
 }
 
 .progress {
-  height: 20px;
-  margin-bottom: 20px;
+  height: 21px;
+  margin-bottom: 21px;
   overflow: hidden;
   background-color: #f5f5f5;
   border-radius: 4px;
@@ -4946,7 +4943,7 @@ a.list-group-item.active > .badge,
 }
 
 .accordion {
-  margin-bottom: 20px;
+  margin-bottom: 1.5;
 }
 
 .accordion-group {
@@ -5158,7 +5155,7 @@ a.list-group-item.active > .badge,
   margin-bottom: 30px;
   font-size: 21px;
   font-weight: 200;
-  line-height: 30px;
+  line-height: 2.25;
   color: inherit;
   background-color: #eeeeee;
 }
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index fcbf723eb..bfbb60d48 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -599,6 +599,7 @@ input.focused {
 }
 .highlight pre {
   padding: 0;
+  margin-top: 0;
   margin-bottom: 0;
   background-color: transparent;
   border: 0;
diff --git a/less/alerts.less b/less/alerts.less
index 882b25bef..bb7846249 100644
--- a/less/alerts.less
+++ b/less/alerts.less
@@ -7,8 +7,8 @@
 // -------------------------
 
 .alert {
-  padding: 8px 35px 8px 14px;
-  margin-bottom: @line-height-base;
+  padding: 10px 35px 10px 15px;
+  margin-bottom: @line-height-computed;
   color: @alert-text;
   background-color: @alert-bg;
   border: 1px solid @alert-border;
@@ -84,8 +84,8 @@
 // -------------------------
 
 .alert-block {
-  padding-top: 14px;
-  padding-bottom: 14px;
+  padding-top: 15px;
+  padding-bottom: 15px;
 }
 .alert-block > p,
 .alert-block > ul {
diff --git a/less/forms.less b/less/forms.less
index 6b3bff728..4a99a7793 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -20,9 +20,9 @@ legend {
   display: block;
   width: 100%;
   padding: 0;
-  margin-bottom: @line-height-base;
+  margin-bottom: @line-height-computed;
   font-size: (@font-size-base * 1.5);
-  line-height: (@line-height-base * 2);
+  line-height: @line-height-headings;
   color: @gray-dark;
   border: 0;
   border-bottom: 1px solid #e5e5e5;
@@ -170,7 +170,7 @@ textarea {
 .radio,
 .checkbox {
   display: block;
-  min-height: @line-height-base; // clear the floating input if there is no label text
+  min-height: @line-height-computed; // clear the floating input if there is no label text
   margin-top: 10px;
   margin-bottom: 10px;
   padding-left: 20px;
@@ -320,9 +320,9 @@ select:focus:invalid {
 // ------------
 
 .form-actions {
-  padding: (@line-height-base - 1) 20px @line-height-base;
-  margin-top: @line-height-base;
-  margin-bottom: @line-height-base;
+  padding: @line-height-computed 20px;
+  margin-top: @line-height-computed;
+  margin-bottom: @line-height-computed;
   background-color: @form-actions-bg;
   border-top: 1px solid #e5e5e5;
   .clearfix(); // Adding clearfix to allow for .pull-right button containers
diff --git a/less/navbar.less b/less/navbar.less
index 7a02a491b..975f2ebb2 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -24,8 +24,8 @@
   margin-top: 10px;
 
   > li > a {
-    padding-top: ((@navbar-height - @line-height-base) / 2);
-    padding-bottom: ((@navbar-height - @line-height-base) / 2);
+    padding-top: ((@navbar-height - @line-height-computed) / 2);
+    padding-bottom: ((@navbar-height - @line-height-computed) / 2);
     color: @navbar-link-color;
     line-height: 20px;
   }
@@ -91,7 +91,7 @@
   padding: 15px;
   font-size: @font-size-large;
   font-weight: 500;
-  line-height: @line-height-base;
+  line-height: @line-height-computed;
   color: @navbar-brand-color;
   text-align: center;
   &:hover,
@@ -323,7 +323,7 @@
 // Add a class to make any element properly align itself vertically within the navbars.
 
 .navbar-text {
-
+  .navbar-vertical-align(@line-height-computed);
 }
 
 
diff --git a/less/progress-bars.less b/less/progress-bars.less
index 9df0251e3..e963fa968 100644
--- a/less/progress-bars.less
+++ b/less/progress-bars.less
@@ -44,8 +44,8 @@
 // Outer container
 .progress {
   overflow: hidden;
-  height: @line-height-base;
-  margin-bottom: @line-height-base;
+  height: @line-height-computed;
+  margin-bottom: @line-height-computed;
   background-color: @progress-bg;
   border-radius: @border-radius-base;
   .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
diff --git a/less/type.less b/less/type.less
index f6b5eecd5..e562bb2c2 100644
--- a/less/type.less
+++ b/less/type.less
@@ -7,10 +7,10 @@
 // -------------------------
 
 p {
-  margin: 0 0 (@line-height-base / 2);
+  margin: 0 0 (@line-height-computed / 2);
 }
 .lead {
-  margin-bottom: @line-height-base;
+  margin-bottom: @line-height-computed;
   font-size: (@font-size-base * 1.5);
   font-weight: 200;
   line-height: 1.4;
@@ -56,7 +56,7 @@ h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
   font-family: @headings-font-family;
   font-weight: @headings-font-weight;
-  line-height: @line-height-base;
+  line-height: @line-height-headings;
   small {
     font-weight: normal;
     line-height: 1;
@@ -67,30 +67,26 @@ h1, h2, h3, h4, h5, h6,
 h1,
 h2,
 h3 {
-  margin-top: @line-height-base;
-  margin-bottom: (@line-height-base / 2);
-  line-height: (@line-height-base * 2);
-}
-h3 {
-  line-height: (@line-height-base * 1.5);
+  margin-top: @line-height-computed;
+  margin-bottom: (@line-height-computed / 2);
 }
 h4,
 h5,
 h6 {
-  margin-top: (@line-height-base / 2);
-  margin-bottom: (@line-height-base / 2);
+  margin-top: (@line-height-computed / 2);
+  margin-bottom: (@line-height-computed / 2);
 }
 
-h1, .h1 { font-size: (@font-size-base * 2.75); } // ~38px
-h2, .h2 { font-size: (@font-size-base * 2.25); } // ~32px
-h3, .h3 { font-size: (@font-size-base * 1.75); } // ~24px
-h4, .h4 { font-size: (@font-size-base * 1.25); } // ~18px
+h1, .h1 { font-size: ceil(@font-size-base * 2.70); } // ~38px
+h2, .h2 { font-size: ceil(@font-size-base * 2.25); } // ~32px
+h3, .h3 { font-size: ceil(@font-size-base * 1.70); } // ~24px
+h4, .h4 { font-size: ceil(@font-size-base * 1.25); } // ~18px
 h5, .h5 { font-size:  @font-size-base; }
-h6, .h6 { font-size: (@font-size-base * 0.85); } // ~12px
+h6, .h6 { font-size: ceil(@font-size-base * 0.85); } // ~12px
 
-h1 small, .h1 small { font-size: (@font-size-base * 1.75); } // ~24px
-h2 small, .h2 small { font-size: (@font-size-base * 1.25); } // ~18px
-h3 small, .h3 small { font-size: @font-size-base; }
+h1 small, .h1 small { font-size: ceil(@font-size-base * 1.70); } // ~24px
+h2 small, .h2 small { font-size: ceil(@font-size-base * 1.25); } // ~18px
+h3 small, .h3 small,
 h4 small, .h4 small { font-size: @font-size-base; }
 
 
@@ -98,8 +94,8 @@ h4 small, .h4 small { font-size: @font-size-base; }
 // -------------------------
 
 .page-header {
-  padding-bottom: ((@line-height-base / 2) - 1);
-  margin: (@line-height-base * 2) 0 @line-height-base;
+  padding-bottom: ((@line-height-computed / 2) - 1);
+  margin: (@line-height-computed * 2) 0 @line-height-computed;
   border-bottom: 1px solid @gray-lighter;
 }
 
@@ -112,7 +108,7 @@ h4 small, .h4 small { font-size: @font-size-base; }
 ul,
 ol {
   padding: 0;
-  margin: 0 0 (@line-height-base / 2) 25px;
+  margin: 0 0 (@line-height-computed / 2) 25px;
 }
 ul ul,
 ul ol,
@@ -143,7 +139,7 @@ li {
 
 // Description Lists
 dl {
-  margin-bottom: @line-height-base;
+  margin-bottom: @line-height-computed;
 }
 dt,
 dd {
@@ -153,7 +149,7 @@ dt {
   font-weight: bold;
 }
 dd {
-  margin-left: (@line-height-base / 2);
+  margin-left: (@line-height-computed / 2);
 }
 // Horizontal layout (like forms)
 .dl-horizontal {
@@ -175,7 +171,7 @@ dd {
 
 // Horizontal rules
 hr {
-  margin: @line-height-base 0;
+  margin: @line-height-computed 0;
   border: 0;
   border-top: 1px solid @hr-border;
   border-bottom: 1px solid #fff;
@@ -196,8 +192,8 @@ abbr.initialism {
 
 // Blockquotes
 blockquote {
-  padding: (@line-height-base/2) @line-height-base;
-  margin: 0 0 @line-height-base;
+  padding: (@line-height-computed / 2) @line-height-computed;
+  margin: 0 0 @line-height-computed;
   border-left: 5px solid @gray-lighter;
   p {
     font-size: (@font-size-base * 1.25);
@@ -249,7 +245,7 @@ blockquote:after {
 // Addresses
 address {
   display: block;
-  margin-bottom: @line-height-base;
+  margin-bottom: @line-height-computed;
   font-style: normal;
   line-height: @line-height-base;
 }
diff --git a/less/variables.less b/less/variables.less
index fd69c2438..c8ddb0c9e 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -50,7 +50,9 @@
 @font-size-small:         (@font-size-base * 0.85); // ~12px
 @font-size-mini:          (@font-size-base * 0.75); // ~11px
 
-@line-height-base:        20px;
+@line-height-base:        1.5;
+@line-height-computed:    (@font-size-base * @line-height-base);
+@line-height-headings:    1.1;
 
 @headings-font-family:    inherit; // empty to use BS default, @font-family-base
 @headings-font-weight:    500;
@@ -121,9 +123,9 @@
 
 @input-color-placeholder:        @gray-light;
 
-@input-height-base:              (@line-height-base + 14px); // base line-height + 12px vertical padding + 2px top/bottom border
-@input-height-large:             (@line-height-base + 24px); // base line-height + 22px vertical padding + 2px top/bottom border
-@input-height-small:             (@line-height-base + 6px);  // base line-height + 4px vertical padding + 2px top/bottom border
+@input-height-base:              (@line-height-computed + 14px); // base line-height + 12px vertical padding + 2px top/bottom border
+@input-height-large:             (@line-height-computed + 24px); // base line-height + 22px vertical padding + 2px top/bottom border
+@input-height-small:             (@line-height-computed + 6px);  // base line-height + 4px vertical padding + 2px top/bottom border
 
 @form-actions-bg:                 #f5f5f5;