Blueprint CSS Framework Class

  • 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(); 
} 
 
?>

object Blueprint ( [ integer $width= 950 ] )

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;

string page ( [ bool $showgrid= false ] )

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);

string row ( [ string $content ] )

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));

string col ( integer $class [, string $last [, string $content ]] )

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));

string swap ( integer $col1, integer $col2, string $content1, string $content2 )

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));

string double ( integer $col1, integer $col2, string $content1, string $content2 )

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));

string triple ( integer $col1, integer $col2, integer $col3, string $con1, string $con2, string $con3 )

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));

string quad ( integer $col1, integer $col2, integer $col3, integer $col4, string $con1, string $con2, string $con3, string $con4 )

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));

string close ( )

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();

string div ( string $text, string or integer $filler )

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);
Click to Download the PHP Blueprint CSS Framework Class

 Subscribe to our feed

Blueprint.php

<?php 
 
/* 
 *    author:           Kyle Gadd 
 *    documentation:    http://www.php-ease.com/classes/blueprint-css.html 
 * 
 *    This program is free software: you can redistribute it and/or modify 
 *    it under the terms of the GNU General Public License as published by 
 *    the Free Software Foundation, either version 3 of the License, or 
 *    (at your option) any later version. 
 * 
 *    This program is distributed in the hope that it will be useful, 
 *    but WITHOUT ANY WARRANTY; without even the implied warranty of 
 *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the 
 *    GNU General Public License for more details. 
 * 
 *    You should have received a copy of the GNU General Public License 
 *    along with this program.  If not, see <http://www.gnu.org/licenses/>. 
 */ 
 
class Blueprint { 
 
  private $container; // whether or not a container div is open 
  private $col; // whether or not a column is open 
  private $rows; // the total number of rows 
  private $width; // used in $this->page() 
  private $colors = array('border:2px solid #3F80BA; background-color:#538EC3; color:#FFFFFF;', 'border:2px solid #13B322; background-color:#64CD6E; color:#FFFFFF;', 'border:2px solid #990000; background-color:#FFDD00; color:#000000;', 'border:2px solid #24003F; background-color:#63639B; color:#FFFFFF;', 'border:2px solid #FF8C00; background-color:#FBE858; color:#233E8E;', 'border:2px solid #BE3A3E; background-color:#C64F52; color:#FFFFFF;', 'border:2px solid #886644; background-color:#CC9D59; color:#000000;', 'border:2px solid #CCCCCC; background-color:#DEDEDE; color:#000000;', 'border:2px solid #83A8CC; background-color:#F5F9FE; color:#003366;', 'border:2px solid #666666; background-color:#333333; color:#FFFFFF;', 'border:2px solid #AABBDD; background-color:#000033; color:#FFAA33;', 'border:2px solid #1B7E6F; background-color:#1A287A; color:#D1C923;', 'border:2px solid #FFDD33; background-color:#FAFAFA; color:#E01900;', 'border:2px solid #3D2500; background-color:#EE8800; color:#FFFFFF;', 'border:2px solid #1F563C; background-color:#53C64E; color:#FBFF24;'); // used in $this->div() 
 
  function __construct ($width=950) { 
    list($rows, $width) = $this->width($width); 
    $this->rows = $rows; 
    $this->width = $width; 
  } 
   
  public function page ($showgrid=false) { 
    global $page; 
    $html = '<div class="container'; 
    if ($showgrid) $html .= ' showgrid'; 
    $html .= '"'; 
    if ($this->width != 950) $html .= ' style="width:' . $this->width . 'px;"'; 
    $html .= '>'; 
    $this->container = '</div>'; 
    return $html; 
  } 
   
  public function row ($content='') { 
    return $this->col($this->rows, 'last', $content); 
  } 
   
  public function col ($class, $last='', $content='') { 
    if (is_numeric($class)) { 
      $class = 'span-' . $class; 
    } elseif (is_array($class)) { 
      $vars = array(); 
      foreach ($class as $key => $value) $vars[] = (is_numeric($key)) ? $value : $key . '-' . $value; 
      $class = implode(' ', $vars); 
    } 
    if ($last == 'last' || $last === true) { 
      $class .= ' last'; 
    } elseif (!empty($last)) { 
      $content = $last . $content; 
    } 
    $html = $this->col . "\n  " . '<div class="' . $class . '">' . $content; 
    $this->col = '</div>'; 
    return $html; 
  } 
   
