Docs

How to Use the Grid

[edit] Please Note

These docs are now deprecated, we have a new Support area located here

(Difference between revisions)
m
m
 
(27 intermediate revisions by one user not shown)
Line 2: Line 2:
 
<div class="row">
 
<div class="row">
 
<div class="span12">
 
<div class="span12">
−
<a class="btn btn-danger" href="#">New in PageLines 2.2</a>
+
<div class="page-header">
−
</div>
+
−
</div>
+
−
<div class="row">
+
−
<div class="span12">
+
−
<div class="page-header">
+
 
<h1>The Grid
 
<h1>The Grid
 
<small>One Container To Rule Them All</small>
 
<small>One Container To Rule Them All</small>
 
</h1>
 
</h1>
 
</div>
 
</div>
−
<br>
+
</div>
 +
</div>
 +
<div class="row">
 +
<div class="span7">
 +
<a class="btn btn-danger" href="#">New in PageLines 2.2</a>
 +
<ul class="thumbnails unstyled">
 +
<li class="span7">
 +
<div class="thumbnail">
 +
<a href="#">
 +
        <img class="pl-imageframe" src="http://placehold.it/300x250" alt="Place Holder">
 +
        </a>
 +
        <div class="caption" style="text-align:center;">
 +
        <p>Placeholder image for Grid Content Image</p>
 +
        </div>
 +
        </div>
 +
        </li>
 +
        </ul>   
 +
        </div>
 +
<div class="span5">
 +
<div style="padding:10px;
 +
background-color: transparent;
 +
border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
-moz-box-shadow: 0 0 5px #AAAAAA;
 +
-webkit-box-shadow: 0 0 6px #AAAAAA;
 +
box-shadow: 0 0 6px #AAAAAA;">
 +
        <ul class="nav nav-list unstyled">
 +
          <li class="nav-header">Other New Features</li>
 +
          <li class="active"><a href="#">How to Use the Grid</a></li>
 +
          <li><a href="http://www.pagelines.com/wiki/How_to_Use_Intro_Unit">Intro Unit</a></li>
 +
          <li><a href="http://www.pagelines.com/wiki/How_to_Use_Masthead">Masthead</a></li>
 +
          <li><a href="http://www.pagelines.com/wiki/Bootstrap_Shortcodes_System">Bootstrap Shortcode System</a></li>
 +
          <li><a href="http://www.pagelines.com/wiki/Introducing_PageLESS">PageLESS CSS</a></li>
 +
          <li><a href="http://www.pagelines.com/wiki/How_to_Use_ScrollSpy">ScrollSpy</a></li>
 +
          <li><a href="http://www.pagelines.com/wiki/How_to_use_NavBar">NavBar</a></li>
 +
          <li class="divider"></li>
 +
          <li><a href="#">Help</a></li>
 +
        </ul>
 +
        </div>
 +
        </div>
 +
</div>
 +
<!--
 +
End Header & Navigation
 +
-->
 +
<div class="row">
 +
<div class="span12">
 
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>
 
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>
Line 23: Line 63:
 
</h1>
 
</h1>
 
</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.
−
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.
+
<p>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.</p>
  
 
<p>The following sections allow Grid syntax: <a href="#">Content Box</a>, <a href="#">Content</a> and <a href="#">Grid Layout</a>.  Content and Grid Layout, by default will use Wordpress's built in text editor to define the Grid, while the Content Box will use the Textarea field as the editor.</p>
 
<p>The following sections allow Grid syntax: <a href="#">Content Box</a>, <a href="#">Content</a> and <a href="#">Grid Layout</a>.  Content and Grid Layout, by default will use Wordpress's built in text editor to define the Grid, while the Content Box will use the Textarea field as the editor.</p>
Line 33: Line 73:
 
<strong>Tip:</strong>If you are going to use the Grid in a Content Box, utilize Content Box's <strong>Content Box Class</strong> field to further customize your grid.
 
<strong>Tip:</strong>If you are going to use the Grid in a Content Box, utilize Content Box's <strong>Content Box Class</strong> field to further customize your grid.
 
</div>
 
</div>
 +
</div>
 +
</div>
 +
<div class="row">
 +
<div class="span12">
 
<div class="page-header">
 
<div class="page-header">
−
<h1>The Code
+
<h1>Simple Code
−
<small>In all its prettified glory</small>
+
<small>In all its prettified glory</small>
−
</h1>
+
</h1>
 
</div>
 
