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

fb9401b3 · Mark Otto · 553030ca · fb9401b3 · fb9401b3 · fb9401b3
Commit fb9401b3 authored 13 years ago by Mark Otto
Hide whitespace changes
Inline Side-by-side

Showing

with 809 additions and 33 deletions
+809 -33
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,7 +6,7 @@
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Fri Dec 30 16:01:05 PST 2011
+ * Date: Thu Jan  5 01:33:17 PST 2012
 */
 html, body {
  margin: 0;
@@ -401,7 +401,7 @@ h6 {
  text-transform: uppercase;
 }
 ul, ol {
-  margin: 0 0 9px 25px;
+  margin: 13px 0 14px 25px;
 }
 ul ul,
 ul ol,
@@ -1025,6 +1025,9 @@ td {
 .bordered-table td + th {
  border-left: 1px solid #ddd;
 }
+.bordered-table thead:first-child tr:first-child th, .bordered-table tbody:first-child tr:first-child td {
+  border-top: 0;
+}
 .bordered-table thead:first-child tr:first-child th:first-child, .bordered-table tbody:first-child tr:first-child td:first-child {
  -webkit-border-radius: 4px 0 0 0;
  -moz-border-radius: 4px 0 0 0;
@@ -1820,6 +1823,285 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
 .label.notice {
  background-color: #62cffc;
 }
+i {
+  background-image: url(docs/assets/img/glyphicons-halflings-sprite.png);
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  display: inline-block;
+  vertical-align: text-top;
+  width: 14px;
+  height: 14px;
+}
+.glass {
+  background-position: 0      0;
+}
+.music {
+  background-position: -24px 0;
+}
+.search {
+  background-position: -48px 0;
+}
+.envelope {
+  background-position: -72px 0;
+}
+.heart {
+  background-position: -96px 0;
+}
+.star {
+  background-position: -120px 0;
+}
+.star-empty {
+  background-position: -144px 0;
+}
+.user {
+  background-position: -168px 0;
+}
+.film {
+  background-position: -192px 0;
+}
+.th-large {
+  background-position: -216px 0;
+}
+.th {
+  background-position: -240px 0;
+}
+.th-lines {
+  background-position: -264px 0;
+}
+.ok {
+  background-position: -288px 0;
+}
+.remove {
+  background-position: -312px 0;
+}
+.zoom-in {
+  background-position: -336px 0;
+}
+.zoom-out {
+  background-position: -360px 0;
+}
+.off {
+  background-position: -384px 0;
+}
+.signal {
+  background-position: -408px 0;
+}
+.cog {
+  background-position: -432px 0;
+}
+.trash {
+  background-position: -456px 0;
+}
+.home {
+  background-position: 0 -24px;
+}
+.file {
+  background-position: -24px -24px;
+}
+.time {
+  background-position: -48px -24px;
+}
+.road {
+  background-position: -72px -24px;
+}
+.download-alt {
+  background-position: -96px -24px;
+}
+.download {
+  background-position: -120px -24px;
+}
+.upload {
+  background-position: -144px -24px;
+}
+.inbox {
+  background-position: -168px -24px;
+}
+.play-circle {
+  background-position: -192px -24px;
+}
+.repeat {
+  background-position: -216px -24px;
+}
+.refresh {
+  background-position: -240px -24px;
+}
+.calendar {
+  background-position: -264px -24px;
+}
+.lock {
+  background-position: -288px -24px;
+}
+.flag {
+  background-position: -312px -24px;
+}
+.headphones {
+  background-position: -336px -24px;
+}
+.volume-off {
+  background-position: -360px -24px;
+}
+.volume-down {
+  background-position: -384px -24px;
+}
+.volume-up {
+  background-position: -408px -24px;
+}
+.qrcode {
+  background-position: -432px -24px;
+}
+.barcode {
+  background-position: -456px -24px;
+}
+.tag {
+  background-position: 0 -48px;
+}
+.tags {
+  background-position: -24px -48px;
+}
+.book {
+  background-position: -48px -48px;
+}
+.bookmark {
+  background-position: -72px -48px;
+}
+.print {
+  background-position: -96px -48px;
+}
+.camera {
+  background-position: -120px -48px;
+}
+.font {
+  background-position: -144px -48px;
+}
+.bold {
+  background-position: -168px -48px;
+}
+.italic {
+  background-position: -192px -48px;
+}
+.text-height {
+  background-position: -216px -48px;
+}
+.text-width {
+  background-position: -240px -48px;
+}
+.align-left {
+  background-position: -264px -48px;
+}
+.align-center {
+  background-position: -288px -48px;
+}
+.align-right {
+  background-position: -312px -48px;
+}
+.align-justify {
+  background-position: -336px -48px;
+}
+.list {
+  background-position: -360px -48px;
+}
+.indent-left {
+  background-position: -384px -48px;
+}
+.indent-right {
+  background-position: -408px -48px;
+}
+.facetime-video {
+  background-position: -432px -48px;
+}
+.picture {
+  background-position: -456px -48px;
+}
+.pencil {
+  background-position: 0 -72px;
+}
+.map-marker {
+  background-position: -24px -72px;
+}
+.adjust {
+  background-position: -48px -72px;
+}
+.tint {
+  background-position: -72px -72px;
+}
+.edit {
+  background-position: -96px -72px;
+}
+.share {
+  background-position: -120px -72px;
+}
+.check {
+  background-position: -144px -72px;
+}
+.move {
+  background-position: -168px -72px;
+}
+.step-backward {
+  background-position: -192px -72px;
+}
+.fast-backward {
+  background-position: -216px -72px;
+}
+.backward {
+  background-position: -240px -72px;
+}
+.play {
+  background-position: -264px -72px;
+}
+.pause {
+  background-position: -288px -72px;
+}
+.stop {
+  background-position: -312px -72px;
+}
+.forward {
+  background-position: -336px -72px;
+}
+.fast-forward {
+  background-position: -360px -72px;
+}
+.step-forward {
+  background-position: -384px -72px;
+}
+.eject {
+  background-position: -408px -72px;
+}
+.chevron-left {
+  background-position: -432px -72px;
+}
+.chevron-right {
+  background-position: -456px -72px;
+}
+.arrow-left {
+  background-position: -240px -96px;
+}
+.arrow-right {
+  background-position: -264px -96px;
+}
+.arrow-up {
+  background-position: -288px -96px;
+}
+.arrow-down {
+  background-position: -312px -96px;
+}
+.share {
+  background-position: -336px -96px;
+}
+.resize-full {
+  background-position: -360px -96px;
+}
+.resize-small {
+  background-position: -384px -96px;
+}
+.plus {
+  background-position: -408px -96px;
+}
+.minus {
+  background-position: -432px -96px;
+}
+.asterisk {
+  background-position: -456px -96px;
+}
 .dropdown {
  position: relative;
 }
@@ -2538,6 +2820,50 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
 .popover .content p, .popover .content ul, .popover .content ol {
  margin-bottom: 0;
 }
+.side-nav {
+  padding: 9px 0;
+}
+.side-nav .nav-label, .side-nav .nav-item {
+  display: block;
+  padding: 3px 16px;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+}
+.side-nav .nav-label {
+  font-size: 11px;
+  line-height: 18px;
+  color: #404040;
+  text-transform: uppercase;
+}
+.side-nav .nav-group {
+  margin: 0 -1px;
+  list-style: none;
+}
+.side-nav .nav-item {
+  font-weight: bold;
+}
+.side-nav .nav-item i {
+  vertical-align: -2px;
+}
+.side-nav .nav-item:hover {
+  text-decoration: none;
+}
+.side-nav .active .nav-item {
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
+  background-color: #aaaaaa;
+  background-image: -khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#aaaaaa));
+  background-image: -moz-linear-gradient(top, #cccccc, #aaaaaa);
+  background-image: -ms-linear-gradient(top, #cccccc, #aaaaaa);
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #aaaaaa));
+  background-image: -webkit-linear-gradient(top, #cccccc, #aaaaaa);
+  background-image: -o-linear-gradient(top, #cccccc, #aaaaaa);
+  background-image: linear-gradient(top, #cccccc, #aaaaaa);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#aaaaaa', GradientType=0);
+  -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
+}
 .thumbnails {
  margin-left: -20px;
  margin-bottom: 0;

--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -69,7 +69,7 @@ h3{line-height:27px;font-size:18px;}h3 small{font-size:14px;}
 h4{font-size:16px;line-height:36px;}h4 small{font-size:12px;}
 h5{font-size:14px;line-height:18px;}
 h6{font-size:13px;line-height:18px;color:#bfbfbf;text-transform:uppercase;}
-ul,ol{margin:0 0 9px 25px;}
+ul,ol{margin:13px 0 14px 25px;}
 ul ul,ul ol,ol ol,ol ul{margin-bottom:0;}
 ul{list-style:disc;}
 ol{list-style:decimal;}
@@ -167,6 +167,7 @@ th{font-weight:bold;vertical-align:bottom;}
 td{vertical-align:top;}
 .condensed-table th,.condensed-table td{padding:4px 5px;}
 .bordered-table{border:1px solid #ddd;border-collapse:separate;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.bordered-table th+th,.bordered-table td+td,.bordered-table th+td,.bordered-table td+th{border-left:1px solid #ddd;}
+.bordered-table thead:first-child tr:first-child th,.bordered-table tbody:first-child tr:first-child td{border-top:0;}
 .bordered-table thead:first-child tr:first-child th:first-child,.bordered-table tbody:first-child tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;}
 .bordered-table thead:first-child tr:first-child th:last-child,.bordered-table tbody:first-child tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;}
 .bordered-table thead:last-child tr:last-child th:first-child,.bordered-table tbody:last-child tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;}
@@ -246,6 +247,97 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
 .label.warning{background-color:#f89406;}
 .label.success{background-color:#46a546;}
 .label.notice{background-color:#62cffc;}
+i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);background-position:0 0;background-repeat:no-repeat;display:inline-block;vertical-align:text-top;width:14px;height:14px;}
+.glass{background-position:0 0;}
+.music{background-position:-24px 0;}
+.search{background-position:-48px 0;}
+.envelope{background-position:-72px 0;}
+.heart{background-position:-96px 0;}
+.star{background-position:-120px 0;}
+.star-empty{background-position:-144px 0;}
+.user{background-position:-168px 0;}
+.film{background-position:-192px 0;}
+.th-large{background-position:-216px 0;}
+.th{background-position:-240px 0;}
+.th-lines{background-position:-264px 0;}
+.ok{background-position:-288px 0;}
+.remove{background-position:-312px 0;}
+.zoom-in{background-position:-336px 0;}
+.zoom-out{background-position:-360px 0;}
+.off{background-position:-384px 0;}
+.signal{background-position:-408px 0;}
+.cog{background-position:-432px 0;}
+.trash{background-position:-456px 0;}
+.home{background-position:0 -24px;}
+.file{background-position:-24px -24px;}
+.time{background-position:-48px -24px;}
+.road{background-position:-72px -24px;}
+.download-alt{background-position:-96px -24px;}
+.download{background-position:-120px -24px;}
+.upload{background-position:-144px -24px;}
+.inbox{background-position:-168px -24px;}
+.play-circle{background-position:-192px -24px;}
+.repeat{background-position:-216px -24px;}
+.refresh{background-position:-240px -24px;}
+.calendar{background-position:-264px -24px;}
+.lock{background-position:-288px -24px;}
+.flag{background-position:-312px -24px;}
+.headphones{background-position:-336px -24px;}
+.volume-off{background-position:-360px -24px;}
+.volume-down{background-position:-384px -24px;}
+.volume-up{background-position:-408px -24px;}
+.qrcode{background-position:-432px -24px;}
+.barcode{background-position:-456px -24px;}
+.tag{background-position:0 -48px;}
+.tags{background-position:-24px -48px;}
+.book{background-position:-48px -48px;}
+.bookmark{background-position:-72px -48px;}
+.print{background-position:-96px -48px;}
+.camera{background-position:-120px -48px;}
+.font{background-position:-144px -48px;}
+.bold{background-position:-168px -48px;}
+.italic{background-position:-192px -48px;}
+.text-height{background-position:-216px -48px;}
+.text-width{background-position:-240px -48px;}
+.align-left{background-position:-264px -48px;}
+.align-center{background-position:-288px -48px;}
+.align-right{background-position:-312px -48px;}
+.align-justify{background-position:-336px -48px;}
+.list{background-position:-360px -48px;}
+.indent-left{background-position:-384px -48px;}
+.indent-right{background-position:-408px -48px;}
+.facetime-video{background-position:-432px -48px;}
+.picture{background-position:-456px -48px;}
+.pencil{background-position:0 -72px;}
+.map-marker{background-position:-24px -72px;}
+.adjust{background-position:-48px -72px;}
+.tint{background-position:-72px -72px;}
+.edit{background-position:-96px -72px;}
+.share{background-position:-120px -72px;}
+.check{background-position:-144px -72px;}
+.move{background-position:-168px -72px;}
+.step-backward{background-position:-192px -72px;}
+.fast-backward{background-position:-216px -72px;}
+.backward{background-position:-240px -72px;}
+.play{background-position:-264px -72px;}
+.pause{background-position:-288px -72px;}
+.stop{background-position:-312px -72px;}
+.forward{background-position:-336px -72px;}
+.fast-forward{background-position:-360px -72px;}
+.step-forward{background-position:-384px -72px;}
+.eject{background-position:-408px -72px;}
+.chevron-left{background-position:-432px -72px;}
+.chevron-right{background-position:-456px -72px;}
+.arrow-left{background-position:-240px -96px;}
+.arrow-right{background-position:-264px -96px;}
+.arrow-up{background-position:-288px -96px;}
+.arrow-down{background-position:-312px -96px;}
+.share{background-position:-336px -96px;}
+.resize-full{background-position:-360px -96px;}
+.resize-small{background-position:-384px -96px;}
+.plus{background-position:-408px -96px;}
+.minus{background-position:-432px -96px;}
+.asterisk{background-position:-456px -96px;}
 .dropdown{position:relative;}
 .dropdown-toggle:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;content:"&darr;";}
 .dropdown:hover .dropdown-toggle:after{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
@@ -335,6 +427,14 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
 .popover .inner{padding:3px;width:280px;overflow:hidden;background-color:#000000;background-color:rgba(0, 0, 0, 0.8);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);}
 .popover .title{padding:9px 15px;line-height:1;background-color:#f5f5f5;border-bottom:1px solid #eee;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;}
 .popover .content{padding:14px;background-color:#ffffff;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;}
+.side-nav{padding:9px 0;}
+.side-nav .nav-label,.side-nav .nav-item{display:block;padding:3px 16px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}
+.side-nav .nav-label{font-size:11px;line-height:18px;color:#404040;text-transform:uppercase;}
+.side-nav .nav-group{margin:0 -1px;list-style:none;}
+.side-nav .nav-item{font-weight:bold;}
+.side-nav .nav-item i{vertical-align:-2px;}
+.side-nav .nav-item:hover{text-decoration:none;}
+.side-nav .active .nav-item{color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);background-color:#aaaaaa;background-image:-khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#aaaaaa));background-image:-moz-linear-gradient(top, #cccccc, #aaaaaa);background-image:-ms-linear-gradient(top, #cccccc, #aaaaaa);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #aaaaaa));background-image:-webkit-linear-gradient(top, #cccccc, #aaaaaa);background-image:-o-linear-gradient(top, #cccccc, #aaaaaa);background-image:linear-gradient(top, #cccccc, #aaaaaa);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#aaaaaa', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);}
 .thumbnails{margin-left:-20px;margin-bottom:0;list-style:none;zoom:1;}.thumbnails:before,.thumbnails:after{display:table;*display:inline;content:"";zoom:1;}
 .thumbnails:after{clear:both;}
 .thumbnails>li{float:left;margin:0 0 20px 20px;}

--- 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
 -------------------------------------------------- */

--- a/docs/assets/img/glyphicons-halflings-sprite.png
+++ b/docs/assets/img/glyphicons-halflings-sprite.png
--- 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; }
+.str, .atv { color: #62C462; }
-.kwd, .tag { color: #195f91; }
+.kwd, .linenums .tag { color: #049CD9; }
-.typ, .atn, .dec, .var { color: #CB4B16; }
+.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);
+  margin-bottom: 9px;
-  -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);
+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 {  }
\ No newline at end of file
-/*
-$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
--- 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">

--- 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">

--- a/lib/bootstrap.less
+++ b/lib/bootstrap.less
@@ -27,6 +27,7 @@
 // Temp catchall for what's missing thus far
 @import "patterns.less";
+@import "sprites.less";
 @import "dropdowns.less";
 @import "tabs-pills.less";
 @import "breadcrumbs.less";
@@ -34,6 +35,7 @@
 @import "modals.less";
 @import "twipsy.less";
 @import "popovers.less";
+@import "sidenav.less";
 @import "thumbnails.less";
 // Responsive

--- a/lib/sidenav.less
+++ b/lib/sidenav.less
+// SIDE NAV
+// --------
+.side-nav {
+  padding: @baseLineHeight / 2 0;
+}
+.side-nav .nav-label,
+.side-nav .nav-item {
+  display: block;
+  padding: 3px 16px;
+  text-shadow: 0 1px 0 rgba(255,255,255,.5);
+}
+.side-nav .nav-label {
+  font-size: 11px;
+  line-height: @baseLineHeight;
+  color: @grayDark;
+  text-transform: uppercase;
+}
+.side-nav .nav-group {
+  margin: 0 -1px;
+  list-style: none;
+}
+.side-nav .nav-item {
+  font-weight: bold;
+}
+.side-nav .nav-item i {
+  vertical-align: -2px;
+}
+.side-nav .nav-item:hover {
+  text-decoration: none;
+}
+.side-nav .active .nav-item {
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0,0,0,.3);
+  #gradient > .vertical(#ccc, #aaa);
+  @shadow: inset 0 1px 0 rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.05);
+  .box-shadow(@shadow);
+}
\ No newline at end of file
--- a/lib/sprites.less
+++ b/lib/sprites.less
+// SPRITES
+// Glyphs and icons for buttons, nav, and more
+// -------------------------------------------
+// ICONS
+// -----
+// As of v2.0.0, the <i> tag is reserved for icons from the Glyphicons set.
+// All icons receive the styles of the <i> tag and are then given a unique
+// class to add width, height, and background-position. Your resulting HTML
+// will look like <i class="inbox"></i>.
+i {
+  background-image: url(docs/assets/img/glyphicons-halflings-sprite.png);
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  display: inline-block;
+  vertical-align: text-top;
+  width: 14px;
+  height: 14px;
+}
+.glass              { background-position: 0      0; }
+.music              { background-position: -24px  0; }
+.search             { background-position: -48px  0; }
+.envelope           { background-position: -72px  0; }
+.heart              { background-position: -96px  0; }
+.star               { background-position: -120px 0; }
+.star-empty         { background-position: -144px 0; }
+.user               { background-position: -168px 0; }
+.film               { background-position: -192px 0; }
+.th-large           { background-position: -216px 0; }
+.th                 { background-position: -240px 0; }
+.th-lines           { background-position: -264px 0; }
+.ok                 { background-position: -288px 0; }
+.remove             { background-position: -312px 0; }
+.zoom-in            { background-position: -336px 0; }
+.zoom-out           { background-position: -360px 0; }
+.off                { background-position: -384px 0; }
+.signal             { background-position: -408px 0; }
+.cog                { background-position: -432px 0; }
+.trash              { background-position: -456px 0; }
+.home               { background-position: 0      -24px; }
+.file               { background-position: -24px  -24px; }
+.time               { background-position: -48px  -24px; }
+.road               { background-position: -72px  -24px; }
+.download-alt       { background-position: -96px  -24px; }
+.download           { background-position: -120px -24px; }
+.upload             { background-position: -144px -24px; }
+.inbox              { background-position: -168px -24px; }
+.play-circle        { background-position: -192px -24px; }
+.repeat             { background-position: -216px -24px; }
+.refresh            { background-position: -240px -24px; }
+.calendar           { background-position: -264px -24px; }
+.lock               { background-position: -288px -24px; }
+.flag               { background-position: -312px -24px; }
+.headphones         { background-position: -336px -24px; }
+.volume-off         { background-position: -360px -24px; }
+.volume-down        { background-position: -384px -24px; }
+.volume-up          { background-position: -408px -24px; }
+.qrcode             { background-position: -432px -24px; }
+.barcode            { background-position: -456px -24px; }
+.tag                { background-position: 0      -48px; }
+.tags               { background-position: -24px  -48px; }
+.book               { background-position: -48px  -48px; }
+.bookmark           { background-position: -72px  -48px; }
+.print              { background-position: -96px  -48px; }
+.camera             { background-position: -120px -48px; }
+.font               { background-position: -144px -48px; }
+.bold               { background-position: -168px -48px; }
+.italic             { background-position: -192px -48px; }
+.text-height        { background-position: -216px -48px; }
+.text-width         { background-position: -240px -48px; }
+.align-left         { background-position: -264px -48px; }
+.align-center       { background-position: -288px -48px; }
+.align-right        { background-position: -312px -48px; }
+.align-justify      { background-position: -336px -48px; }
+.list               { background-position: -360px -48px; }
+.indent-left        { background-position: -384px -48px; }
+.indent-right       { background-position: -408px -48px; }
+.facetime-video     { background-position: -432px -48px; }
+.picture            { background-position: -456px -48px; }
+.pencil             { background-position: 0      -72px; }
+.map-marker         { background-position: -24px  -72px; }
+.adjust             { background-position: -48px  -72px; }
+.tint               { background-position: -72px  -72px; }
+.edit               { background-position: -96px  -72px; }
+.share              { background-position: -120px -72px; }
+.check              { background-position: -144px -72px; }
+.move               { background-position: -168px -72px; }
+.step-backward      { background-position: -192px -72px; }
+.fast-backward      { background-position: -216px -72px; }
+.backward           { background-position: -240px -72px; }
+.play               { background-position: -264px -72px; }
+.pause              { background-position: -288px -72px; }
+.stop               { background-position: -312px -72px; }
+.forward            { background-position: -336px -72px; }
+.fast-forward       { background-position: -360px -72px; }
+.step-forward       { background-position: -384px -72px; }
+.eject              { background-position: -408px -72px; }
+.chevron-left       { background-position: -432px -72px; }
+.chevron-right      { background-position: -456px -72px; }
+.arrow-left         { background-position: -240px -96px; }
+.arrow-right        { background-position: -264px -96px; }
+.arrow-up           { background-position: -288px -96px; }
+.arrow-down         { background-position: -312px -96px; }
+.share              { background-position: -336px -96px; }
+.resize-full        { background-position: -360px -96px; }
+.resize-small       { background-position: -384px -96px; }
+.plus               { background-position: -408px -96px; }
+.minus              { background-position: -432px -96px; }
+.asterisk           { background-position: -456px -96px; }
--- a/lib/tables.less
+++ b/lib/tables.less
@@ -52,6 +52,11 @@ td {
  td + th {
    border-left: 1px solid #ddd;
  }
+  // Prevent a double border
+  thead:first-child tr:first-child th,
+  tbody:first-child tr:first-child td {
+    border-top: 0;
+  }
  // For first th or td in the first row in the first thead or tbody
  thead:first-child tr:first-child th:first-child,
  tbody:first-child tr:first-child td:first-child {

--- a/lib/type.less
+++ b/lib/type.less
@@ -74,7 +74,7 @@ h6 {
 // Unordered and Ordered lists
 ul, ol {
-  margin: 0 0 @baseLineHeight / 2 25px;
+  margin: 13px 0 14px 25px;
 }
 ul ul,
 ul ol,