diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 8ede6dabbc..9477775f63 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2688,6 +2688,77 @@ button.close {
   background-color: #eeeeee;
 }
 
+.nav > .pull-right {
+  float: right;
+}
+
+.nav-tabs {
+  border-bottom: 1px solid #ddd;
+}
+
+.nav-tabs > li {
+  float: left;
+  margin-bottom: -1px;
+}
+
+.nav-tabs > li > a {
+  margin-right: 2px;
+  line-height: 20px;
+  border: 1px solid transparent;
+  border-radius: 4px 4px 0 0;
+}
+
+.nav-tabs > li > a:hover {
+  border-color: #eeeeee #eeeeee #dddddd;
+}
+
+.nav-tabs > .active > a,
+.nav-tabs > .active > a:hover {
+  color: #555555;
+  cursor: default;
+  background-color: #ffffff;
+  border: 1px solid #ddd;
+  border-bottom-color: transparent;
+}
+
+.nav-pills > li {
+  float: left;
+}
+
+.nav-pills > li > a {
+  border-radius: 5px;
+}
+
+.nav-pills > li + li > a {
+  margin-left: 2px;
+}
+
+.nav-pills > .active > a,
+.nav-pills > .active > a:hover {
+  color: #fff;
+  background-color: #428bca;
+}
+
+.nav-stacked > li {
+  float: none;
+}
+
+.nav-stacked > li + li > a {
+  margin-top: 2px;
+  margin-left: 0;
+}
+
+.nav-justified {
+  max-height: 40px;
+}
+
+.nav-justified > li {
+  display: table-cell;
+  float: none;
+  width: 1%;
+  text-align: center;
+}
+
 .nav-list > li > a {
   margin-bottom: -1px;
   border: 1px solid #e5e5e5;
@@ -2711,6 +2782,39 @@ button.close {
   border-color: #428bca;
 }
 
+.nav > .disabled > a {
+  color: #999999;
+}
+
+.nav > .disabled > a:hover {
+  text-decoration: none;
+  cursor: default;
+  background-color: transparent;
+}
+
+.nav-header {
+  display: block;
+  padding: 3px 15px;
+  font-size: 11px;
+  font-weight: bold;
+  line-height: 20px;
+  color: #999999;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  text-transform: uppercase;
+}
+
+.nav li + .nav-header {
+  margin-top: 9px;
+}
+
+.nav .divider {
+  height: 1px;
+  margin: 9px 1px;
+  overflow: hidden;
+  background-color: #e5e5e5;
+  border-bottom: 1px solid #ffffff;
+}
+
 /*
 // Prevent IE8 from misplacing imgs
 // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
@@ -2718,150 +2822,6 @@ button.close {
   max-width: none;
 }
 
-// Redeclare pull classes because of specifity
-.nav > .pull-right {
-  float: right;
-}
-
-// Nav headers (for dropdowns and lists)
-.nav-header {
-  display: block;
-  padding: 3px 15px;
-  font-size: 11px;
-  font-weight: bold;
-  line-height: @line-height-base;
-  color: @grayLight;
-  text-shadow: 0 1px 0 rgba(255,255,255,.5);
-  text-transform: uppercase;
-}
-// Space them out when they follow another list item (link)
-.nav li + .nav-header {
-  margin-top: 9px;
-}
-
-// Dividers (basically an hr) within the dropdown
-.nav .divider {
-  .nav-divider();
-}
-*/
-
-/*
-// Tabs
-// -------------------------
-
-// Give the tabs something to sit on
-.nav-tabs {
-  border-bottom: 1px solid #ddd;
-}
-// Make the list-items overlay the bottom border
-.nav-tabs > li {
-  margin-bottom: -1px;
-}
-// Actual tabs (as links)
-.nav-tabs > li > a {
-  margin-right: 2px;
-  line-height: @line-height-base;
-  border: 1px solid transparent;
-  border-radius: @border-radius-base @border-radius-base 0 0;
-  &:hover {
-    border-color: @grayLighter @grayLighter #ddd;
-  }
-}
-// Active state, and it's :hover to override normal :hover
-.nav-tabs > .active > a,
-.nav-tabs > .active > a:hover {
-  color: @gray;
-  background-color: @body-background;
-  border: 1px solid #ddd;
-  border-bottom-color: transparent;
-  cursor: default;
-}
-
-
-
-// Pills
-// -------------------------
-
-// Links rendered as pills
-.nav-pills > li > a {
-  border-radius: 5px;
-}
-.nav-pills > li + li > a {
-  margin-left: 2px;
-}
-
-// Active state
-.nav-pills > .active > a,
-.nav-pills > .active > a:hover {
-  color: #fff;
-  background-color: @link-color;
-}
-
-// Stacked pills
-.nav-stacked > li {
-  float: none;
-}
-.nav-stacked > li + li > a {
-  margin-top: 2px;
-  margin-left: 0; // no need for the gap between nav items
-}
-
-
-
-// Justified navs
-// -------------------------
-
-.nav-justified {
-  // Negative margin doesn't work, so we hack it
-  max-height: 37px;
-}
-.nav-justified > li {
-  float: none;
-  display: table-cell;
-  width: 1%;
-  text-align: center;
-}
-
-
-
-// Lists
-// -------------------------
-
-.nav-list {
-  background-color: #fff;
-  border-radius: 6px;
-  .box-shadow(0 1px 4px rgba(0,0,0,.065))
-}
-.nav-list > li {
-  float: none;
-}
-.nav-list > li > a {
-  margin-bottom: -1px; // pull up the following link for a 1px border between
-  border: 1px solid #e5e5e5;
-}
-.nav-list > li > a:hover {
-  background-color: #f5f5f5;
-}
-.nav-list > li:first-child > a {
-  border-radius: 6px 6px 0 0;
-}
-.nav-list > li:last-child > a {
-  border-radius: 0 0 6px 6px;
-}
-.nav-list > .active > a,
-.nav-list > .active > a:hover {
-  position: relative;
-  z-index: 2;
-  padding: 9px 15px;
-  color: #fff;
-  text-shadow: 0 1px 0 rgba(0,0,0,.15);
-  background-color: @link-color;
-  border-width: 0;
-  .box-shadow(~"inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1)")
-}
-
-
-
 // Dropdowns
 // -------------------------
 
@@ -2942,21 +2902,6 @@ button.close {
   display: block;
 }
 
-
-
-// Disabled state
-// -------------------------
-
-// Gray out text
-.nav > .disabled > a {
-  color: @grayLight;
-}
-// Nuke hover effects
-.nav > .disabled > a:hover {
-  text-decoration: none;
-  background-color: transparent;
-  cursor: default;
-}
 */
 
 .navbar {
diff --git a/docs/components.html b/docs/components.html
index 1d4db2f8f3..76590a1ca7 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -15,7 +15,7 @@
     <!-- Le HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
       <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-      <script src="assets/js/respond/respond.js"></script>
+      <script src="assets/js/respond/respond.min.js"></script>
     <![endif]-->
 
     <!-- Le fav and touch icons -->
diff --git a/docs/css.html b/docs/css.html
index 9d215b5bd8..84e85c3718 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -15,7 +15,7 @@
     <!-- Le HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
       <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-      <script src="assets/js/respond/respond.js"></script>
+      <script src="assets/js/respond/respond.min.js"></script>
     <![endif]-->
 
     <!-- Le fav and touch icons -->
@@ -567,7 +567,7 @@
     Level 1: 9 columns
     &lt;div class="row"&gt;
       &lt;div class="span6"&gt;Level 2: 6 columns&lt;/div&gt;
-      &lt;div class="span3"&gt;Level 2: 6 columns&lt;/div&gt;
+      &lt;div class="span6"&gt;Level 2: 6 columns&lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
 &lt;/div&gt;
diff --git a/docs/customize.html b/docs/customize.html
index 75ade27e9e..011fb807f3 100644
--- a/docs/customize.html
+++ b/docs/customize.html
@@ -15,7 +15,7 @@
     <!-- Le HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
       <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-      <script src="assets/js/respond/respond.js"></script>
+      <script src="assets/js/respond/respond.min.js"></script>
     <![endif]-->
 
     <!-- Le fav and touch icons -->
diff --git a/docs/gallery.html b/docs/gallery.html
index d34ac8357c..a905274b2a 100644
--- a/docs/gallery.html
+++ b/docs/gallery.html
@@ -15,7 +15,7 @@
     <!-- Le HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
       <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-      <script src="assets/js/respond/respond.js"></script>
+      <script src="assets/js/respond/respond.min.js"></script>
     <![endif]-->
 
     <!-- Le fav and touch icons -->
diff --git a/docs/getting-started.html b/docs/getting-started.html
index 02843482f6..7599877f93 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -15,7 +15,7 @@
     <!-- Le HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
       <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-      <script src="assets/js/respond/respond.js"></script>
+      <script src="assets/js/respond/respond.min.js"></script>
     <![endif]-->
 
     <!-- Le fav and touch icons -->
diff --git a/docs/index.html b/docs/index.html
index 708229c43a..b6a58f5d1e 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -15,7 +15,7 @@
     <!-- Le HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
       <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-      <script src="assets/js/respond/respond.js"></script>
+      <script src="assets/js/respond/respond.min.js"></script>
     <![endif]-->
 
     <!-- Le fav and touch icons -->
diff --git a/docs/javascript.html b/docs/javascript.html
index ca1c8ac4ed..c73cd9f29a 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -15,7 +15,7 @@
     <!-- Le HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
       <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-      <script src="assets/js/respond/respond.js"></script>
+      <script src="assets/js/respond/respond.min.js"></script>
     <![endif]-->
 
     <!-- Le fav and touch icons -->
diff --git a/less/navs.less b/less/navs.less
index b1803b3b6d..9348cbbfae 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -4,7 +4,7 @@
 
 
 // Base class
-// -------------------------
+// --------------------------------------------------
 
 .nav {
   margin-left: 0;
@@ -26,6 +26,94 @@
   background-color: @grayLighter;
 }
 
+// Redeclare pull classes because of specifity
+// Todo: consider making these utilities !important to avoid this bullshit
+.nav > .pull-right {
+  float: right;
+}
+
+
+
+// Nav variations
+// --------------------------------------------------
+
+// Tabs
+// -------------------------
+
+// Give the tabs something to sit on
+.nav-tabs {
+  border-bottom: 1px solid #ddd;
+}
+.nav-tabs > li {
+  float: left;
+  // Make the list-items overlay the bottom border
+  margin-bottom: -1px;
+}
+// Actual tabs (as links)
+.nav-tabs > li > a {
+  margin-right: 2px;
+  line-height: @line-height-base;
+  border: 1px solid transparent;
+  border-radius: @border-radius-base @border-radius-base 0 0;
+  &:hover {
+    border-color: @grayLighter @grayLighter #ddd;
+  }
+}
+// Active state, and it's :hover to override normal :hover
+.nav-tabs > .active > a,
+.nav-tabs > .active > a:hover {
+  color: @gray;
+  background-color: @body-background;
+  border: 1px solid #ddd;
+  border-bottom-color: transparent;
+  cursor: default;
+}
+
+// Pills
+// -------------------------
+
+.nav-pills > li {
+  float: left;
+}
+
+// Links rendered as pills
+.nav-pills > li > a {
+  border-radius: 5px;
+}
+.nav-pills > li + li > a {
+  margin-left: 2px;
+}
+
+// Active state
+.nav-pills > .active > a,
+.nav-pills > .active > a:hover {
+  color: #fff;
+  background-color: @link-color;
+}
+
+// Stacked pills
+.nav-stacked > li {
+  float: none;
+}
+.nav-stacked > li + li > a {
+  margin-top: 2px;
+  margin-left: 0; // no need for this gap between nav items
+}
+
+// Justified nav links
+// -------------------------
+
+.nav-justified {
+  // Negative margin doesn't work, so we hack it
+  max-height: 40px;
+}
+.nav-justified > li {
+  float: none;
+  display: table-cell;
+  width: 1%;
+  text-align: center;
+}
+
 // Lists
 // -------------------------
 
@@ -51,20 +139,26 @@
 
 
 
+// Nav states and addons
+// --------------------------------------------------
 
-/*
-// Prevent IE8 from misplacing imgs
-// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
-.nav > li > a > img {
-  max-width: none;
+// Disabled state
+// -------------------------
+
+// Gray out text
+.nav > .disabled > a {
+  color: @grayLight;
 }
-
-// Redeclare pull classes because of specifity
-.nav > .pull-right {
-  float: right;
+// Nuke hover effects
+.nav > .disabled > a:hover {
+  text-decoration: none;
+  background-color: transparent;
+  cursor: default;
 }
 
 // Nav headers (for dropdowns and lists)
+// -------------------------
+
 .nav-header {
   display: block;
   padding: 3px 15px;
@@ -84,125 +178,15 @@
 .nav .divider {
   .nav-divider();
 }
-*/
+
 
 
 /*
-// Tabs
-// -------------------------
-
-// Give the tabs something to sit on
-.nav-tabs {
-  border-bottom: 1px solid #ddd;
+// Prevent IE8 from misplacing imgs
+// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
+.nav > li > a > img {
+  max-width: none;
 }
-// Make the list-items overlay the bottom border
-.nav-tabs > li {
-  margin-bottom: -1px;
-}
-// Actual tabs (as links)
-.nav-tabs > li > a {
-  margin-right: 2px;
-  line-height: @line-height-base;
-  border: 1px solid transparent;
-  border-radius: @border-radius-base @border-radius-base 0 0;
-  &:hover {
-    border-color: @grayLighter @grayLighter #ddd;
-  }
-}
-// Active state, and it's :hover to override normal :hover
-.nav-tabs > .active > a,
-.nav-tabs > .active > a:hover {
-  color: @gray;
-  background-color: @body-background;
-  border: 1px solid #ddd;
-  border-bottom-color: transparent;
-  cursor: default;
-}
-
-
-
-// Pills
-// -------------------------
-
-// Links rendered as pills
-.nav-pills > li > a {
-  border-radius: 5px;
-}
-.nav-pills > li + li > a {
-  margin-left: 2px;
-}
-
-// Active state
-.nav-pills > .active > a,
-.nav-pills > .active > a:hover {
-  color: #fff;
-  background-color: @link-color;
-}
-
-// Stacked pills
-.nav-stacked > li {
-  float: none;
-}
-.nav-stacked > li + li > a {
-  margin-top: 2px;
-  margin-left: 0; // no need for the gap between nav items
-}
-
-
-
-// Justified navs
-// -------------------------
-
-.nav-justified {
-  // Negative margin doesn't work, so we hack it
-  max-height: 37px;
-}
-.nav-justified > li {
-  float: none;
-  display: table-cell;
-  width: 1%;
-  text-align: center;
-}
-
-
-
-// Lists
-// -------------------------
-
-.nav-list {
-  background-color: #fff;
-  border-radius: 6px;
-  .box-shadow(0 1px 4px rgba(0,0,0,.065))
-}
-.nav-list > li {
-  float: none;
-}
-.nav-list > li > a {
-  margin-bottom: -1px; // pull up the following link for a 1px border between
-  border: 1px solid #e5e5e5;
-}
-.nav-list > li > a:hover {
-  background-color: #f5f5f5;
-}
-.nav-list > li:first-child > a {
-  border-radius: 6px 6px 0 0;
-}
-.nav-list > li:last-child > a {
-  border-radius: 0 0 6px 6px;
-}
-.nav-list > .active > a,
-.nav-list > .active > a:hover {
-  position: relative;
-  z-index: 2;
-  padding: 9px 15px;
-  color: #fff;
-  text-shadow: 0 1px 0 rgba(0,0,0,.15);
-  background-color: @link-color;
-  border-width: 0;
-  .box-shadow(~"inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1)")
-}
-
-
 
 // Dropdowns
 // -------------------------
@@ -284,19 +268,4 @@
   display: block;
 }
 
-
-
-// Disabled state
-// -------------------------
-
-// Gray out text
-.nav > .disabled > a {
-  color: @grayLight;
-}
-// Nuke hover effects
-.nav > .disabled > a:hover {
-  text-decoration: none;
-  background-color: transparent;
-  cursor: default;
-}
 */