YUI Grid Builder Class

  • Helps you to create a page layout using Yahoo's YUI Grids CSS
  • Takes the div's out of a div-based layout (having to mess with them anyways)
  • Allows you to resize text without affecting the whole grid
    • Every content-containing div gets an inner div with a "body" class that you can style
  • Fusses over the width, template and grid codes so you don't have to
  • 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 
  $html = ''; 
  include_once (BASE . 'common/classes/YUI.php'); 
  $yui = new YUI(750); 
  $html .= $yui->page('left', 160, 'Links et al.'); 
  $html .= $yui->header('<h1>' . $page->title() . '</h1>'); 
  $html .= $yui->body($content); 
  $html .= $yui->footer('Copyright &copy; ' . date('Y') . ' ' . SITE_NAME); 
  $html .= $yui->close(); 
  unset ($yui); 
  echo $page->display($html); 
  ob_end_flush(); 
} 
 
?>

YUI ( string $width [, bool $showgrid= false ] )

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

$width The width of your grid. The YUI defaults are 750, 950, 974, or 100%. With this class you are free to enter any value you like.
$showgrid Set to true if you would like to get a visual indication of how everything is being laid out.
Example
$yui = new YUI (950, true);

string page ( [ string $dir [, integer $width [, string $content ]]] )

This method sets up your YUI Grid page, starting with the side column.

$dir Either 'right' or 'left'. Where you would like your side column.
$width If $dir is 'right' - available widths are 160, 180, and 300.
If $dir is 'left' - available widths are 180, 240, and 300.
$content The content of your side column.
Returns A string of code to add to your $html.
Example
$html .= $yui->page('left', 180, $yui->div('Side Navigation', 200));

string header ( string $content )

This defines the header of your page.

$content The content of your page's header.
Returns A string of code to add to your $html.
Example
$html .= $yui->header($yui->div('Header', 400));

string body ( string $content )

This defines the body of your page. If you would like to get fancy and split some of your code up into nicely divided sections then you can use the row, half, third, and quarter methods below.

$content The content of your page's body.
Returns A string of code to add to your $html.
Example
$html .= $yui->body($yui->div('Body', 1200));

string row ( string $content1 )

This method lets you add a row of content to your body (or anywhere).

$content1 The content of your row.
Returns A string of code to put into your body section.
Example
$body .= $yui->row ($yui->div('Full Row', 400));

string half ( string $content1, string $content2 )

This method lets you add a row of content (split evenly into two sections) to your body (or anywhere).

$content1 Half the content of your row.
$content2 The other half.
Returns A string of code to put into your body section.
Example
$body .= $yui->half ($yui->div('First Half', 200), $yui->div('Second Half', 200));

string third ( string $content1, string $content2, string $content3 )

This method lets you add a row of content (split evenly into three sections - 1/3, 1/3, 1/3) to your body (or anywhere).

$content1 The first third of content for your row.
$content2 The middle third. If you make this empty (''), then the first third will span the second giving you 2/3 and 1/3 sections.
$content3 The last third. If you make this empty (''), then the second third will spill over to here giving you 1/3 and 2/3 sections.
Returns A string of code to put into your body section.
Example
$body .= $yui->third ($yui->div('First Third', 100), $yui->div('Middle Third', 100), $yui->div('Last Third', 100));

string quarter ( string $content1, string $content2, string $content3, string $content4 )

This method lets you add a row of content (split evenly into four sections - 1/4, 1/4, 1/4, 1/4) to your body (or anywhere). If you make $content2 and $content3 empty ('') then it will combine 1, 2, and 3 to give you 3/4 and 1/4 sections. If you make $content3 and $content4 emtpy ('') then it will combine 2, 3, and 4 to give you 1/4 and 3/4 sections.

$content1 The first quarter of content for your row.
$content2 The second quarter.
$content3 The third quarter.
$content4 The last quarter.
Returns A string of code to put into your body section.
Example
$body .= $yui->quarter ($yui->div('First Quarter', 100), $yui->div('Second Quarter', 100), $yui->div('Third Quarter', 100), $yui->div('Last Quarter', 100));

string footer ( string $content )

This defines the footer of your page.

$content The content of your page's footer.
Returns A string of code to add to your $html.
Example
$html .= $yui->footer($yui->div('Footer', 400));

string close ( )

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

Returns A string of code to add to your $html.
Example
$html .= $yui->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 YUI Grid Builder Class

 Subscribe to our feed


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