diff options
| author | Mark Otto <[email protected]> | 2011-09-09 20:47:38 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2011-09-09 20:47:38 -0700 |
| commit | c56e229ed73824778c672a67e7e70c4521623fe9 (patch) | |
| tree | e48aa6d7fe6465fd624dbc3e2072a96f699197cb | |
| parent | dad058326e5aca45161887c246861e64d7192dca (diff) | |
| download | bootstrap-c56e229ed73824778c672a67e7e70c4521623fe9.tar.xz bootstrap-c56e229ed73824778c672a67e7e70c4521623fe9.zip | |
start updating the grid docs for customizing it
| -rw-r--r-- | docs/index.html | 80 |
1 files changed, 67 insertions, 13 deletions
diff --git a/docs/index.html b/docs/index.html index 4d722d867..79f8f3012 100644 --- a/docs/index.html +++ b/docs/index.html @@ -263,7 +263,10 @@ <div class="row show-grid" title="Unnecessary single column layout"> <div class="span16">16</div> </div><!-- /row --> - <h3>Offsetting columns</h3> + + <br> + + <h2>Offsetting columns</h2> <div class="row show-grid"> <div class="span4">4</div> <div class="span8 offset4">8 offset 4</div> @@ -283,22 +286,73 @@ <div class="span10 offset6">10 offset 6</div> </div><!-- /row --> - <h3>Nesting columns</h3> - <p>Nest your content if you must by creating a <code>.row</code> within an existing column.</p> - <div class="row show-grid"> - <div class="span10"> - Level 1 of column + <br> + + <div class="row"> + <div class="span4"> + <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="span12"> + <h4>Example of nested columns</h4> <div class="row show-grid"> - <div class="span5"> - Level 2 - </div> - <div class="span5"> - Level 2 + <div class="span12"> + Level 1 of column + <div class="row show-grid"> + <div class="span6"> + Level 2 + </div> + <div class="span6"> + Level 2 + </div> + </div> </div> </div> </div> - <div class="span6"> - Level 1 of column + </div> + + <br> + + <div class="row"> + <div class="span4"> + <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> + <div class="span12"> + <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> + <p></p> </div> </div> </section> |