update Extend docs page to include side nav and spec out next section for extending with static assets

docs/extend.html

@@ -68,26 +68,32 @@
 
     <div class="container">
 
-<!-- Masthead
+<!-- Subhead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
   <h1>Extending Bootstrap</h1>
-  <p class="lead">Extend Bootstrap with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.</p>
+  <p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p>
-  <div class="navbar navbar-subnav">
+</header>
-    <div class="navbar-inner">
+
-      <ul class="nav">
+
-        <li><a href="#builtWith">Built with Less</a></li>
+
+<!-- Docs nav
+================================================== -->
+<div class="row">
+  <div class="span3 bs-docs-sidebar">
+    <ul class="nav nav-list bs-docs-sidenav">
+      <li><a href="#built-with-less">Built with LESS</a></li>
       <li><a href="#compiling">Compiling Bootstrap</a></li>
+      <li><a href="#static-assets">Use as static assets</a></li>
     </ul>
   </div>
-  </div>
+  <div class="span9">
-</header>
 
 
 
     <!-- BUILT WITH LESS
     ================================================== -->
-<section id="builtWith">
+    <section id="built-with-less">
       <div class="page-header">
         <h1>Built with LESS</h1>
       </div>
@@ -101,15 +107,6 @@
       <h3>Learn more</h3>
       <img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS">
       <p>Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p>
-
-  <h3><a href="#variables">Variables</a></h3>
-  <p>Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though&mdash;assign colors or pixel values as variables and change them once.</p>
-
-  <h3><a href="#mixins">Mixins</a></h3>
-  <p>Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.</p>
-
-  <h3>Operations</h3>
-  <p>Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiply, divide, add, and subtract your way to CSS sanity.</p>
     </section>
 
 
@@ -160,6 +157,21 @@
     </section>
 
 
+
+    <!-- Static assets
+    ================================================== -->
+    <section id="static-assets">
+      <div class="page-header">
+        <h1>Use as static assets</h1>
+      </div>
+      <p>...</p>
+    </section>
+
+
+  </div>
+</div>
+
+
      <!-- Footer
       ================================================== -->
       <footer class="footer">

docs/templates/pages/extend.mustache

@@ -1,23 +1,29 @@
-<!-- Masthead
+<!-- Subhead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
   <h1>{{_i}}Extending Bootstrap{{/i}}</h1>
-  <p class="lead">{{_i}}Extend Bootstrap with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.{{/i}}</p>
+  <p class="lead">{{_i}}Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.{{/i}}</p>
-  <div class="navbar navbar-subnav">
+</header>
-    <div class="navbar-inner">
+
-      <ul class="nav">
+
-        <li><a href="#builtWith">{{_i}}Built with Less{{/i}}</a></li>
+
+<!-- Docs nav
+================================================== -->
+<div class="row">
+  <div class="span3 bs-docs-sidebar">
+    <ul class="nav nav-list bs-docs-sidenav">
+      <li><a href="#built-with-less">{{_i}}Built with LESS{{/i}}</a></li>
       <li><a href="#compiling">{{_i}}Compiling Bootstrap{{/i}}</a></li>
+      <li><a href="#static-assets">{{_i}}Use as static assets{{/i}}</a></li>
     </ul>
   </div>
-  </div>
+  <div class="span9">
-</header>
 
 
 
     <!-- BUILT WITH LESS
     ================================================== -->
-<section id="builtWith">
+    <section id="built-with-less">
       <div class="page-header">
         <h1>{{_i}}Built with LESS{{/i}}</h1>
       </div>
@@ -31,15 +37,6 @@
       <h3>{{_i}}Learn more{{/i}}</h3>
       <img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS">
       <p>{{_i}}Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.{{/i}}</p>
-
-  <h3><a href="#variables">{{_i}}Variables{{/i}}</a></h3>
-  <p>{{_i}}Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though&mdash;assign colors or pixel values as variables and change them once.{{/i}}</p>
-
-  <h3><a href="#mixins">{{_i}}Mixins{{/i}}</a></h3>
-  <p>{{_i}}Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.{{/i}}</p>
-
-  <h3>{{_i}}Operations{{/i}}</h3>
-  <p>{{_i}}Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiply, divide, add, and subtract your way to CSS sanity.{{/i}}</p>
     </section>
 
 
@@ -88,3 +85,18 @@
       <p>{{_i}}Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the <a href="https://github.com/Paratron/SimpLESS" target="_blank">source code is on GitHub</a>.{{/i}}</p>
 
     </section>
+
+
+
+    <!-- Static assets
+    ================================================== -->
+    <section id="static-assets">
+      <div class="page-header">
+        <h1>{{_i}}Use as static assets{{/i}}</h1>
+      </div>
+      <p>...</p>
+    </section>
+
+
+  </div>{{! /span9 }}
+</div>{{! row}}