  public function swap ($col1, $col2, $content1, $content2) { 
    $html = ''; 
    if (($col1 + $col2) != $this->rows) return $html; 
    $html .= "\n    " . '<div class="span-' . $col1 . ' prepend-' . $col2 . '">' . $content1 . '</div>'; 
    $html .= "\n    " . '<div class="span-' . $col2 . ' pull-' . $this->rows . ' last">' . $content2 . '</div>'; 
    return $this->row($html); 
  } 
   
  public function double ($col1, $col2, $content1, $content2) { 
    $html = ''; 
    if (($col1 + $col2) != $this->rows) return $html; 
    $html .= "\n    " . '<div class="span-' . $col1 . '">' . $content1 . '</div>'; 
    $html .= "\n    " . '<div class="span-' . $col2 . ' last">' . $content2 . '</div>'; 
    return $this->row($html); 
  } 
   
  public function triple ($col1, $col2, $col3, $content1, $content2, $content3) { 
    $html = ''; 
    if (($col1 + $col2 + $col3) != $this->rows) return $html; 
    $html .= "\n    " . '<div class="span-' . $col1 . '">' . $content1 . '</div>'; 
    $html .= "\n    " . '<div class="span-' . $col2 . '">' . $content2 . '</div>'; 
    $html .= "\n    " . '<div class="span-' . $col3 . ' last">' . $content3 . '</div>'; 
    return $this->row($html); 
  } 
   
  public function quad ($col1, $col2, $col3, $col4, $content1, $content2, $content3, $content4) { 
    $html = ''; 
    if (($col1 + $col2 + $col3 + $col4) != $this->rows) return $html; 
    $html .= "\n    " . '<div class="span-' . $col1 . '">' . $content1 . '</div>'; 
    $html .= "\n    " . '<div class="span-' . $col2 . '">' . $content2 . '</div>'; 
    $html .= "\n    " . '<div class="span-' . $col3 . '">' . $content3 . '</div>'; 
    $html .= "\n    " . '<div class="span-' . $col4 . ' last">' . $content4 . '</div>'; 
    return $this->row($html); 
  } 
   
  public function close () { 
    return $this->col . $this->container; 
  } 
 
  public function div ($text='', $filler='') { 
    $dummy = array(); 
    $dummy[] = 'But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.'; 
    $dummy[] = 'The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words.If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual languages. The new common language will be more simple and regular than the existing European languages. It will be as simple as Occidental; in fact, it will be Occidental. To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental is.'; 
    $dummy[] = 'A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath of that universal love which bears and sustains us, as it floats around us in an eternity of bliss; and then, my friend, when darkness overspreads my eyes, and heaven and earth seem to dwell in my soul and absorb its power, like the form of a beloved mistress, then I often think with longing, Oh, would I could describe these conceptions, could impress upon paper all that is living so full and warm within me, that it might be the mirror of my soul, as my soul is the mirror of the infinite God! O my friend -- but it is too much for my strength -- I sink under the weight of the splendour of these visions!'; 
    if (is_numeric($filler)) { 
      $num = rand(0, 2); 
      $string = $dummy[$num]; 
      if ($filler > strlen($string)) while ($filler > strlen($string)) $string .= ' ' . $string; 
      $text .= '<br /><br />' . substr($string, 0, $filler); 
    } 
    $num = rand(0, count($this->colors)-1); 
    $color = $this->colors[$num]; 
    unset($this->colors[$num]); 
    shuffle($this->colors); 
    return '<div style="padding:20px 10px; opacity:0.5; filter:alpha(opacity=50); ' . $color . '"><div style="opacity:1; filter:alpha(opacity=100);">' . $text . '</div></div>'; 
  } 
   
  private function width ($num) { 
    $widths = array(0, 30, 70, 110, 150, 190, 230, 270, 310, 350, 390, 430, 470, 510, 550, 590, 630, 670, 710, 750, 790, 830, 870, 910, 950); 
    if ($num <= 24) return array($num, $widths[$num]); 
    foreach ($widths as $rows => $width) { 
      if ($num > $width) continue; 
      if ($num <= $width) break; 
    } 
    return array($rows, $width); 
  } 
   
} 
 
?>

comments powered by Disqus
Copyright © 2011 PHP-Ease.com - PHP Made Easy