adding basic badges support

2 files changed, 98 insertions, 5 deletions

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index a8aaeeff5..54f354932 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -22,6 +22,7 @@
         </ul>
       </li>
       <li><a href="#labels">{{_i}}Labels{{/i}}</a></li>
+      <li><a href="#badges">{{_i}}Badges{{/i}}</a></li>
       <li><a href="#typography">{{_i}}Typography{{/i}}</a></li>
       <li><a href="#thumbnails">{{_i}}Thumbnails{{/i}}</a></li>
       <li><a href="#alerts">{{_i}}Alerts{{/i}}</a></li>
@@ -1124,6 +1125,102 @@
 
 
 
+<!-- Badges
+================================================== -->
+<section id="badges">
+  <div class="page-header">
+    <h1>{{_i}}Badges{{/i}} <small>{{_i}}Indicators and unread counts{{/i}}</small></h1>
+  </div>
+  <div class="row">
+    <div class="span4">
+      <h3>About</h3>
+      <p>{{_i}}Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.{{/i}}</p>
+    </div><!-- /.span -->
+    <div class="span8">
+      <h3>Available classes</h3>
+      <table class="table table-bordered table-striped">
+        <thead>
+          <tr>
+            <th>{{_i}}Name{{/i}}</th>
+            <th>{{_i}}Example{{/i}}</th>
+            <th>{{_i}}Markup{{/i}}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              {{_i}}Default{{/i}}
+            </td>
+            <td>
+              <span class="badge">1</span>
+            </td>
+            <td>
+              <code>&lt;span class="badge"&gt;1&lt;/span&gt;</code>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              {{_i}}Success{{/i}}
+            </td>
+            <td>
+              <span class="badge badge-success">2</span>
+            </td>
+            <td>
+              <code>&lt;span class="badge badge-success"&gt;2&lt;/span&gt;</code>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              {{_i}}Warning{{/i}}
+            </td>
+            <td>
+              <span class="badge badge-warning">4</span>
+            </td>
+            <td>
+              <code>&lt;span class="badge badge-warning"&gt;4&lt;/span&gt;</code>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              {{_i}}Error{{/i}}
+            </td>
+            <td>
+              <span class="badge badge-error">6</span>
+            </td>
+            <td>
+              <code>&lt;span class="badge badge-error"&gt;1&lt;/span&gt;</code>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              {{_i}}Info{{/i}}
+            </td>
+            <td>
+              <span class="badge badge-info">8</span>
+            </td>
+            <td>
+              <code>&lt;span class="badge badge-info"&gt;8&lt;/span&gt;</code>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              {{_i}}Inverse{{/i}}
+            </td>
+            <td>
+              <span class="badge badge-inverse">10</span>
+            </td>
+            <td>
+              <code>&lt;span class="badge badge-inverse"&gt;10&lt;/span&gt;</code>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div><!-- /.span -->
+  </div><!-- /.row -->
+</section>
+
+
+
 <!-- Typographic components
 ================================================== -->
 <section id="typography">
@@ -1516,11 +1613,6 @@
 &lt;/div&gt;
 </pre>
     </div><!--/span-->
-    <div class="span4" style="display: none;">
-      <h2>{{_i}}Badges{{/i}}</h2>
-      <p>{{_i}}Use a badge on an element for an unread count or as a simple indicator.{{/i}}</p>
-<pre class="prettyprint linenums">&lt;span class="badge"&gt;3&lt;/div&gt;</pre>
-    </div><!--/span-->
     <div class="span4">
       <h2>{{_i}}Close icon{{/i}}</h2>
       <p>{{_i}}Use the generic close icon for dismissing content like modals and alerts.{{/i}}</p>
diff --git a/docs/templates/pages/download.mustache b/docs/templates/pages/download.mustache
index ae995b8a4..618bb3e1e 100644
--- a/docs/templates/pages/download.mustache
+++ b/docs/templates/pages/download.mustache
@@ -32,6 +32,7 @@
       <label class="checkbox"><input checked="checked" type="checkbox" value="type.less"> {{_i}}Headings, body, etc{{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="code.less"> {{_i}}Code and pre{{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="labels.less"> {{_i}}Labels{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="badges.less"> {{_i}}Badges{{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="tables.less"> {{_i}}Tables{{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="forms.less"> {{_i}}Forms{{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="buttons.less"> {{_i}}Buttons{{/i}}</label>