How to Use the Grid
(Difference between revisions)
m |
m |
||
| Line 9: | Line 9: | ||
<h2>The Grid</h2> | <h2>The Grid</h2> | ||
<br> | <br> | ||
| − | In PageLines Framework 2.2, we have added more functionality from bootstrap -- an adaptation of their scaffolding system, <a href="http://twitter.github.com/bootstrap/scaffolding.html#gridSystem">The Grid</a>. The Grid allows you to build a highly | + | In PageLines Framework 2.2, we have added more functionality from bootstrap -- an adaptation of their scaffolding system, <a href="http://twitter.github.com/bootstrap/scaffolding.html#gridSystem">The Grid</a>. The Grid allows you to build a highly customizable, responsive layout with simple syntax. You can view an example of the Grid in use at <a href="#example">the PageLines 2.2 Demo Site</a> |
</div> | </div> | ||
</div> | </div> | ||
<div class="row"> | <div class="row"> | ||
<div class="span8" | <div class="span8" | ||
| − | < | + | <h2>The Syntax</h2> |
| − | <br> | + | <br><br> |
<pre class="prettyprint linenums"> | <pre class="prettyprint linenums"> | ||
<div class="row"> | <div class="row"> | ||
Revision as of 00:27, 12 May 2012
The Grid
In PageLines Framework 2.2, we have added more functionality from bootstrap -- an adaptation of their scaffolding system, The Grid. The Grid allows you to build a highly customizable, responsive layout with simple syntax. You can view an example of the Grid in use at the PageLines 2.2 Demo Site
The Syntax
This code will produce a 3 column layout the width of your post or page content section (It is responsive to your website's width!)
<div class="row">
<div class="span4">
<p>...</p>
</div>
<div class="span4">
<p>...</p>
</div>
<div class="span4">
<p>...</p>
</div>
</div>
This code will produce a 3 column layout the width of your post or page content section (It is responsive to your website's width!)