clean up horizontal dl option and docs

docs/assets/css/bootstrap.css

@@ -400,10 +400,20 @@ dt, dd {
 }
 dt {
   font-weight: bold;
+  line-height: 17px;
 }
 dd {
   margin-left: 9px;
 }
+.dl-horizontal dt {
+  float: left;
+  clear: left;
+  width: 120px;
+  text-align: right;
+}
+.dl-horizontal dd {
+  margin-left: 130px;
+}
 hr {
   margin: 18px 0;
   border: 0;

docs/base-css.html

@@ -288,7 +288,7 @@
   <h2>Lists</h2>
   <div class="row">
     <div class="span4">
-      <h4>Unordered</h4>
+      <h3>Unordered</h3>
       <p><code>&lt;ul&gt;</code></p>
       <ul>
         <li>Lorem ipsum dolor sit amet</li>
@@ -309,7 +309,7 @@
       </ul>
     </div>
     <div class="span4">
-      <h4>Unstyled</h4>
+      <h3>Unstyled</h3>
       <p><code>&lt;ul class="unstyled"&gt;</code></p>
       <ul class="unstyled">
         <li>Lorem ipsum dolor sit amet</li>
@@ -330,7 +330,7 @@
       </ul>
     </div>
     <div class="span4">
-      <h4>Ordered</h4>
+      <h3>Ordered</h3>
       <p><code>&lt;ol&gt;</code></p>
       <ol>
         <li>Lorem ipsum dolor sit amet</li>
@@ -344,9 +344,10 @@
       </ol>
     </div>
   </div><!-- /row -->
+  <br>
   <div class="row">
     <div class="span4">
-      <h4>Description</h4>
+      <h3>Description</h3>
       <p><code>&lt;dl&gt;</code></p>
       <dl>
         <dt>Description lists</dt>
@@ -359,9 +360,9 @@
       </dl>
     </div>
     <div class="span8">
-      <h4>Horizontal</h4>
-      <p><code>&lt;dl class="horizontal"&gt;</code></p>
-      <dl class="horizontal">
+      <h3>Horizontal description</h3>
+      <p><code>&lt;dl class="dl-horizontal"&gt;</code></p>
+      <dl class="dl-horizontal">
         <dt>Description lists</dt>
         <dd>A description list is perfect for defining terms.</dd>
         <dt>Euismod</dt>

docs/templates/pages/base-css.mustache

@@ -212,7 +212,7 @@
   <h2>{{_i}}Lists{{/i}}</h2>
   <div class="row">
     <div class="span4">
-      <h4>{{_i}}Unordered{{/i}}</h4>
+      <h3>{{_i}}Unordered{{/i}}</h3>
       <p><code>&lt;ul&gt;</code></p>
       <ul>
         <li>Lorem ipsum dolor sit amet</li>
@@ -233,7 +233,7 @@
       </ul>
     </div>
     <div class="span4">
-      <h4>{{_i}}Unstyled{{/i}}</h4>
+      <h3>{{_i}}Unstyled{{/i}}</h3>
       <p><code>&lt;ul class="unstyled"&gt;</code></p>
       <ul class="unstyled">
         <li>Lorem ipsum dolor sit amet</li>
@@ -254,7 +254,7 @@
       </ul>
     </div>
     <div class="span4">
-      <h4>{{_i}}Ordered{{/i}}</h4>
+      <h3>{{_i}}Ordered{{/i}}</h3>
       <p><code>&lt;ol&gt;</code></p>
       <ol>
         <li>Lorem ipsum dolor sit amet</li>
@@ -268,9 +268,10 @@
       </ol>
     </div>
   </div><!-- /row -->
+  <br>
   <div class="row">
     <div class="span4">
-      <h4>{{_i}}Description{{/i}}</h4>
+      <h3>{{_i}}Description{{/i}}</h3>
       <p><code>&lt;dl&gt;</code></p>
       <dl>
         <dt>{{_i}}Description lists{{/i}}</dt>
@@ -282,10 +283,10 @@
         <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
       </dl>
     </div>
-    <div class="span4">
-      <h4>{{_i}}Horizontal{{/i}}</h4>
-      <p><code>&lt;dl class="horizontal"&gt;</code></p>
-      <dl class="horizontal">
+    <div class="span8">
+      <h3>{{_i}}Horizontal description{{/i}}</h3>
+      <p><code>&lt;dl class="dl-horizontal"&gt;</code></p>
+      <dl class="dl-horizontal">
         <dt>{{_i}}Description lists{{/i}}</dt>
         <dd>{{_i}}A description list is perfect for defining terms.{{/i}}</dd>
         <dt>Euismod</dt>
@@ -295,12 +296,7 @@
         <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
       </dl>
     </div>
-    <div class="span4">
-      <div class="well">
-        <p>{{_i}}Horizontal description lists have two additional sizes: <code>.horizontal-small</code> and <code>.horizontal-large</code>.{{/i}}</p>
-      </div>
-    </div>
-  </div>
+  </div><!-- /row -->
 </section>
 
 

less/type.less

@@ -126,12 +126,13 @@ dd {
 }
 dt {
   font-weight: bold;
+  line-height: @baseLineHeight - 1; // fix jank Helvetica Neue font bug
 }
 dd {
   margin-left: @baseLineHeight / 2;
 }
 // Horizontal layout (like forms)
-dl.horizontal {
+.dl-horizontal {
   dt {
     float: left;
     clear: left;
@@ -141,17 +142,6 @@ dl.horizontal {
   dd {
     margin-left: 130px;
   }
-  &.horizontal-small {
-    dt { width:        50px; }
-    dd { margin-left:  60px; }
-  }
-  &.horizontal-normal {
-    // no additional styles needed
-  }
-  &.horizontal-large {
-    dt { width:       190px; }
-    dd { margin-left: 200px; }
-  }
 }
 
 // MISC