fixes #4455: improve small styles and add to docs

3 files changed, 44 insertions, 27 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index e550b175ec..70f77af7ef 100644
--- a/docs/assets/css/bootstrap.css
+++ b/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;
diff --git a/docs/base-css.html b/docs/base-css.html
index 2be40cd2c0..df5df24027 100644
--- a/docs/base-css.html
+++ b/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>
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 48b874e1ec..d1d8691ba1 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/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>