fixes #4455: improve small styles and add to docs

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index e550b175ec472ec2f48d8ada2c9c75f57ff94516..70f77af7efa5f9fc99645beafbe524660d902c5e 100644 (file)
--- 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 2be40cd2c0f350ec08950d8f0d56b9188000939b..df5df2402756a2b1c231a40255ce91391f3def52 100644 (file)
--- 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 48b874e1ec83ff322e193a7616e115b220a0f7c7..d1d8691ba15f95fb1234bd5517c0d59e9b736796 100644 (file)
--- 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>

diff --git a/less/type.less b/less/type.less
index b1e32303377c3f4c5df29da93779ed82ff8a3de3..58723f788c98fbddd6fd6bab7fd7185726fb4079 100644 (file)
--- a/less/type.less
+++ b/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;
-}