</div>
−
</html>
+
</div>
−
{{{&lt;div class="row"&gt;
+
</div>
 +
<div class="row">
 +
<div class="span6">
 +
<h4>Simple Usage</h4>
 +
<pre class="prettyprint lang-html linenums">
 +
&lt;div class="row"&gt;
 
   &lt;div class="span4"&gt;
 
   &lt;div class="span4"&gt;
−
     &lt;p&gt;Here is some content in the first section of our span4 column!&lt;/p&gt;
+
     &lt;p&gt;Content&lt;/p&gt;
 
   &lt;/div&gt;
 
   &lt;/div&gt;
 
   &lt;div class="span4"&gt;
 
   &lt;div class="span4"&gt;
−
     &lt;p&gt;This content is in another span4 column, and now we are at a total of 8 columns.&lt;/p&gt;
+
     &lt;p&gt;Content&lt;/p&gt;
 
   &lt;/div&gt;
 
   &lt;/div&gt;
 
   &lt;div class="span4"&gt;
 
   &lt;div class="span4"&gt;
−
     &lt;p&gt;This last bit of content is also in a column that spans 4 spaces, so that brings us to the ultimate number of 12.&lt;/p&gt;
+
     &lt;p&gt;Content&lt;/p&gt;
 
   &lt;/div&gt;
 
   &lt;/div&gt;
−
&lt;/div&gt;}}}
+
&lt;/div&gt;</pre>
−
<html>
+
</div>
−
 
+
<div class="span6">
−
<div class="page-header">
+
<h4>Results</h4>
−
<h1>The Code In Action</h1>
+
<div class="alert alert-info">
−
<small>
+
Below is what <em>that</em> funky code in your post, page or content box will produce. In this case, a 3 column layout. <span style="color:red;">(It is responsive to your website's width!)</span>
−
<div class="alert alert-info">
+
−
Below this box is what that funky code up there looks like when it is put into your post, page or content box!  If all goes as planned this code will produce a 3 column layout the width of your post or page content section <span style="color:red;">(It is responsive to your website's width!)</span>
+
−
</div>
+
−
</small>
+
 
</div>
 
</div>
 
<div class="row">
 
<div class="row">
Line 72: Line 117:
 
</div>
 
</div>
 
</div>
 
</div>
−
</div>
+
<div class="row">
 +
<div class="span6">
 +
<h4>Nested Example</h4>
 +
<pre class="prettyprint lang-html linenums">
 +
&lt;div class="row"&gt;
 +
  &lt;div class="span4"&gt;
 +
  &lt;/div&gt;
 +
  &lt;div class="span8"&gt;
 +
    &lt;div class="row"&gt;
 +
      &lt;div class="span6"&gt;&lt;div&gt;
 +
      &lt;div class="span6"&gt;&lt;div&gt;
 +
  &lt;/div&gt;
 +
&lt;/div&gt;</pre>
 +
</div>
 +
<div class="span6">
 +
<h4>Results</h4>
 +
<div class="alert alert-info">
 +
Below is what that funky code in your post, page or content box will produce. A 2 column layout with 2 nested sections in the 2nd column. <span style="color:red;">(It is responsive to your website's width!)</span>
 +
</div>
 +
<div class="row">
 +
<div class="span4" span style="background-color:#CCCCCC;">
 +
Content
 +
</div>
 +
<div class="span8" span style="background-color:#CCCCCC;">
 +
Content section header
 +
<div class="row">
 +
<div class="span6" span style="background-color:#EEEEEE;">
 +
Content 1
 +
</div>
 +
<div class="span6" span style="background-color:#EEEEEE;">
 +
Content 2
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 
</html>
 
</html>

Latest revision as of 03:48, 18 May 2012

The Grid One Container To Rule Them All

New in PageLines 2.2
  • Place Holder

    Placeholder image for Grid Content Image

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 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.

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.

The following sections allow Grid syntax: Content Box, Content and Grid Layout. Content and Grid Layout, by default will use Wordpress's built in text editor to define the Grid, while the Content Box will use the Textarea field as the editor.

Careful! Do not use the Content and Grid Layout sections on the same page, as they both use Wordpress's editor and will, thus resulting in duplicate content. If you want to use two Grids on one page, pair the Content or Grid Layout sections with a Content Box section.
Tip:If you are going to use the Grid in a Content Box, utilize Content Box's Content Box Class field to further customize your grid.

Simple Code In all its prettified glory

Simple Usage

<div class="row">
  <div class="span4">
    <p>Content</p>
  </div>
  <div class="span4">
    <p>Content</p>
  </div>
  <div class="span4">
    <p>Content</p>
  </div>
</div>

Results

Below is what that funky code in your post, page or content box will produce. In this case, a 3 column layout. (It is responsive to your website's width!)
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.

Nested Example

<div class="row">
  <div class="span4">
  </div>
  <div class="span8">
    <div class="row">
      <div class="span6"><div>
      <div class="span6"><div>
  </div>
</div>

Results

Below is what that funky code in your post, page or content box will produce. A 2 column layout with 2 nested sections in the 2nd column. (It is responsive to your website's width!)
Content
Content section header
Content 1
Content 2

Retrieved from "http://www.pagelines.com/wiki/index.php?title=How_to_Use_the_Grid&oldid=5313"