From 00b7dff3595d340be61894a0674800f8ed02b4ab Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Sat, 10 Sep 2011 21:05:23 -0700
Subject: overhaul docs CSS since it was scalable, converted docs mastheads and
 footers to classes and HTML5 elements, add masthead to js docs page but make
 it slate so it looks cool and stands out

---
 docs/index.html | 37 +++++++++++++++++++++----------------
 1 file changed, 21 insertions(+), 16 deletions(-)

(limited to 'docs/index.html')

diff --git a/docs/index.html b/docs/index.html
index ebac6f71c..0f233d3d3 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -61,7 +61,7 @@
 
     <!-- Masthead (blueprinty thing)
     ================================================== -->
-    <div id="masthead">
+    <header class="jumbotron masthead">
       <div class="inner">
         <div class="container">
           <h1>Bootstrap, from Twitter</h1>
@@ -72,7 +72,7 @@
           <p><strong>Nerd alert:</strong> Bootstrap is <a href="#less" title="Read about using Bootstrap with Less">built with Less</a> and was designed to work out of the gate with modern browsers in mind.</p>
         </div><!-- /container -->
       </div>
-    </div>
+    </header>
 
     <!-- Quickstart options
     ================================================== -->
@@ -1516,13 +1516,14 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
    </div>
    <div class="row">
      <div class="span4">
+       <h2>Getting started</h2>
        <p>Integrating javascript with the Bootstrap library is super easy. Below we go over the basics and provide you with some awesome plugins to get you started!</p>
+       <hr>
+       <p><a class="btn primary" href="./javascript.html">Skip to Bootstrap plugins &raquo;</a></p>
      </div>
      <div class="span12">
-       <h2>Getting started</h2>
-       <p>We've set out to make your interactive work with Bootstrap even more simple, offering several lightweight plugins for things like modals, tooltips, and other dynamic components. These plugins have been coded up to work with either <a href="http://jquery.com/" target="_blank">jQuery</a> or <a href="http://ender.no.de" target="_blank">Ender</a>, but we encourage you to extend and modify them to fit your development needs!</p>
-       <h2>Do I need javascript?</h2>
-       <p>The short answer is <strong>no</strong>... of course not! However, for those who need it, we've provided the plugins below to help you understand how to integrate bootstrap with javascript and to give you a quick lightweight option for dropping something in and getting the basic functionality right away! For more information on these plugins and to see demos of them in action, please refer to our <a href="./javascript.html">plugin documentation page</a>.</p>
+      <h3>What's included</h3>
+       <p>Bring some of Bootstrap's primary components to life with new custom plugins that work with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>. We encourage you to extend and modify them to fit your specific development needs.</p>
        <table class="zebra-striped">
          <thead>
            <tr>
@@ -1557,6 +1558,10 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
            </tr>
          </tbody>
        </table>
+       <h3>Is javascript necessary?</h3>
+       <p><strong>Nope!</strong> Bootstrap is designed first and foremost to be a CSS library. This javascript provides a basic interactive layer on top of the included styles.</p>
+       <p>However, for those who do need javascript, we've provided the plugins above to help you understand how to integrate Bootstrap with javascript and to give you a quick, lightweight option for the basic functionality right away.</p>
+       <p>For more information and to see some live demos, please refer to our <a href="./javascript.html">plugin documentation page</a>.</p>
      </div>
    </div>
 
@@ -1709,19 +1714,19 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
 
 </section>
 
+
+
     </div><!-- /container -->
 
-    <div id="footer">
-      <div class="inner">
-        <div class="container">
-          <p class="right"><a href="#">Back to top</a></p>
-          <p>
-            Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br />
-            Licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>.
-          </p>
-        </div>
+    <footer class="footer">
+      <div class="container">
+        <p class="pull-right"><a href="#">Back to top</a></p>
+        <p>
+          Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.<br />
+          Licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>.
+        </p>
       </div>
-    </div>
+    </footer>
 
   </body>
 </html>
-- 
cgit v1.2.3


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: add stubbed out table for how to compile less

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

(limited to 'docs/index.html')

diff --git a/docs/index.html b/docs/index.html
index 611e28b13..bca04b1a0 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>
 
-- 
cgit v1.2.3


From 536fe2c7437969ec64c14d6d790c5e7c684a6ccc Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Sat, 10 Sep 2011 21:54:11 -0700
Subject: add footer to js docs

---
 docs/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/index.html')

diff --git a/docs/index.html b/docs/index.html
index bca04b1a0..5fe222945 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1739,4 +1739,4 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
     </footer>
 
   </body>
-</html>
+</html>
\ No newline at end of file
-- 
cgit v1.2.3