Using the PageLines Responsive Grid

One of the key features of the PageLines framework is the responsive grid system that is built right in. It may take a bit of code but its straight forward and easy to implement. Cool, right?

Let's have a look at the key components from a developer's viewpoint. The first thing we should look at is the markup. Then we need to look at ... well, once we have the markup then its all gravy.

Here's a quick summary of the basic built in grids:

• two (2) column
• three (3) column
• four (4) column
• five (5) column

To put them to use simply create your markup with these respective structures:

Two Column

 content 
 content 

Three Column

 content 
 content 
 content 

Four Column

 content 
 content 
 content 
 content 

Five Column

 content 
 content 
 content 
 content 
 content 

There we go ... the basic grids; and you can expect them to be fluid and responsive.

If you need to squeeze out a bit more room you can change to the "full" mode, which uses padding instead of margins. Its quite easy actually, you just need to add the additional class ppfull.

Here is some example markup of the three column grid in full mode:

Three Column - Full

 content 
 content 
 content 

The other structures would follow the same method of adding the ppfull class to the initial div container. You might have noticed all of the structures start with the exact same div container ... now that's easy to remember!