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

5 files changed, 214 insertions, 29 deletions

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index c2c92a251..b218b465c 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -330,6 +330,24 @@ h2 + table {
   position: relative;
 }
 
+/* Icons
+------------------------- */
+.the-icons {
+  
+}
+.the-icons i {
+  display: block;
+  margin-bottom: 5px;
+  background-color: rgba(255,0,0,.25);
+}
+.the-icons i:after {
+  display: block;
+  content: attr(class);
+  font-style: normal;
+  margin-left: 20px;
+  width: 100px;
+}
+
 
 /* Responsive Docs
 -------------------------------------------------- */
diff --git a/docs/assets/img/glyphicons-halflings-sprite.png b/docs/assets/img/glyphicons-halflings-sprite.png
new file mode 100644
index 000000000..525acee6d
--- /dev/null
+++ b/docs/assets/img/glyphicons-halflings-sprite.png
diff --git a/docs/assets/js/google-code-prettify/prettify.css b/docs/assets/js/google-code-prettify/prettify.css
index da6b6e7e1..7ff618550 100644
--- a/docs/assets/js/google-code-prettify/prettify.css
+++ b/docs/assets/js/google-code-prettify/prettify.css
@@ -2,40 +2,23 @@
 .lit { color: #195f91; }
 .pun, .opn, .clo { color: #93a1a1; }
 .fun { color: #dc322f; }
-.str, .atv { color: #268bd2; }
-.kwd, .tag { color: #195f91; }
-.typ, .atn, .dec, .var { color: #CB4B16; }
+.str, .atv { color: #62C462; }
+.kwd, .linenums .tag { color: #049CD9; }
+.typ, .atn, .dec, .var { color: #EE5F5B; }
 .pln { color: #93a1a1; }
 pre.prettyprint {
-  background: #fefbf3;
+  background-color: #fefbf3;
   padding: 9px;
-  border: 1px solid rgba(0,0,0,.2);
-  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1);
-  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.1);
-  box-shadow: 0 1px 2px rgba(0,0,0,.1);
+  margin-bottom: 9px;
+}
+
+pre.prettyprint {
+  color: #ccc;
+  background-color: #252525;
 }
 
 /* Specify class=linenums on a pre to get line numbering */
 ol.linenums { margin: 0 0 0 40px; } /* IE indents via margin-left */
-ol.linenums li { color: rgba(0,0,0,.15); line-height: 20px; }
+ol.linenums li { color: #444; line-height: 18px; }
 /* Alternate shading for lines */
-li.L1, li.L3, li.L5, li.L7, li.L9 {  }
-
-/*
-$base03:    #002b36;
-$base02:    #073642;
-$base01:    #586e75;
-$base00:    #657b83;
-$base0:     #839496;
-$base1:     #93a1a1;
-$base2:     #eee8d5;
-$base3:     #fdf6e3;
-$yellow:    #b58900;
-$orange:    #cb4b16;
-$red:       #dc322f;
-$magenta:   #d33682;
-$violet:    #6c71c4;
-$blue:      #268bd2;
-$cyan:      #2aa198;
-$green:     #859900;
-*/
\ No newline at end of file
+li.L1, li.L3, li.L5, li.L7, li.L9 {  }
\ No newline at end of file
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">
diff --git a/docs/components.html b/docs/components.html
index fbfa9fb31..d9d6b10d6 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -223,6 +223,38 @@
 
 
 
+<!-- Side nav
+================================================== -->
+<section id="sidenav">
+  <div class="page-header">
+    <h1>Side nav <small></small></h1>
+  </div>
+
+  <div class="well side-nav">
+    <h6 class="nav-label">Your account</h6>
+    <ul class="nav-group">
+      <li class="active"><a class="nav-item" href="#">Home</a></li>
+      <li><a class="nav-item" href="#">Library</a></li>
+      <li><a class="nav-item" href="#">Profile</a></li>
+      <li><a class="nav-item" href="#">Settings</a></li>
+      <li><a class="nav-item" href="#">Help</a></li>
+    </ul>
+  </div>
+
+  <div class="well side-nav">
+    <h6 class="nav-label">Your account</h6>
+    <ul class="nav-group">
+      <li class="active"><a class="nav-item" href="#"><i class="home"></i> Home</a></li>
+      <li><a class="nav-item" href="#"><i class="book"></i> Library</a></li>
+      <li><a class="nav-item" href="#"><i class="user"></i> Profile</a></li>
+      <li><a class="nav-item" href="#"><i class="cog"></i> Settings</a></li>
+      <li><a class="nav-item" href="#"><i class="time"></i> Help</a></li>
+    </ul>
+  </div>
+</section>
+
+
+
 <!-- Navbar
 ================================================== -->
 <section id="navbar">