From e7d2218b2043742f21c368d074d97a4bde275730 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Sun, 16 Oct 2011 23:04:31 -0700
Subject: few tweaks to responsive stuff, updated docs for grid system (still
 needs copy editing)

---
 docs/index.html | 165 +++++++++++++++++++++++++++-----------------------------
 1 file changed, 78 insertions(+), 87 deletions(-)

(limited to 'docs/index.html')

diff --git a/docs/index.html b/docs/index.html
index 3bc72751e..eeb0f4f0d 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -86,7 +86,7 @@
             <h4>Feature highlights</h4>
             <ul>
               <li><span>&times;</span> Built on LESS</li>
-              <li><span>&times;</span> Complete styleguide</li>
+              <li><span>&times;</span> Complete styleguide docs</li>
               <li><span>&times;</span> Fully responsive design</li>
               <li><span>&times;</span> Small footprint (7kb gzipped)</li>
               <li><span>&times;</span> Support for IE7 and up</li>
@@ -199,28 +199,10 @@
 ================================================== -->
 <section id="grid-system">
   <div class="page-header">
-    <h1>Grid system <small>Rock the standard 940px or roll your own</small></h1>
+    <h1>Grid system <small>12 columns with a responsive twist</small></h1>
   </div>
-  <div class="row">
-    <div class="span3">
-      <h2>Default grid</h2>
-      <p>The default grid system provided as part of Bootstrap is a 940px wide 16-column grid. It’s a flavor of the popular 960 grid system, but without the additional margin/padding on the left and right sides.</p>
-    </div>
-    <div class="span9">
-      <h3>Example grid markup</h3>
-      <p>As shown here, a basic layout can be created with two "columns," each spanning a number of the 16 foundational columns we defined as part of our grid system. See the examples below for more variations.</p>
-<pre class="prettyprint linenums">
-&lt;div class="row"&gt;
-  &lt;div class="span6"&gt;
-    ...
-  &lt;/div&gt;
-  &lt;div class="span10"&gt;
-    ...
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-    </div>
-  </div><!-- /row -->
+
+  <h2>Default 940px grid</h2>
   <div class="row show-grid">
     <div class="span1">1</div>
     <div class="span1">1</div>
@@ -252,12 +234,28 @@
     <div class="span12">12</div>
   </div>
 
-  <br>
+  <div class="row">
+    <div class="span4">
+      <p>The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.</p>
+      <p>It also has three responsive variations for various devices and resolutions: phone, tablet, and large widescreen desktops.</p>
+    </div>
+    <div class="span4">
+<pre class="prettyprint linenums">
+&lt;div class="row"&gt;
+  &lt;div class="span4"&gt;...&lt;/div&gt;
+  &lt;div class="span8"&gt;...&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+    </div>
+    <div class="span4">
+      <p>As shown here, a basic layout can be created with two "columns," each spanning a number of the 12 foundational columns we defined as part of our grid system.</p>
+    </div>
+  </div><!-- /row -->
 
   <h2>Offsetting columns</h2>
   <div class="row show-grid">
     <div class="span4">4</div>
-    <div class="span8 offset4">8 offset 4</div>
+    <div class="span4 offset4">4 offset 4</div>
   </div><!-- /row -->
   <div class="row show-grid">
     <div class="span3 offset3">3 offset 3</div>
@@ -269,37 +267,33 @@
 
   <br>
 
+  <h2>Nesting columns</h2>
   <div class="row">
-    <div class="span3">
-      <h2>Nesting columns</h2>
-      <p>Nest your content if you must by creating a <code>.row</code> within an existing column.</p>
-    </div>
-    <div class="span9">
-      <h4>Example of nested columns</h4>
+    <div class="span6">
+      <p>With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.</p>
+      <h4>Example</h4>
       <div class="row show-grid">
-        <div class="span9">
+        <div class="span6">
           Level 1 of column
           <div class="row show-grid">
-            <div class="span4">
+            <div class="span3">
               Level 2
             </div>
-            <div class="span5">
+            <div class="span3">
               Level 2
             </div>
           </div>
         </div>
       </div>
