spec out all mixins on less page

1 files changed, 303 insertions, 53 deletions

diff --git a/docs/less.html b/docs/less.html
index ac75dd346..e10c8899b 100644
--- a/docs/less.html
+++ b/docs/less.html
@@ -105,11 +105,11 @@
   </div>
   <div class="row">
     <div class="span4">
-      <h3>Variables</h3>
+      <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>
     </div>
     <div class="span4">
-      <h3>Mixins</h3>
+      <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>
     </div>
     <div class="span4">
@@ -395,62 +395,312 @@
 
 <!-- MIXINS
 ================================================== -->
-<div class="page-header" id="mixins">
-  <h1>Bootstrap mixins <small></small></h1>
-</div>
-
-<h3>Mixins up the wazoo</h3>
-<p>Mixins are basically includes or partials for CSS, allowing you to combine a block of code into one. They’re great for vendor prefixed properties like <code>box-shadow</code>, cross-browser gradients, font stacks, and more. Below is a sample of the mixins that are included with Bootstrap.</p>
-<h4>Font stacks</h4>
+<section id="mixins">
+  <div class="page-header">
+    <h1>Bootstrap mixins <small></small></h1>
+  </div>
+  <h2>About mixins</h2>
+  <div class="row">
+    <div class="span4">
+      <h3>Basic mixins</h3>
+      <p>A basic mixin is essentially an include or a partial for a snippet of CSS. They're written just like a CSS class and can be called anywhere.</p>
 <pre class="prettyprint linenums">
-#font {
-  .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
-    font-size: @size;
-    font-weight: @weight;
-    line-height: @lineHeight;
-  }
-  .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: @size;
-    font-weight: @weight;
-    line-height: @lineHeight;
-  }
-  ...
-}
+  Coming soon!
 </pre>
-<h4>Gradients</h4>
+    </div><!-- /span4 -->
+    <div class="span4">
+      <h3>Parametric mixins</h3>
+      <p>A parametric mixin is just like a basic mixin, but it also accepts optional paramaters (hence the name).</p>
 <pre class="prettyprint linenums">
-#gradient {
-  ...
-  .vertical (@startColor: #555, @endColor: #333) {
-    background-color: @endColor;
-    background-repeat: repeat-x;
-    background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
-    background-image: -moz-linear-gradient(@startColor, @endColor); // FF 3.6+
-    background-image: -ms-linear-gradient(@startColor, @endColor); // IE10
-    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
-    background-image: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+
-    background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10
-    background-image: linear-gradient(@startColor, @endColor); // The standard
-  }
-  ...
-}
+  Coming soon!
 </pre>
+    </div><!-- /span4 -->
+    <div class="span4">
+      <h3>Easily add your own</h3>
+      <p>Nearly all of Bootstrap's mixins are stored in mixins.less, a wonderful utility .less file that enables you to use a mixin in any of the .less files in the toolkit.</p>
+      <p>So, go ahead and use the existing ones or feel free to add your own as you need.</p>
+    </div><!-- /span4 -->
+  </div><!-- /row -->
+  <h2>Included mixins</h2>
+  <h3>Utilities</h3>
+  <table class="table table-bordered table-striped">
+    <thead>
+      <tr>
+        <th class="span4">Mixin</th>
+        <th>Paramaters</th>
+        <th>Usage</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>.clearfix()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>.center-block()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>.ie7-inline-block()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>.size()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>.square()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>.opacity()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>.reset-filter()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+    </tbody>
+  </table>
+  <h3>Forms</h3>
+  <table class="table table-bordered table-striped">
+    <thead>
+      <tr>
+        <th class="span4">Mixin</th>
+        <th>Paramaters</th>
+        <th>Usage</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>.placeholder()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+    </tbody>
+  </table>
+  <h3>Typography</h3>
+  <table class="table table-bordered table-striped">
+    <thead>
+      <tr>
+        <th class="span4">Mixin</th>
+        <th>Paramaters</th>
+        <th>Usage</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>#font > #family > .serif()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>#font > #family > .sans-serif()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>#font > #family > .monospace()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>#font > .shorthand()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>#font > .serif()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>#font > .sans-serif()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>#font > .monospace()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+    </tbody>
+  </table>
+  <h3>Grid system</h3>
+  <table class="table table-bordered table-striped">
+    <thead>
+      <tr>
+        <th class="span4">Mixin</th>
+        <th>Paramaters</th>
+        <th>Usage</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>.fixed-container()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>.columns()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>.offset()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>.gridColumn()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+    </tbody>
+  </table>
+  <h3>CSS3 properties</h3>
+  <table class="table table-bordered table-striped">
+    <thead>
+      <tr>
+        <th class="span4">Mixin</th>
+        <th>Paramaters</th>
+        <th>Usage</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>.border-radius()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>.border-radius-custom()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>.box-shadow()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>.transition()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>.rotate()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>.scale()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>.translate()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>.background-clip()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>.background-size()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>.box-sizing()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>.user-select()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>.resizable()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>.content-columns()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+    </tbody>
+  </table>
+  <h3>Backgrounds and gradients</h3>
+  <table class="table table-bordered table-striped">
+    <thead>
+      <tr>
+        <th class="span4">Mixin</th>
+        <th>Paramaters</th>
+        <th>Usage</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>.#translucent > .background()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>.#translucent > .border()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>.#gradient > .vertical()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>.#gradient > .horizontal()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>.#gradient > .directional()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>.#gradient > .vertical-three-colors()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>.#gradient > .radial()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>.#gradient > .striped()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+      <tr>
+        <td><code>.#gradientBar()</code></td>
+        <td></td>
+        <td></td>
+      </tr>
+    </tbody>
+  </table>
+</section>
 
-<h3>Operations</h3>
-<p>Get fancy and perform some math to generate flexible and powerful mixins like the one below.</p>
-<pre class="prettyprint linenums">
-// Griditude
-@gridColumns:       16;
-@gridColumnWidth:   40px;
-@gridGutterWidth:   20px;
-@siteWidth:         (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
-
-// Make some columns
-.columns(@columnSpan: 1) {
-  width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
-}
-</pre>
 
 
 <!-- COMPILING LESS AND BOOTSTRAP