How to Use the Grid
(Difference between revisions)
m |
m |
||
| Line 24: | Line 24: | ||
</div> | </div> | ||
The Grid can be used in any post, page or section within your PageLines theme. As long as the section you are coding grid syntax into is enabled on your page's template, it will render elegantly.<br><br> | The Grid can be used in any post, page or section within your PageLines theme. As long as the section you are coding grid syntax into is enabled on your page's template, it will render elegantly.<br><br> | ||
| − | The Grid consists of rows and columns. The row is simply given to the div tag as a class called <span style="color:red;">"row"</span>, and it is filled with "columns". There are 12 possible columns in a row, and they are given to the div tag as a class called <span style="color:red;">"span(1-12)"</span>. Depending upon the number you choose immediately following the "span" class determines how much | + | The Grid consists of rows and columns. The row is simply given to the div tag as a class called <span style="color:red;">"row"</span>, and it is filled with "columns". There are 12 possible columns in a row, and they are given to the div tag as a class called <span style="color:red;">"span(1-12)"</span>. Depending upon the number you choose immediately following the "span" class determines how much space in the row that column or "span" will take up.<br> |
So to begin a new row, we use the <div> tag and give it a | So to begin a new row, we use the <div> tag and give it a | ||
Revision as of 23:10, 12 May 2012
The Grid One Container To Rule Them All
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 Basics Where and How can I use the Grid?
The Grid consists of rows and columns. The row is simply given to the div tag as a class called "row", and it is filled with "columns". There are 12 possible columns in a row, and they are given to the div tag as a class called "span(1-12)". Depending upon the number you choose immediately following the "span" class determines how much space in the row that column or "span" will take up.
So to begin a new row, we use the <div> tag and give it a
The following sections allow Grid syntax
The Syntax
<div class="row">
<div class="span4">
<p>Here is some content in the first section of our span4 column!</p>
</div>
<div class="span4">
<p>This content is in another span4 column, and now we are at a total of 8 columns.</p>
</div>
<div class="span4">
<p>This last bit of content is also in a column that spans 4 spaces, so that brings us to the ultimate number of 12.</p>
</div>
</div>
Below this box is what that funky code up there looks like when it is put into your post, page or content box!
Here is some content in the first section of our span4 column!
This content is in another span4 column, and now we are at a total of 8 columns.
This last bit of content is also in a column that spans 4 spaces, so that brings us to the ultimate number of 12.
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!)