tweaks abound, updated prettify styles, new sidenav component started, sprite icons started

1 files changed, 152 insertions, 0 deletions

diff --git a/docs/base-css.html b/docs/base-css.html
index 2bc6f49fb..c07263495 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1175,6 +1175,158 @@ Form states
 </section>
 
 
+
+<!-- Icons
+================================================== -->
+<section id="icons">
+  <div class="page-header">
+    <h1>Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1>
+  </div>
+  <div class="row">
+    <div class="span2">
+      <div class="the-icons">
+        <i class="glass"></i>
+        <i class="music"></i>
+        <i class="search"></i>
+        <i class="envelope"></i>
+        <i class="heart"></i>
+        <i class="star"></i>
+        <i class="star-empty"></i>
+        <i class="user"></i>
+        <i class="film"></i>
+        <i class="th-large"></i>
+        <i class="th"></i>
+        <i class="th-list"></i>
+        <i class="ok"></i>
+        <i class="remove"></i>
+        <i class="zoom-in"></i>
+        <i class="zoom-out"></i>
+        <i class="off"></i>
+        <i class="signal"></i>
+        <i class="cog"></i>
+        <i class="trash"></i>
+      </div>
+    </div>
+    <div class="span2">
+      <div class="the-icons">
+        <i class="home"></i>
+        <i class="file"></i>
+        <i class="time"></i>
+        <i class="road"></i>
+        <i class="download-alt"></i>
+        <i class="download"></i>
+        <i class="upload"></i>
+        <i class="inbox"></i>
+        <i class="play-circle"></i>
+        <i class="repeat"></i>
+        <i class="refresh"></i>
+        <i class="calendar"></i>
+        <i class="lock"></i>
+        <i class="flag"></i>
+        <i class="headphones"></i>
+        <i class="volume-off"></i>
+        <i class="volume-down"></i>
+        <i class="volume-up"></i>
+        <i class="qrcode"></i>
+        <i class="barcode"></i>
+      </div>
+    </div>
+    <div class="span2">
+      <div class="the-icons">
+        <i class="tag"></i>
+        <i class="tags"></i>
+        <i class="book"></i>
+        <i class="bookmark"></i>
+        <i class="print"></i>
+        <i class="camera"></i>
+        <i class="font"></i>
+        <i class="bold"></i>
+        <i class="italic"></i>
+        <i class="text-height"></i>
+        <i class="text-width"></i>
+        <i class="align-left"></i>
+        <i class="align-center"></i>
+        <i class="align-right"></i>
+        <i class="align-justify"></i>
+        <i class="list"></i>
+        <i class="indent-left"></i>
+        <i class="indent-right"></i>
+        <i class="facetime-video"></i>
+        <i class="picture"></i>
+      </div>
+    </div>
+    <div class="span2">
+      <div class="the-icons">
+        <i class="pencil"></i>
+        <i class="map-marker"></i>
+        <i class="adjust"></i>
+        <i class="tint"></i>
+        <i class="edit"></i>
+        <i class="share"></i>
+        <i class="check"></i>
+        <i class="move"></i>
+        <i class="step-backward"></i>
+        <i class="fast-backward"></i>
+        <i class="backward"></i>
+        <i class="play"></i>
+        <i class="pause"></i>
+        <i class="stop"></i>
+        <i class="forward"></i>
+        <i class="fast-forward"></i>
+        <i class="step-foward"></i>
+        <i class="eject"></i>
+        <i class="chevron-left"></i>
+        <i class="chevron-right"></i>
+      </div>
+    </div>
+    <div class="span2">
+      <div class="the-icons">
+        <i class="arrow-left"></i>
+        <i class="arrow-right"></i>
+        <i class="arrow-up"></i>
+        <i class="arrow-down"></i>
+        <i class="share"></i>
+        <i class="resize-full"></i>
+        <i class="resize-small"></i>
+        <i class="plus"></i>
+        <i class="minus"></i>
+        <i class="asterisk"></i>
+      </div>
+    </div>
+  </div>
+
+  <br>
+
+  <div class="row">
+    <div class="span4">
+      <h3>Built as a sprite</h3>
+      <p>Instead of making every icon an extra request, we've compiled them into a sprite&mdash;a bunch of images in one file that uses CSS to position the images with <code>background-position</code>. This is the same method we use on Twitter.com and it has worked well for us.</p>
+      <p><a href="http://glyphicons.com" target="_blank">Glyphicons</a> has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit. Please consider doing the same in your projects.</p>
+    </div>
+    <div class="span4">
+      <h3>How to use</h3>
+      <p>With v2.0.0, the <code>&lt;i&gt;</code> tag is essentially dedicated to iconography. To use the icons, you can place the follow code wherever you like one to appear:</p>
+<pre class="prettyprint">
+&lt;i class="chevron-left"&gt;&lt;/i&gt;
+</pre>
+      <p>There are over 100 classes to choose from for your icons. Just add an <code>&lt;i&gt;</code> tag with the right class and you're set. You can find the full list in sprites.less or right here in this document.</p>
+    </div>
+    <div class="span4">
+      <h3>Use cases</h3>
+      <p>Icons are great, but where would one use them? Here are a few ideas:</p>
+      <ul>
+        <li>As visuals for your sidebar navigation</li>
+        <li>For a purely icon-driven nav</li>
+        <li>For buttons to help convey the meaning of an action</li>
+        <li>With links to share context on a user's destination</li>
+      </ul>
+      <p>Essentially, anywhere you can put an <code>&lt;i&gt;</code> tag, you can put an icon.</p>
+    </div>
+  </div>
+</section>
+
+
+
       <!-- Footer
       ================================================== -->
       <footer class="footer">