From 8130b113bb03aa134be3f977d493a3bed9bb1d3d Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Sat, 10 Sep 2011 21:50:12 -0700
Subject: [PATCH] add stubbed out table for how to compile less

---
 docs/index.html | 88 +++++++++++++++++++++++++++----------------------
 1 file changed, 49 insertions(+), 39 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 611e28b132..bca04b1a00 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1639,34 +1639,13 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
     font-weight: @weight;
     line-height: @lineHeight;
   }
-  .serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
-    font-family: "Georgia", Times New Roman, Times, sans-serif;
-    font-size: @size;
-    font-weight: @weight;
-    line-height: @lineHeight;
-  }
-  .monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
-    font-family: "Monaco", Courier New, monospace;
-    font-size: @size;
-    font-weight: @weight;
-    line-height: @lineHeight;
-  }
+  ...
 }
 </pre>
 <h4>Gradients</h4>
 <pre class="prettyprint linenums">
 #gradient {
-  .horizontal (@startColor: #555, @endColor: #333) {
-    background-color: @endColor;
-    background-repeat: repeat-x;
-    background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
-    background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
-    background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
-    background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
-    background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
-    background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
-    background-image: linear-gradient(left, @startColor, @endColor); // Le standard
-  }
+  ...
   .vertical (@startColor: #555, @endColor: #333) {
     background-color: @endColor;
     background-repeat: repeat-x;
@@ -1678,16 +1657,11 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
     background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10
     background-image: linear-gradient(@startColor, @endColor); // The standard
   }
-  .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
-    ...
-  }
-  .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
-    ...
-  }
+  ...
 }
 </pre>
 
-<h3>Operations and grid system</h3>
+<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
@@ -1696,19 +1670,55 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
 @gridGutterWidth:   20px;
 @siteWidth:         (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
 
-// Grid System
-.container {
-  width: @siteWidth;
-  margin: 0 auto;
-  .clearfix();
-}
+// Make some columns
 .columns(@columnSpan: 1) {
   width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
 }
-.offset(@columnOffset: 1) {
-  margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
-}
 </pre>
+
+    <h2>Compiling Less</h2>
+    <p>After modifying the <code>.less</code> files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.</p>
+    <h3>Ways to compile</h3>
+    <table>
+      <thead>
+        <tr>
+          <th style="width: 120px;">Method</th>
+          <th>Steps</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+        <tr>
+          <td>Node with makefile</td>
+          <td>
+
+          </td>
+        </tr>
+          <td>Javascript</td>
+          <td>
+            <p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and your Bootstrap code) in the <code>head</code>.</p>
+<pre class="prettyprint">
+&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
+&lt;script src="/path/to/less.js"&gt;&lt;/script&gt;
+</pre>
+            <p>To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.</p>
+          </td>
+        </tr>
+        <tr>
+          <td>Command line</td>
+          <td>
+
+          </td>
+        </tr>
+        <tr>
+          <td>Less Mac app</td>
+          <td>
+            <p><a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file.</p>
+            <p>If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p>
+          </td>
+        </tr>
+      </tbody>
+    </table>
   </div>
 </div>