+    </div>
+    <div class="span6">
 <pre class="prettyprint linenums">
 &lt;div class="row"&gt;
   &lt;div class="span12"&gt;
     Level 1 of column
     &lt;div class="row"&gt;
-      &lt;div class="span6"&gt;
-        Level 2
-      &lt;/div&gt;
-      &lt;div class="span6"&gt;
-        Level 2
-      &lt;/div&gt;
+      &lt;div class="span6"&gt;Level 2&lt;/div&gt;
+      &lt;div class="span6"&gt;Level 2&lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
 &lt;/div&gt;
@@ -307,56 +301,53 @@
     </div>
   </div>
 
-  <br>
-
+  <h2>Grid customization</h2>
+  <table class="zebra-striped">
+    <thead>
+      <tr>
+        <th>Variable</th>
+        <th>Default value</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>@gridColumns</code></td>
+        <td>16</td>
+        <td>The number of columns within the grid</td>
+      </tr>
+      <tr>
+        <td><code>@gridColumnWidth</code></td>
+        <td>40px</td>
+        <td>The width of each column within the grid</td>
+      </tr>
+      <tr>
+        <td><code>@gridGutterWidth</code></td>
+        <td>20px</td>
+        <td>The negative space between each column</td>
+      </tr>
+      <tr>
+        <td><code>@siteWidth</code></td>
+        <td><em>Computed sum of all columns and gutters</em></td>
+        <td>We use some basic match to count the number of columns and gutters and set the width of the <code>.fixed-container()</code> mixin.</td>
+      </tr>
+    </tbody>
+  </table>
   <div class="row">
-    <div class="span3">
-      <h2>Roll your own grid</h2>
-      <p>Built into Bootstrap are a handful of variables for customizing the default 940px grid system. With a bit of customization, you can modify the size of columns, their gutters, and the container they reside in.</p>
+    <div class="span4">
+      <h3>Variables in LESS</h3>
+      <p>Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in mixins.less.</p>
     </div>
-    <div class="span9">
-      <h3>Inside the grid</h3>
-      <p>The variables needed to modify the grid system currently all reside in <code>preboot.less</code>.</p>
-      <table class="zebra-striped">
-        <thead>
-          <tr>
-            <th>Variable</th>
-            <th>Default value</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td><code>@gridColumns</code></td>
-            <td>16</td>
-            <td>The number of columns within the grid</td>
-          </tr>
-          <tr>
-            <td><code>@gridColumnWidth</code></td>
-            <td>40px</td>
-            <td>The width of each column within the grid</td>
-          </tr>
-          <tr>
-            <td><code>@gridGutterWidth</code></td>
-            <td>20px</td>
-            <td>The negative space between each column</td>
-          </tr>
-          <tr>
-            <td><code>@siteWidth</code></td>
-            <td><em>Computed sum of all columns and gutters</em></td>
-            <td>We use some basic match to count the number of columns and gutters and set the width of the <code>.fixed-container()</code> mixin.</td>
-          </tr>
-        </tbody>
-      </table>
-      <h3>Now to customize</h3>
-      <p>Modifying the grid means changing the three <code>@grid-*</code> variables and recompiling the Less files.</p>
-      <p>Bootstrap comes equipped to handle a grid system with up to 24 columns; the default is just 16. Here's how your grid variables would look customized to a 24-column grid.</p>
-      <pre class="prettyprint linenums">@gridColumns:       24;
-@gridColumnWidth:   20px;
-@gridGutterWidth:   20px;</pre>
-      <p>Once recompiled, you'll be set!</p>
+    <div class="span4">
+      <h3>How to customize</h3>
+      <p>Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grids in the preboot.less file and use one of the <a href="#compiling">four ways documented to recompile</a>.</p>
     </div>
-  </div>
+    <div class="span4">
+      <h3>Staying responsive</h3>
+      <p>Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.</p>
+    </div>
+  </div><!-- /row -->
+
 </section>
 
 
@@ -1928,7 +1919,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
 }
 </pre>
 
-    <h2>Compiling Less</h2>
+    <h2 id="compiling">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 class="zebra-striped">
-- 
cgit v1.2.3