fix the navbar click and a few jank responsive problems

7 files changed, 195 insertions, 140 deletions

diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index 631c904e7..b0fbd9d7b 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -175,22 +175,23 @@
     margin-bottom: 36px;
   }
   .navbar-inner {
-    padding: 10px;
+    padding: 5px;
     background-image: none;
   }
   .navbar .container {
     padding: 0;
   }
   .navbar .brand {
-    float: none;
-    display: block;
-    padding-left: 15px;
-    padding-right: 15px;
-    margin: 0;
+    padding-left: 10px;
+    padding-right: 10px;
+    margin: 0 0 0 -5px;
+  }
+  .navbar .nav-collapse {
+    clear: left;
   }
   .navbar .nav {
     float: none;
-    margin: 9px 0;
+    margin: 0 0 9px;
   }
   .navbar .nav > li {
     float: none;
@@ -217,8 +218,10 @@
   }
   .navbar .dropdown-menu {
     position: static;
-    display: block;
+    top: auto;
+    left: auto;
     float: none;
+    display: block;
     max-width: none;
     margin: 0 15px;
     padding: 0;
@@ -263,60 +266,83 @@
     height: 0;
   }
 }
-/*
 @media (min-width: 1210px) {
-
-  // Reset grid variables
-  @gridColumns:       12;
-  @gridColumnWidth:   70px;
-  @gridGutterWidth:   30px;
-  @siteWidth:         1170px;
-
-  // Bring grid mixins to recalculate widths
-  .columns(@columns: 1) {
-    width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
-  }
-  .offset(@columns: 1) {
-    margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
-  }
-
   .container {
-    width: @siteWidth;
+    width: 1170px;
   }
   .row {
-    margin-left: @gridGutterWidth * -1;
+    margin-left: -30px;
   }
   [class*="span"] {
-    margin-left: @gridGutterWidth;
-  }
-
-  // Default columns
-  .span1     { .columns(1); }
-  .span2     { .columns(2); }
-  .span3     { .columns(3); }
-  .span4     { .columns(4); }
-  .span5     { .columns(5); }
-  .span6     { .columns(6); }
-  .span7     { .columns(7); }
-  .span8     { .columns(8); }
-  .span9     { .columns(9); }
-  .span10    { .columns(10); }
-  .span11    { .columns(11); }
-  .span12    { .columns(12); }
-
-  // Offset column options
-  .offset1   { .offset(1); }
-  .offset2   { .offset(2); }
-  .offset3   { .offset(3); }
-  .offset4   { .offset(4); }
-  .offset5   { .offset(5); }
-  .offset6   { .offset(6); }
-  .offset7   { .offset(7); }
-  .offset8   { .offset(8); }
-  .offset9   { .offset(9); }
-  .offset10  { .offset(10); }
-  .offset11  { .offset(11); }
-  .offset12  { .offset(12); }
-
+    margin-left: 30px;
+  }
+  .span1 {
+    width: 70px;
+  }
+  .span2 {
+    width: 170px;
+  }
+  .span3 {
+    width: 270px;
+  }
+  .span4 {
+    width: 370px;
+  }
+  .span5 {
+    width: 470px;
+  }
+  .span6 {
+    width: 570px;
+  }
+  .span7 {
+    width: 670px;
+  }
+  .span8 {
+    width: 770px;
+  }
+  .span9 {
+    width: 870px;
+  }
+  .span10 {
+    width: 970px;
+  }
+  .span11 {
+    width: 1070px;
+  }
+  .span12 {
+    width: 1170px;
+  }
+  .offset1 {
+    margin-left: 130px;
+  }
+  .offset2 {
+    margin-left: 230px;
+  }
+  .offset3 {
+    margin-left: 330px;
+  }
+  .offset4 {
+    margin-left: 430px;
+  }
+  .offset5 {
+    margin-left: 530px;
+  }
+  .offset6 {
+    margin-left: 630px;
+  }
+  .offset7 {
+    margin-left: 730px;
+  }
+  .offset8 {
+    margin-left: 830px;
+  }
+  .offset9 {
+    margin-left: 930px;
+  }
+  .offset10 {
+    margin-left: 1030px;
+  }
+  .offset11 {
+    margin-left: 1130px;
+  }
 }
-*/
\ No newline at end of file
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index bf1116f53..6916e9361 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2315,8 +2315,8 @@ button.btn.small, input[type="submit"].btn.small {
   display: none;
   float: right;
   padding: 7px 10px;
-  margin-left: 10px;
-  margin-right: 10px;
+  margin-left: 5px;
+  margin-right: 5px;
   background-color: #2c2c2c;
   background-image: -moz-linear-gradient(top, #333333, #222222);
   background-image: -ms-linear-gradient(top, #333333, #222222);
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index b06065365..cc7ca0c63 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -522,6 +522,7 @@ h2 + .row {
 /* Example sites showcase */
 .example-sites img {
   max-width: 100%;
+  margin: 0 auto;
 }
 .marketing-byline {
   margin: -18px 0 27px;
@@ -646,6 +647,10 @@ form.well {
     padding: 10px 14px;
     margin: 0 auto 10px;
   }
+  /* Masthead (home page jumbotron) */
+  .masthead {
+    padding-top: 0;
+  }
 
   /* Don't space out quick links so much */
   .quick-links {
@@ -669,8 +674,9 @@ form.well {
     display: block;
     max-width: 300px;
     margin: 0 auto 18px;
+    text-align: center;
   }
-  .example-sites img {
+  .example-sites .thumbnail > img {
     max-width: 270px;
   }
 
@@ -796,11 +802,20 @@ form.well {
 
   /* Unfloat brand */
   .navbar-fixed-top .brand {
-    float: none;
+    float: left;
     margin-left: 0;
-    padding-left: 15px;
-    padding-right: 15px;
+    padding-left: 10px;
+    padding-right: 10px;
   }
 
 }
 
+/* LARGE DESKTOP SCREENS */
+@media (min-width: 1210px) {
+
+  /* Update subnav container */
+  .subnav-fixed .nav {
+    width: 1168px; /* 2px less to account for left/right borders being removed when in fixed mode */
+  }
+
+}
diff --git a/docs/base-css.html b/docs/base-css.html
index c68391261..4651e9789 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1497,7 +1497,7 @@ For example, <code>section</code> should be wrapped as inline.
           <div class="controls">
             <div class="input-prepend">
               <span class="add-on"><i class="icon envelope"></i></span>
-              <input class="span32" id="iconInput" size="16" type="text">
+              <input class="span2" id="iconInput" type="text">
             </div>
           </div>
         </div>
diff --git a/docs/components.html b/docs/components.html
index a2fac7360..950d1f35c 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -662,40 +662,47 @@
   <div class="navbar navbar-static">
     <div class="navbar-inner">
       <div class="container" style="width: auto;">
+        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+          <span class="i-bar"></span>
+          <span class="i-bar"></span>
+          <span class="i-bar"></span>
+        </a>
         <a class="brand" href="#">Project name</a>
-        <ul class="nav">
-          <li class="active"><a href="#">Home</a></li>
-          <li><a href="#">Link</a></li>
-          <li><a href="#">Link</a></li>
-          <li><a href="#">Link</a></li>
-          <li class="dropdown">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-            <ul class="dropdown-menu">
-              <li><a href="#">Action</a></li>
-              <li><a href="#">Another action</a></li>
-              <li><a href="#">Something else here</a></li>
-              <li class="divider"></li>
-              <li><a href="#">Separated link</a></li>
-            </ul>
-          </li>
-        </ul>
-        <form class="navbar-search pull-left" action="">
-          <input type="text" class="search-query span2" placeholder="Search">
-        </form>
-        <ul class="nav pull-right">
-          <li><a href="#">Link</a></li>
-          <li class="vertical-divider"></li>
-          <li class="dropdown">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-            <ul class="dropdown-menu">
-              <li><a href="#">Action</a></li>
-              <li><a href="#">Another action</a></li>
-              <li><a href="#">Something else here</a></li>
-              <li class="divider"></li>
-              <li><a href="#">Separated link</a></li>
-            </ul>
-          </li>
-        </ul>
+        <div class="nav-collapse">
+          <ul class="nav">
+            <li class="active"><a href="#">Home</a></li>
+            <li><a href="#">Link</a></li>
+            <li><a href="#">Link</a></li>
+            <li><a href="#">Link</a></li>
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+              <ul class="dropdown-menu">
+                <li><a href="#">Action</a></li>
+                <li><a href="#">Another action</a></li>
+                <li><a href="#">Something else here</a></li>
+                <li class="divider"></li>
+                <li><a href="#">Separated link</a></li>
+              </ul>
+            </li>
+          </ul>
+          <form class="navbar-search pull-left" action="">
+            <input type="text" class="search-query span2" placeholder="Search">
+          </form>
+          <ul class="nav pull-right">
+            <li><a href="#">Link</a></li>
+            <li class="vertical-divider"></li>
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+              <ul class="dropdown-menu">
+                <li><a href="#">Action</a></li>
+                <li><a href="#">Another action</a></li>
+                <li><a href="#">Something else here</a></li>
+                <li class="divider"></li>
+                <li><a href="#">Separated link</a></li>
+              </ul>
+            </li>
+          </ul>
+        </div><!-- /.nav-collapse -->
       </div>
     </div><!-- /navbar-inner -->
   </div><!-- /navbar -->
@@ -733,7 +740,7 @@
   &lt;input type="text" class="search-query pull-left" placeholder="Search"&gt;
 &lt;/form&gt;
 </pre>
-    </div>
+    </div><!-- /.span -->
     <div class="span4">
       <h3>Nav links</h3>
       <p>Nav items are simple to add via unordered lists.</p>
@@ -763,9 +770,9 @@
   &lt;/li&gt;
 &lt;/ul&gt;
 </pre>
-    <p><a class="btn" href="./javascript.html/#dropdown">Get the javascript &rarr;</a></p>
-    </div>
-  </div>
+      <p><a class="btn" href="./javascript.html/#dropdown">Get the javascript &rarr;</a></p>
+    </div><!-- /.span -->
+  </div><!-- /.row -->
 
 </section>
 
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 6cbb111ac..c15fcebd3 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -1425,7 +1425,7 @@
           <div class="controls">
             <div class="input-prepend">
               <span class="add-on"><i class="icon envelope"></i></span>
-              <input class="span32" id="iconInput" size="16" type="text">
+              <input class="span2" id="iconInput" type="text">
             </div>
           </div>
         </div>
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 363ed1ba1..3a92953ae 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -590,40 +590,47 @@
   <div class="navbar navbar-static">
     <div class="navbar-inner">
       <div class="container" style="width: auto;">
+        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+          <span class="i-bar"></span>
+          <span class="i-bar"></span>
+          <span class="i-bar"></span>
+        </a>
         <a class="brand" href="#">{{_i}}Project name{{/i}}</a>
-        <ul class="nav">
-          <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
-          <li><a href="#">{{_i}}Link{{/i}}</a></li>
-          <li><a href="#">{{_i}}Link{{/i}}</a></li>
-          <li><a href="#">{{_i}}Link{{/i}}</a></li>
-          <li class="dropdown">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
-            <ul class="dropdown-menu">
-              <li><a href="#">{{_i}}Action{{/i}}</a></li>
-              <li><a href="#">{{_i}}Another action{{/i}}</a></li>
-              <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
-              <li class="divider"></li>
-              <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
-            </ul>
-          </li>
-        </ul>
-        <form class="navbar-search pull-left" action="">
-          <input type="text" class="search-query span2" placeholder="Search">
-        </form>
-        <ul class="nav pull-right">
-          <li><a href="#">{{_i}}Link{{/i}}</a></li>
-          <li class="vertical-divider"></li>
-          <li class="dropdown">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
-            <ul class="dropdown-menu">
-              <li><a href="#">{{_i}}Action{{/i}}</a></li>
-              <li><a href="#">{{_i}}Another action{{/i}}</a></li>
-              <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
-              <li class="divider"></li>
-              <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
-            </ul>
-          </li>
-        </ul>
+        <div class="nav-collapse">
+          <ul class="nav">
+            <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
+            <li><a href="#">{{_i}}Link{{/i}}</a></li>
+            <li><a href="#">{{_i}}Link{{/i}}</a></li>
+            <li><a href="#">{{_i}}Link{{/i}}</a></li>
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
+              <ul class="dropdown-menu">
+                <li><a href="#">{{_i}}Action{{/i}}</a></li>
+                <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+                <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+                <li class="divider"></li>
+                <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+              </ul>
+            </li>
+          </ul>
+          <form class="navbar-search pull-left" action="">
+            <input type="text" class="search-query span2" placeholder="Search">
+          </form>
+          <ul class="nav pull-right">
+            <li><a href="#">{{_i}}Link{{/i}}</a></li>
+            <li class="vertical-divider"></li>
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
+              <ul class="dropdown-menu">
+                <li><a href="#">{{_i}}Action{{/i}}</a></li>
+                <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+                <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+                <li class="divider"></li>
+                <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+              </ul>
+            </li>
+          </ul>
+        </div><!-- /.nav-collapse -->
       </div>
     </div><!-- /navbar-inner -->
   </div><!-- /navbar -->
@@ -661,7 +668,7 @@
   &lt;input type="text" class="search-query pull-left" placeholder="{{_i}}Search{{/i}}"&gt;
 &lt;/form&gt;
 </pre>
-    </div>
+    </div><!-- /.span -->
     <div class="span4">
       <h3>{{_i}}Nav links{{/i}}</h3>
       <p>{{_i}}Nav items are simple to add via unordered lists.{{/i}}</p>
@@ -691,9 +698,9 @@
   &lt;/li&gt;
 &lt;/ul&gt;
 </pre>
-    <p><a class="btn" href="./javascript.html/#dropdown">{{_i}}Get the javascript &rarr;{{/i}}</a></p>
-    </div>
-  </div>
+      <p><a class="btn" href="./javascript.html/#dropdown">{{_i}}Get the javascript &rarr;{{/i}}</a></p>
+    </div><!-- /.span -->
+  </div><!-- /.row -->
 
 </section>