From f28140897e92882a2bbecd8c3426e978bd29ba86 Mon Sep 17 00:00:00 2001
From: Jacob Rask <jacob@jacobrask.net>
Date: Sun, 19 Feb 2012 22:14:18 +0100
Subject: [PATCH] Update documentation for abbreviations

---
 docs/assets/bootstrap.zip              | Bin 53441 -> 53441 bytes
 docs/base-css.html                     |   8 +++++---
 docs/templates/pages/base-css.mustache |   8 +++++---
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index a52a2ffe74ee719aec904d80ae17e934cc8ef15a..307e72ac928c25fa1d092652938adedfbff5cf42 100644
GIT binary patch
delta 452
zcmX@Okon+3W}X0VW)?065IDARB99`Qa+;&RO4{U&XN0+sBmz{CBqr}K=3oM<p5e%*
z0#vP>w()*5J5XS93Wph3nR43Z1svA;AfdbFMlc~!3k4&Pka?CZOsFc0jT0o)RICCv
z3Su$T{K+Sa4WOc%{}<~hf)wgbHGv7GPyH$a6q*<y!=IU(t{)o0$-s<oJj{$`tDIq$
zy<b%+05T(MH{AZUyKBKhI%o8mltG>rpIm>Q4Wy{%j4?z+7R0-7#-9o7HZafOtP7Id
z(z6aoJhpS*XeJe%GeXjP^qd_MPvyK5gok9W%;d%A#gR<BeLfJ0=X(KazVPI=7eoL?
CSh2qV

delta 452
zcmX@Okon+3W}X0VW)?065MW$Akw=j&Daz45IcoC8Gs0X*5&^165|j5Ab1(r_&u|0_
zCPi($-^>man4H341{K-7fWulJBy`u@2qq+Ip<o0OGS9Mw2~}mWae{=JidDcu5R0Ma
zPd-^}08{wCSVxhGY4v2?sU~d6Ko=%OZBC#1RRpMaVt@>PW^THEXb2|*Gs5vOGnTD#
zhMDnxRiyyPvaH>3``7NS1q<n%(Pv5md0KpO{dqQ!qM9?t5D{4r@4^{>B%Z@r7bM=&
zvkpi+wsYPP9^9m&b4Ez=N6*>8ctG!{oOfaZ`x&mf=8Vkb#plIgYJhg%J|Bq0^SuBy
KUwHD`3nBnC=cU~M

diff --git a/docs/base-css.html b/docs/base-css.html
index 9fad87178a..5a2e12748c 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -166,7 +166,8 @@
           Wraps abbreviations and acronyms to show the expanded version on hover
         </td>
         <td>
-          Include optional <code>title</code> for expanded text
+          <p>Include optional <code>title</code> attribute for expanded text</p>
+          Use <code>.initialism</code> class for uppercase abbreviations.
         </td>
       </tr>
       <tr>
@@ -205,8 +206,9 @@
     </div>
     <div class="span4">
       <h3>Example abbreviations</h3>
-      <p>Abbreviations are styled with uppercase text and a light dotted bottom border. They also have a help cursor on hover so users have extra indication something will be shown on hover.</p>
-      <p><abbr title="HyperText Markup Language">HTML</abbr> is the best thing since sliced bread.</p>
+      <p>Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover. This gives users extra indication something will be shown on hover.</p>
+      <p>Add the <code>initialism</code> class to an abbreviation to increase typographic harmony by giving it a slightly smaller text size.</p>
+      <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
       <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
     </div>
   </div>
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 84d48fb1e0..96036d6eee 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -90,7 +90,8 @@
           {{_i}}Wraps abbreviations and acronyms to show the expanded version on hover{{/i}}
         </td>
         <td>
-          {{_i}}Include optional <code>title</code> for expanded text{{/i}}
+          <p>{{_i}}Include optional <code>title</code> attribute for expanded text{{/i}}</p>
+          {{_i}}Use <code>.initialism</code> class for uppercase abbreviations.{{/i}}
         </td>
       </tr>
       <tr>
@@ -129,8 +130,9 @@
     </div>
     <div class="span4">
       <h3>{{_i}}Example abbreviations{{/i}}</h3>
-      <p>{{_i}}Abbreviations are styled with uppercase text and a light dotted bottom border. They also have a help cursor on hover so users have extra indication something will be shown on hover.{{/i}}</p>
-      <p>{{_i}}<abbr title="HyperText Markup Language">HTML</abbr> is the best thing since sliced bread.{{/i}}</p>
+      <p>{{_i}}Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover. This gives users extra indication something will be shown on hover.{{/i}}</p>
+      <p>{{_i}}Add the <code>initialism</code> class to an abbreviation to increase typographic harmony by giving it a slightly smaller text size.{{/i}}</p>
+      <p>{{_i}}<abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.{{/i}}</p>
       <p>{{_i}}An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.{{/i}}</p>
     </div>
   </div>