• Helps you to create a page layout using the Blueprint CSS Framework
  • Takes the div's out of a div-based layout (having to mess with them anyways)
  • Enables you to swap (switch) the reading order of two divs
    • So that you can put content before navigation to make your page more relevant (SEO)
  • Has an internal dummy text generator to speed development time
  • Makes your grid easy to edit and tweak

This class interfaces perfectly with the Page Class. Here's how I use it:

<?php 
 
$page = new Page ('Title'); 
$html = ''; 
 
$html .= '<p>Whatever content gets put into my $html variable.</p>'; 
$html .= '<p>When I\'m done then I call my display_page() function that puts together the whole page layout into one easy to edit file.</p>'; 
 
display_page ($html); // usually this function is included with everything else, but ... 
 
function display_page ($content) { 
  global $page; 
  // $page->link(array('favicon.ico', 'base.css', 'etc.js'), true); // all of the files every page uses - don't forget to download the Blueprint CSS and include it here 
  $html = ''; 
  include_once (BASE . 'common/classes/Blueprint.php'); 
  $bp = new Blueprint(750); 
  $html .= $bp->page(true); 
  $html .= $bp->row('<h1>' . $page->title() . '</h1>'); 
  $html .= $bp->swap(4, 15, 'Links et al.', $content); 
  $html .= $bp->row('Copyright &copy; ' . date('Y') . ' ' . SITE_NAME); 
  $html .= $bp->close(); 
  unset ($bp); 
  echo $page->display($html); 
  ob_end_flush(); 
} 
 
?>

This is the constructor for the class, and it creates a Blueprint CSS object.

$width The width of your grid (in pixels), or how many columns you want. 950 (or 24 columns) is the default. The following is a breakdown of available widths, and their corresponding number of rows:
Width Columns
950 24
910 23
870 22
830 21
790 20
750 19
710 18
670 17
630 16
590 15
550 14
510 13
470 12
430 11
390 10
350 9
310 8
270 7
230 6
190 5
150 4
110 3
70 2
30 1
Returns A Blueprint CSS object.
Example
$bp = new Blueprint;

This method sets up your Blueprint CSS grid.

$showgrid Set to true if you would like to get a visual indication of how everything is being laid out.
Returns A string of code to add to your $html.
Example
$html .= $bp->page (true);

This method inserts a row that spans the length of the entire grid. Use this for your header, footer, etc.

$content The content or your row. This isn't entirely necessary here as anything you add to your $html after this method, and before you call another method from this class will be inserted into your row.
Returns A string of code to add to your $html.
Example
$html .= $bp->row ($bp->div('Row of Content', 1000));

This inserts a column into your grid. When using the Blueprint CSS Framework you must always be mindful of how many rows you have to work with. The default is 24 rows for a 950px layout.

$class How many rows you would like this column to span.
$last If this column uses up the last row in the grid, then you need to say so here by indicating 'last'. The bool true will also do.
$content The content of your column.
Returns A string of code to add to your $html.
Example
$html .= $bp->col (20, '', $bp->div('20 Row Col', 1000)); 
$html .= $bp->col (4, 'last', $bp->div('4 Row Col', 1000));

This method displays two columns in the order given, but behind the scenes (in the source code) the two are swapped so that $column2 comes before $column1. This method is used so that when search engines index your page they see all of the relevant content at the top of your page, and the useful (but not as relevant) content at the bottom of your page. Honesty, I was reluctant to use Blueprint CSS over the YUI Grid Builder because of this one issue, until I figured out how to swap columns. Now I use them both for everything. I won't do a layout without using these classes.

$col1 Number of rows in the first column.
$col2 Number of rows in the second column.
$content1 The content of the first column.
$content2 The content of the second column.
Returns A string of code to add to your $html. If the columns don't add up to the total available, then this method will return an empty string.
Example
$html .= $bp->swap (4, 20, $bp->div('Sidebar On Left', 300), $bp->div('Main Content On Right', 700));

This is just like the swap method, only the columns are not swapped. As long as the two columns add up to the total available, you can use any combination of numbers.

$col1 Number of rows in the first column.
$col2 Number of rows in the second column.
$content1 The content of the first column.
$content2 The content of the second column.
Returns A string of code to add to your $html. If the columns don't add up to the total available, then this method will return an empty string.
Example
$html .= $bp->double (12, 12, $bp->div('First Half', 300), $bp->div('Second Half', 300));

This method divides your row (content) into 3 columns. As long as the three columns add up to the total available, you can use any combination of numbers.

$col1 Number of rows in the first column.
$col2 Number of rows in the second column.
$col3 Number of rows in the third column.
$con1 The content of the first column.
$con2 The content of the second column.
$con3 The content of the third column.
Returns A string of code to add to your $html. If the columns don't add up to the total available, then this method will return an empty string.
Example
$html .= $bp->triple (5, 14, 5, $bp->div('First Third', 200), $bp->div('Second Third', 400), $bp->div('Last Third', 200));

This method divides your row (content) into 4 columns. As long as the four columns add up to the total available, you can use any combination of numbers.

$col1 Number of rows in the first column.
$col2 Number of rows in the second column.
$col3 Number of rows in the third column.
$col4 Number of rows in the fourth column.
$con1 The content of the first column.
$con2 The content of the second column.
$con3 The content of the third column.
$con4 The content of the fourth column.
Returns A string of code to add to your $html. If the columns don't add up to the total available, then this method will return an empty string.
Example
$html .= $bp->quad (6, 6, 6, 6, $bp->div('First Quarter', 200), $bp->div('Second Quarter', 400), $bp->div('Third Quarter', 200), $bp->div('Fourth Quarter', 200));

This method closes up the page, and delivers the final divs.

Returns A string of code to add to your $html.
Example
$html .= $bp->close();

This method lets you easily throw some content around so that you can visualize what's going on with your layout.

$text Something to describe what you're doing.
$filler A filler of your choice, or the number of dummy text characters you would like to display.
Returns A string of empty calories. Just for show.
Example
$content = $yui->div ('Filler Text', 1000);
Download