Update and document use of small in headings

assets/css/docs.css

@@ -642,7 +642,7 @@ h1[id] {
 }
 
 /* Typography */
-.bs-example-type .table td:last-child {
+.bs-example-type .table .info {
   color: #999;
   vertical-align: middle;
 }

css.html

@@ -588,46 +588,80 @@ base_url: "../"
     <!-- Headings -->
     <h2 id="type-headings">Headings</h2>
     <p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.</p>
-
     <div class="bs-example bs-example-type">
       <table class="table">
         <tbody>
           <tr>
             <td><h1>h1. Bootstrap heading</h1></td>
-            <td>Semibold 36px</td>
+            <td class="info">Semibold 36px</td>
           </tr>
           <tr>
             <td><h2>h2. Bootstrap heading</h2></td>
-            <td>Semibold 30px</td>
+            <td class="info">Semibold 30px</td>
           </tr>
           <tr>
             <td><h3>h3. Bootstrap heading</h3></td>
-            <td>Semibold 24px</td>
+            <td class="info">Semibold 24px</td>
           </tr>
           <tr>
             <td><h4>h4. Bootstrap heading</h4></td>
-            <td>Semibold 18px</td>
+            <td class="info">Semibold 18px</td>
           </tr>
           <tr>
             <td><h5>h5. Bootstrap heading</h5></td>
-            <td>Semibold 14px</td>
+            <td class="info">Semibold 14px</td>
           </tr>
           <tr>
             <td><h6>h6. Bootstrap heading</h6></td>
-            <td>Semibold 12px</td>
+            <td class="info">Semibold 12px</td>
           </tr>
         </tbody>
       </table>
     </div>
 {% highlight html %}
-<h1>...</h1>
+<h1>h1. Bootstrap heading</h1>
-<h2>...</h2>
+<h2>h2. Bootstrap heading</h2>
-<h3>...</h3>
+<h3>h3. Bootstrap heading</h3>
-<h4>...</h4>
+<h4>h4. Bootstrap heading</h4>
-<h5>...</h5>
+<h5>h5. Bootstrap heading</h5>
-<h6>...</h6>
+<h6>h6. Bootstrap heading</h6>
 {% endhighlight %}
 
+    <p>Also included with headings is an autoscaling <code>&lt;small&gt;</code> element. Use it for smaller, gray secondary text in any heading.</p>
+    <div class="bs-example bs-example-type">
+      <table class="table">
+        <tbody>
+          <tr>
+            <td><h1>h1. Bootstrap heading <small>Secondary text</small></h1></td>
+          </tr>
+          <tr>
+            <td><h2>h2. Bootstrap heading <small>Secondary text</small></h2></td>
+          </tr>
+          <tr>
+            <td><h3>h3. Bootstrap heading <small>Secondary text</small></h3></td>
+          </tr>
+          <tr>
+            <td><h4>h4. Bootstrap heading <small>Secondary text</small></h4></td>
+          </tr>
+          <tr>
+            <td><h5>h5. Bootstrap heading <small>Secondary text</small></h5></td>
+          </tr>
+          <tr>
+            <td><h6>h6. Bootstrap heading <small>Secondary text</small></h6></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+{% highlight html %}
+<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
+<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
+<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
+<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
+<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
+<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
+{% endhighlight %}
+
+
     <!-- Body copy -->
     <h2 id="type-body-copy">Body copy</h2>
     <p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>1.428</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).</p>

dist/css/bootstrap.css

@@ -491,6 +491,12 @@ h3 {
   margin-bottom: 10px;
 }
 
+h1 small,
+h2 small,
+h3 small {
+  font-size: 65%;
+}
+
 h4,
 h5,
 h6 {
@@ -498,6 +504,12 @@ h6 {
   margin-bottom: 10px;
 }
 
+h4 small,
+h5 small,
+h6 small {
+  font-size: 75%;
+}
+
 h1,
 .h1 {
   font-size: 36px;
@@ -528,22 +540,11 @@ h6,
   font-size: 12px;
 }
 
-h1 small,
+/*h1 small, .h1 small { font-size: ceil(@font-size-base * 1.70); } // ~24px
-.h1 small {
+h2 small, .h2 small { font-size: ceil(@font-size-base * 1.25); } // ~18px
-  font-size: 24px;
+h3 small, .h3 small,
-}
+h4 small, .h4 small { font-size: @font-size-base; }
-
+*/
-h2 small,
-.h2 small {
-  font-size: 18px;
-}
-
-h3 small,
-.h3 small,
-h4 small,
-.h4 small {
-  font-size: 14px;
-}
 
 .page-header {
   padding-bottom: 9px;

less/type.less

@@ -52,6 +52,7 @@ h1, h2, h3, h4, h5, h6,
   font-family: @headings-font-family;
   font-weight: @headings-font-weight;
   line-height: @headings-line-height;
+
   small {
     font-weight: normal;
     line-height: 1;
@@ -64,12 +65,20 @@ h2,
 h3 {
   margin-top: @line-height-computed;
   margin-bottom: (@line-height-computed / 2);
+
+  small {
+    font-size: 65%;
+  }
 }
 h4,
 h5,
 h6 {
   margin-top: (@line-height-computed / 2);
   margin-bottom: (@line-height-computed / 2);
+
+  small {
+    font-size: 75%;
+  }
 }
 
 h1, .h1 { font-size: @font-size-h1; }
@@ -79,11 +88,6 @@ h4, .h4 { font-size: @font-size-h4; }
 h5, .h5 { font-size: @font-size-h5; }
 h6, .h6 { font-size: @font-size-h6; }
 
-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; }
-
 
 // Page header
 // -------------------------