update components page to include docs for the new navbar collapse feature, re-add responsive.less to downloader

4 files changed, 58 insertions, 12 deletions

diff --git a/docs/components.html b/docs/components.html
index 950d1f35c..710e7de77 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -467,7 +467,7 @@
       <div class="well" style="padding: 8px 0;">
         <ul class="nav list">
           <li class="nav-header">List header</li>
-          <li class="active"><a href="#"><i class="icon home"></i> Home</a></li>
+          <li class="active"><a href="#"><i class="icon white home"></i> Home</a></li>
           <li><a href="#"><i class="icon book"></i> Library</a></li>
           <li><a href="#"><i class="icon pencil"></i> Applications</a></li>
           <li class="nav-header">Another list header</li>
@@ -740,6 +740,33 @@
   &lt;input type="text" class="search-query pull-left" placeholder="Search"&gt;
 &lt;/form&gt;
 </pre>
+      <h3>Optional responsive variation</h3>
+      <p>Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, <code>.nav-collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.</p>
+<pre class="prettyprint linenums">
+&lt;div class="navbar navbar-static"&gt;
+  &lt;div class="navbar-inner"&gt;
+    &lt;div class="container"&gt;
+      
+      &lt;!-- .btn-navbar is used as the toggle for collapsed navbar content --&gt;
+      &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
+        &lt;span class="i-bar"&gt;&lt;/span&gt;
+        &lt;span class="i-bar"&gt;&lt;/span&gt;
+        &lt;span class="i-bar"&gt;&lt;/span&gt;
+      &lt;/a&gt;
+      
+      &lt;!-- Be sure to leave the brand out there if you want it shown --&gt;
+      &lt;a class="brand" href="#"&gt;Project name&lt;/a&gt;
+
+      &lt;!-- Everything you want hidden at 940px or less, place within here --&gt;
+      &lt;div class="nav-collapse"&gt;
+        &lt;!-- .nav, .navbar-search, .navbar-form, etc --&gt;
+      &lt;/div&gt;
+
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
     </div><!-- /.span -->
     <div class="span4">
       <h3>Nav links</h3>
diff --git a/docs/download.html b/docs/download.html
index 5bcce7ced..832b07ce6 100644
--- a/docs/download.html
+++ b/docs/download.html
@@ -135,12 +135,8 @@
       <label class="checkbox"><input checked="checked" type="checkbox" value="close.less"> Close icon</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> Utilities</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> Component animations</label>
-      <!--
       <h3>Responsive</h3>
-      <label class="checkbox"><input type="checkbox" value=""> Max-width 480px</label>
-      <label class="checkbox"><input type="checkbox" value=""> Max-width 768px</label>
-      <label class="checkbox"><input type="checkbox" value=""> Max-width 1210px</label>
-      -->
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive.less"> Responsive layouts</label>
     </div><!-- /span -->
   </div><!-- /row -->
 </section>
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 3a92953ae..5c91431fa 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -395,7 +395,7 @@
       <div class="well" style="padding: 8px 0;">
         <ul class="nav list">
           <li class="nav-header">{{_i}}List header{{/i}}</li>
-          <li class="active"><a href="#"><i class="icon home"></i> {{_i}}Home{{/i}}</a></li>
+          <li class="active"><a href="#"><i class="icon white home"></i> {{_i}}Home{{/i}}</a></li>
           <li><a href="#"><i class="icon book"></i> {{_i}}Library{{/i}}</a></li>
           <li><a href="#"><i class="icon pencil"></i> {{_i}}Applications{{/i}}</a></li>
           <li class="nav-header">{{_i}}Another list header{{/i}}</li>
@@ -668,6 +668,33 @@
   &lt;input type="text" class="search-query pull-left" placeholder="{{_i}}Search{{/i}}"&gt;
 &lt;/form&gt;
 </pre>
+      <h3>{{_i}}Optional responsive variation{{/i}}</h3>
+      <p>{{_i}}Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, <code>.nav-collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.{{/i}}</p>
+<pre class="prettyprint linenums">
+&lt;div class="navbar navbar-static"&gt;
+  &lt;div class="navbar-inner"&gt;
+    &lt;div class="container"&gt;
+      
+      &lt;!-- .btn-navbar is used as the toggle for collapsed navbar content --&gt;
+      &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
+        &lt;span class="i-bar"&gt;&lt;/span&gt;
+        &lt;span class="i-bar"&gt;&lt;/span&gt;
+        &lt;span class="i-bar"&gt;&lt;/span&gt;
+      &lt;/a&gt;
+      
+      &lt;!-- Be sure to leave the brand out there if you want it shown --&gt;
+      &lt;a class="brand" href="#"&gt;{{_i}}Project name{{/i}}&lt;/a&gt;
+
+      &lt;!-- Everything you want hidden at 940px or less, place within here --&gt;
+      &lt;div class="nav-collapse"&gt;
+        &lt;!-- .nav, .navbar-search, .navbar-form, etc --&gt;
+      &lt;/div&gt;
+
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
     </div><!-- /.span -->
     <div class="span4">
       <h3>{{_i}}Nav links{{/i}}</h3>
diff --git a/docs/templates/pages/download.mustache b/docs/templates/pages/download.mustache
index dccc5fbb6..34f8130ac 100644
--- a/docs/templates/pages/download.mustache
+++ b/docs/templates/pages/download.mustache
@@ -63,12 +63,8 @@
       <label class="checkbox"><input checked="checked" type="checkbox" value="close.less"> {{_i}}Close icon{{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> {{_i}}Utilities{{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> {{_i}}Component animations{{/i}}</label>
-      <!--
       <h3>{{_i}}Responsive{{/i}}</h3>
-      <label class="checkbox"><input type="checkbox" value=""> {{_i}}Max-width 480px{{/i}}</label>
-      <label class="checkbox"><input type="checkbox" value=""> {{_i}}Max-width 768px{{/i}}</label>
-      <label class="checkbox"><input type="checkbox" value=""> {{_i}}Max-width 1210px{{/i}}</label>
-      -->
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive.less"> {{_i}}Responsive layouts{{/i}}</label>
     </div><!-- /span -->
   </div><!-- /row -->
 </section>