fixes #4455: improve small styles and add to docs

docs/assets/css/bootstrap.css

@@ -580,11 +580,6 @@ p {
   margin: 0 0 10px;
 }
 
-p small {
-  font-size: 12px;
-  color: #999999;
-}
-
 .lead {
   margin-bottom: 20px;
   font-size: 20px;
@@ -592,6 +587,26 @@ p small {
   line-height: 30px;
 }
 
+small {
+  font-size: 85%;
+}
+
+strong {
+  font-weight: bold;
+}
+
+em {
+  font-style: italic;
+}
+
+cite {
+  font-style: normal;
+}
+
+.muted {
+  color: #999999;
+}
+
 h1,
 h2,
 h3,
@@ -730,18 +745,6 @@ hr {
   border-bottom: 1px solid #ffffff;
 }
 
-strong {
-  font-weight: bold;
-}
-
-em {
-  font-style: italic;
-}
-
-.muted {
-  color: #999999;
-}
-
 abbr[title] {
   cursor: help;
   border-bottom: 1px dotted #999999;
@@ -810,14 +813,6 @@ address {
   line-height: 20px;
 }
 
-small {
-  font-size: 100%;
-}
-
-cite {
-  font-style: normal;
-}
-
 code,
 pre {
   padding: 0 3px 2px;

docs/base-css.html

@@ -141,7 +141,18 @@
 
 
           <h2>Emphasis</h2>
-          <p>Make use of HTML's default emphasis tags, <code>&lt;strong&gt;</code> and <code>&lt;em&gt;</code>.</p>
+          <p>Make use of HTML's default emphasis tags with lightweight styles.</p>
+
+          <h3><code>&lt;small&gt;</code></h3>
+          <p>For de-emphasizing inline or blocks of text, <small>use the small tag.</small></p>
+          <div class="bs-docs-example">
+            <p><small>This line of text is meant to be treated as fine print.</small></p>
+          </div>
+<pre class="prettyprint">
+&lt;p&gt;
+  &lt;small&gt;This line of text is meant to be treated as fine print.&lt;/small&gt;
+&lt;/p&gt;
+</pre>
 
           <h3><code>&lt;strong&gt;</code></h3>
           <p>For emphasizing a snippet of text with <strong>important</strong></p>

docs/templates/pages/base-css.mustache

@@ -75,7 +75,18 @@
 
           {{! Emphasis }}
           <h2>{{_i}}Emphasis{{/i}}</h2>
-          <p>{{_i}}Make use of HTML's default emphasis tags, <code>&lt;strong&gt;</code> and <code>&lt;em&gt;</code>.{{/i}}</p>
+          <p>{{_i}}Make use of HTML's default emphasis tags with lightweight styles.{{/i}}</p>
+
+          <h3><code>&lt;small&gt;</code></h3>
+          <p>{{_i}}For de-emphasizing inline or blocks of text, <small>use the small tag.</small>{{/i}}</p>
+          <div class="bs-docs-example">
+            <p><small>This line of text is meant to be treated as fine print.</small></p>
+          </div>
+<pre class="prettyprint">
+&lt;p&gt;
+  &lt;small&gt;This line of text is meant to be treated as fine print.&lt;/small&gt;
+&lt;/p&gt;
+</pre>
 
           <h3><code>&lt;strong&gt;</code></h3>
           <p>{{_i}}For emphasizing a snippet of text with <strong>important</strong>{{/i}}</p>

less/type.less

@@ -8,10 +8,6 @@
 
 p {
   margin: 0 0 @baseLineHeight / 2;
-  small {
-    font-size: @baseFontSize - 2;
-    color: @grayLight;
-  }
 }
 .lead {
   margin-bottom: @baseLineHeight;
@@ -21,6 +17,26 @@ p {
 }
 
 
+// Emphasis & misc
+// -------------------------
+
+small {
+  font-size: 85%; // Ex: 14px base font * 85% = about 12px
+}
+strong {
+  font-weight: bold;
+}
+em {
+  font-style: italic;
+}
+cite {
+  font-style: normal;
+}
+.muted {
+  color: @grayLight;
+}
+
+
 // Headings
 // -------------------------
 
@@ -123,17 +139,6 @@ hr {
   border-bottom: 1px solid @white;
 }
 
-// Emphasis
-strong {
-  font-weight: bold;
-}
-em {
-  font-style: italic;
-}
-.muted {
-  color: @grayLight;
-}
-
 // Abbreviations and acronyms
 abbr[title] {
   cursor: help;
@@ -199,11 +204,3 @@ address {
   font-style: normal;
   line-height: @baseLineHeight;
 }
-
-// Misc
-small {
-  font-size: 100%;
-}
-cite {
-  font-style: normal;
-}