clear up scaffolding page to separate fixed from fluid grid systems

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index 5a3e369357b1dd1542f55fe84a6aa9cca9d4b602..b15d66b4a1c0760e396fc221d13e0a7cfd9c017e 100644 (file)
Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ

diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index c8c63029649ed40221db1c26858386f1e8f88b3b..de454224ea7b434588ca9519e72486bb53d61e54 100644 (file)
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -205,40 +205,40 @@
   .row-fluid > [class*="span"]:first-child {
     margin-left: 0;
   }
-  .row-fluid .span1 {
+  .row-fluid > .span1 {
     width: 5.801104972%;
   }
-  .row-fluid .span2 {
+  .row-fluid > .span2 {
     width: 14.364640883%;
   }
-  .row-fluid .span3 {
+  .row-fluid > .span3 {
     width: 22.928176794%;
   }
-  .row-fluid .span4 {
+  .row-fluid > .span4 {
     width: 31.491712705%;
   }
-  .row-fluid .span5 {
+  .row-fluid > .span5 {
     width: 40.055248616%;
   }
-  .row-fluid .span6 {
+  .row-fluid > .span6 {
     width: 48.618784527%;
   }
-  .row-fluid .span7 {
+  .row-fluid > .span7 {
     width: 57.182320438000005%;
   }
-  .row-fluid .span8 {
+  .row-fluid > .span8 {
     width: 65.74585634900001%;
   }
-  .row-fluid .span9 {
+  .row-fluid > .span9 {
     width: 74.30939226%;
   }
-  .row-fluid .span10 {
+  .row-fluid > .span10 {
     width: 82.87292817100001%;
   }
-  .row-fluid .span11 {
+  .row-fluid > .span11 {
     width: 91.436464082%;
   }
-  .row-fluid .span12 {
+  .row-fluid > .span12 {
     width: 99.999999993%;
   }
   input.span1, textarea.span1, .uneditable-input.span1 {
@@ -486,40 +486,40 @@
   .row-fluid > [class*="span"]:first-child {
     margin-left: 0;
   }
-  .row-fluid .span1 {
+  .row-fluid > .span1 {
     width: 5.982905983%;
   }
-  .row-fluid .span2 {
+  .row-fluid > .span2 {
     width: 14.529914530000001%;
   }
-  .row-fluid .span3 {
+  .row-fluid > .span3 {
     width: 23.076923077%;
   }
-  .row-fluid .span4 {
+  .row-fluid > .span4 {
     width: 31.623931624%;
   }
-  .row-fluid .span5 {
+  .row-fluid > .span5 {
     width: 40.170940171000005%;
   }
-  .row-fluid .span6 {
+  .row-fluid > .span6 {
     width: 48.717948718%;
   }
-  .row-fluid .span7 {
+  .row-fluid > .span7 {
     width: 57.264957265%;
   }
-  .row-fluid .span8 {
+  .row-fluid > .span8 {
     width: 65.81196581200001%;
   }
-  .row-fluid .span9 {
+  .row-fluid > .span9 {
     width: 74.358974359%;
   }
-  .row-fluid .span10 {
+  .row-fluid > .span10 {
     width: 82.905982906%;
   }
-  .row-fluid .span11 {
+  .row-fluid > .span11 {
     width: 91.45299145300001%;
   }
-  .row-fluid .span12 {
+  .row-fluid > .span12 {
     width: 100%;
   }
   input.span1, textarea.span1, .uneditable-input.span1 {

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 754e9af2d35ca44d4d0f80fd76cfb6bb576e1099..61e67360c476483e813b6a24acab2de0854b9a58 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -212,40 +212,40 @@ a:hover {
 .row-fluid > [class*="span"]:first-child {
   margin-left: 0;
 }
-.row-fluid .span1 {
+.row-fluid > .span1 {
   width: 6.382978723%;
 }
-.row-fluid .span2 {
+.row-fluid > .span2 {
   width: 14.89361702%;
 }
-.row-fluid .span3 {
+.row-fluid > .span3 {
   width: 23.404255317%;
 }
-.row-fluid .span4 {
+.row-fluid > .span4 {
   width: 31.914893614%;
 }
-.row-fluid .span5 {
+.row-fluid > .span5 {
   width: 40.425531911%;
 }
-.row-fluid .span6 {
+.row-fluid > .span6 {
   width: 48.93617020799999%;
 }
-.row-fluid .span7 {
+.row-fluid > .span7 {
   width: 57.446808505%;
 }
-.row-fluid .span8 {
+.row-fluid > .span8 {
   width: 65.95744680199999%;
 }
-.row-fluid .span9 {
+.row-fluid > .span9 {
   width: 74.468085099%;
 }
-.row-fluid .span10 {
+.row-fluid > .span10 {
   width: 82.97872339599999%;
 }
-.row-fluid .span11 {
+.row-fluid > .span11 {
   width: 91.489361693%;
 }
-.row-fluid .span12 {
+.row-fluid > .span12 {
   width: 99.99999998999999%;
 }
 .container {

diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index ba79465afe5da7f03036e9d0df7aaaff449c04cc..18ec5fb422a3feb7892e11525a9e452feb686f98 100644 (file)
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -81,7 +81,9 @@
         <p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
         <div class="subnav">
           <ul class="nav nav-pills">
-            <li><a href="#grid-system">Grid system</a></li>
+            <li><a href="#gridSystem">Grid system</a></li>
+            <li><a href="#fluidGridSystem">Fluid gird system</a></li>
+            <li><a href="#gridCustomization">Customizing</a></li>
             <li><a href="#layouts">Layouts</a></li>
             <li><a href="#responsive">Responsive design</a></li>
           </ul>
@@ -92,12 +94,11 @@
 
 <!-- Grid system
 ================================================== -->
-<section id="grid-system">
+<section id="gridSystem">
   <div class="page-header">
-    <h1>Grid system <small>12 columns with a responsive twist</small></h1>
+    <h1>Default grid system <small>12 columns with a responsive twist</small></h1>
   </div>
 
-  <h2>Default grid</h2>
   <div class="row show-grid">
     <div class="span1">1</div>
     <div class="span1">1</div>
@@ -188,7 +189,87 @@
           </div>
         </div>
       </div>
-      <h3>Fluid example</h3>
+    </div><!-- /span6 -->
+    <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&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+    </div>
+  </div>
+</section>
+
+
+
+<!-- Fluid grid system
+================================================== -->
+<section id="fluidGridSystem">
+  <div class="page-header">
+    <h1>Fluid grid system <small>12 responsive, percent-based columns</small></h1>
+  </div>
+
+  <h2>Fluid columns</h2>
+  <div class="row-fluid show-grid">
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span4">4</div>
+    <div class="span4">4</div>
+    <div class="span4">4</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span4">4</div>
+    <div class="span8">8</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span6">6</div>
+    <div class="span6">6</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span12">12</div>
+  </div>
+
+  <div class="row">
+    <div class="span4">
+      <h3>Percents, not pixels</h3>
+      <p>The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.</p>
+    </div>
+    <div class="span4">
+      <h3>Fluid rows</h3>
+      <p>Make any row fluid simply by changing <code>.row</code> to <code>.row-fluid</code>. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.</p>
+    </div>
+    <div class="span4">
+      <h3>Markup</h3>
+<pre class="prettyprint linenums">
+&lt;div class="row-fluid"&gt;
+  &lt;div class="span4"&gt;...&lt;/div&gt;
+  &lt;div class="span8"&gt;...&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+    </div>
+  </div><!-- /row -->
+
+  <h2>Fluid nesting</h2>
+  <div class="row">
+    <div class="span6">
       <p>Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.</p>
       <div class="row-fluid show-grid">
         <div class="span12">
@@ -206,10 +287,10 @@
     </div>
     <div class="span6">
 <pre class="prettyprint linenums">
-&lt;div class="row"&gt;
+&lt;div class="row-fluid"&gt;
   &lt;div class="span12"&gt;
     Level 1 of column
-    &lt;div class="row"&gt;
+    &lt;div class="row-fluid"&gt;
       &lt;div class="span6"&gt;Level 2&lt;/div&gt;
       &lt;div class="span6"&gt;Level 2&lt;/div&gt;
     &lt;/div&gt;
@@ -219,7 +300,16 @@
     </div>
   </div>
 
-  <h2>Grid customization</h2>
+</section>
+
+
+
+<!-- Customizaton
+================================================== -->
+<section id="gridCustomization">
+  <div class="page-header">
+    <h1>Grid customization</h1>
+  </div>
   <table class="table table-bordered table-striped">
     <thead>
       <tr>
@@ -281,8 +371,8 @@
     <div class="span6">
       <h2>Fixed layout</h2>
       <p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code>&lt;div class="container"&gt;</code>.</p>
-      <div class="minicon-layout">
-        <div class="minicon-layout-body"></div>
+      <div class="mini-layout">
+        <div class="mini-layout-body"></div>
       </div>
 <pre class="prettyprint linenums">
 &lt;body&gt;
@@ -295,9 +385,9 @@
     <div class="span6">
       <h2>Fluid layout</h2>
       <p><code>&lt;div class="container-fluid"&gt;</code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.</p>
-      <div class="minicon-layout fluid">
-        <div class="minicon-layout-sidebar"></div>
-        <div class="minicon-layout-body"></div>
+      <div class="mini-layout fluid">
+        <div class="mini-layout-sidebar"></div>
+        <div class="mini-layout-body"></div>
       </div>
 <pre class="prettyprint linenums">
 &lt;div class="container-fluid"&gt;

diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache
index 74b824d9ca2822f0a7a42f20146c8c83239e778a..cc3cceea78b961064a406b87bfcc0a3e67ed5479 100644 (file)
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -5,7 +5,9 @@
         <p class="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>
         <div class="subnav">
           <ul class="nav nav-pills">
-            <li><a href="#grid-system">{{_i}}Grid system{{/i}}</a></li>
+            <li><a href="#gridSystem">{{_i}}Grid system{{/i}}</a></li>
+            <li><a href="#fluidGridSystem">{{_i}}Fluid gird system{{/i}}</a></li>
+            <li><a href="#gridCustomization">{{_i}}Customizing{{/i}}</a></li>
             <li><a href="#layouts">{{_i}}Layouts{{/i}}</a></li>
             <li><a href="#responsive">{{_i}}Responsive design{{/i}}</a></li>
           </ul>
@@ -16,12 +18,11 @@
 
 <!-- Grid system
 ================================================== -->
-<section id="grid-system">
+<section id="gridSystem">
   <div class="page-header">
-    <h1>{{_i}}Grid system <small>12 columns with a responsive twist</small>{{/i}}</h1>
+    <h1>{{_i}}Default grid system <small>12 columns with a responsive twist</small>{{/i}}</h1>
   </div>
 
-  <h2>{{_i}}Default grid{{/i}}</h2>
   <div class="row show-grid">
     <div class="span1">1</div>
     <div class="span1">1</div>
@@ -112,7 +113,87 @@
           </div>
         </div>
       </div>
-      <h3>{{_i}}Fluid example{{/i}}</h3>
+    </div><!-- /span6 -->
+    <div class="span6">
+<pre class="prettyprint linenums">
+&lt;div class="row"&gt;
+  &lt;div class="span12"&gt;
+    {{_i}}Level 1 of column{{/i}}
+    &lt;div class="row"&gt;
+      &lt;div class="span6"&gt;{{_i}}Level 2{{/i}}&lt;/div&gt;
+      &lt;div class="span6"&gt;{{_i}}Level 2{{/i}}&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+    </div>
+  </div>
+</section>
+
+
+
+<!-- Fluid grid system
+================================================== -->
+<section id="fluidGridSystem">
+  <div class="page-header">
+    <h1>{{_i}}Fluid grid system <small>12 responsive, percent-based columns</small>{{/i}}</h1>
+  </div>
+
+  <h2>{{_i}}Fluid columns{{/i}}</h2>
+  <div class="row-fluid show-grid">
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span4">4</div>
+    <div class="span4">4</div>
+    <div class="span4">4</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span4">4</div>
+    <div class="span8">8</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span6">6</div>
+    <div class="span6">6</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span12">12</div>
+  </div>
+
+  <div class="row">
+    <div class="span4">
+      <h3>{{_i}}Percents, not pixels{{/i}}</h3>
+      <p>{{_i}}The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.{{/i}}</p>
+    </div>
+    <div class="span4">
+      <h3>{{_i}}Fluid rows{{/i}}</h3>
+      <p>{{_i}}Make any row fluid simply by changing <code>.row</code> to <code>.row-fluid</code>. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.{{/i}}</p>
+    </div>
+    <div class="span4">
+      <h3>{{_i}}Markup{{/i}}</h3>
+<pre class="prettyprint linenums">
+&lt;div class="row-fluid"&gt;
+  &lt;div class="span4"&gt;...&lt;/div&gt;
+  &lt;div class="span8"&gt;...&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+    </div>
+  </div><!-- /row -->
+
+  <h2>{{_i}}Fluid nesting{{/i}}</h2>
+  <div class="row">
+    <div class="span6">
       <p>{{_i}}Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.{{/i}}</p>
       <div class="row-fluid show-grid">
         <div class="span12">
@@ -130,10 +211,10 @@
     </div>
     <div class="span6">
 <pre class="prettyprint linenums">
-&lt;div class="row"&gt;
+&lt;div class="row-fluid"&gt;
   &lt;div class="span12"&gt;
     {{_i}}Level 1 of column{{/i}}
-    &lt;div class="row"&gt;
+    &lt;div class="row-fluid"&gt;
       &lt;div class="span6"&gt;{{_i}}Level 2{{/i}}&lt;/div&gt;
       &lt;div class="span6"&gt;{{_i}}Level 2{{/i}}&lt;/div&gt;
     &lt;/div&gt;
@@ -143,7 +224,16 @@
     </div>
   </div>
 
-  <h2>{{_i}}Grid customization{{/i}}</h2>
+</section>
+
+
+
+<!-- Customizaton
+================================================== -->
+<section id="gridCustomization">
+  <div class="page-header">
+    <h1>{{_i}}Grid customization{{/i}}</h1>
+  </div>
   <table class="table table-bordered table-striped">
     <thead>
       <tr>
@@ -205,8 +295,8 @@
     <div class="span6">
       <h2>{{_i}}Fixed layout{{/i}}</h2>
       <p>{{_i}}The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code>&lt;div class="container"&gt;</code>.{{/i}}</p>
-      <div class="minicon-layout">
-        <div class="minicon-layout-body"></div>
+      <div class="mini-layout">
+        <div class="mini-layout-body"></div>
       </div>
 <pre class="prettyprint linenums">
 &lt;body&gt;
@@ -219,9 +309,9 @@
     <div class="span6">
       <h2>{{_i}}Fluid layout{{/i}}</h2>
       <p>{{_i}}<code>&lt;div class="container-fluid"&gt;</code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.{{/i}}</p>
-      <div class="minicon-layout fluid">
-        <div class="minicon-layout-sidebar"></div>
-        <div class="minicon-layout-body"></div>
+      <div class="mini-layout fluid">
+        <div class="mini-layout-sidebar"></div>
+        <div class="mini-layout-body"></div>
       </div>
 <pre class="prettyprint linenums">
 &lt;div class="container-fluid"&gt;

diff --git a/less/mixins.less b/less/mixins.less
index fffb6c1ceb3039a426e99675e121e770ed112fc9..c2fc2c745873fd75ace8bb7d586669ec3150f18c 100644 (file)
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -208,13 +208,13 @@
   // Setup the mixins to be used
   .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, @columns) {
     width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
-  } 
+  }
   .gridColumn(@fluidGridGutterWidth) {
     float: left;
     margin-left: @fluidGridGutterWidth;
   }
   // Take these values and mixins, and make 'em do their thang
-  .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {      
+  .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {
     // Row surrounds the columns
     .row-fluid {
       width: 100%;
@@ -228,18 +228,18 @@
         margin-left: 0;
       }
       // Default columns
-      .span1     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); }
-      .span2     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); }
-      .span3     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); }
-      .span4     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); }
-      .span5     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); }
-      .span6     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); }
-      .span7     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); }
-      .span8     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); }
-      .span9     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); }
-      .span10    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); }
-      .span11    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); }
-      .span12    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); }
+      > .span1     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); }
+      > .span2     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); }
+      > .span3     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); }
+      > .span4     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); }
+      > .span5     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); }
+      > .span6     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); }
+      > .span7     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); }
+      > .span8     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); }
+      > .span9     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); }
+      > .span10    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); }
+      > .span11    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); }
+      > .span12    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); }
     }
   }
 }