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

YUI.php

<?php 
 
/* 
 *    author:           Kyle Gadd 
 *    documentation:    http://www.php-ease.com/classes/yui-grid-builder.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 YUI { 
 
  private $doc; 
  private $showgrid; 
  private $column = false; 
  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, $showgrid=false) { 
    global $page; 
    $page->link('<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/reset-fonts-grids/reset-fonts-grids.css" />'); 
    if ($showgrid) $page->link('<style type="text/css">.showgrid { background:url("/images/grid.png") repeat scroll 0 0 transparent; }</style>'); 
    switch ($width) { 
      case ('750'): $this->doc = 'doc'; break; 
      case ('950'): $this->doc = 'doc2'; break; 
      case ('100%'): $this->doc = 'doc3'; break; 
      case ('974'): $this->doc = 'doc4'; break; 
      default:  
        $this->doc = 'custom-doc'; 
        $page->link('<style type="text/css">#custom-doc{margin:auto;text-align:left;width:' . round($width/13, 3) . 'em;*width:' . round($width/13.3333, 3) . 'em;min-width:' . $width . 'px;}</style>'); 
        break; 
    } 
    $this->showgrid = ($showgrid) ? ' class="showgrid"' : ''; 
  } 
     
  public function page ($dir='', $width='', $content='') { 
    if (empty($dir)) return '<div id="' . $this->doc . '"' . $this->showgrid . '>'; 
    if ($dir == 'left') { 
      if ($width == 160) $col = 'yui-t1'; 
      elseif ($width == 180) $col = 'yui-t2'; 
      elseif ($width == 300) $col = 'yui-t3'; 
    } elseif ($dir == 'right') { 
      if ($width == 180) $col = 'yui-t4'; 
      elseif ($width == 240) $col = 'yui-t5'; 
      elseif ($width == 300) $col = 'yui-t6'; 
    } 
    if (!isset($col)) return '<div id="' . $this->doc . '"' . $this->showgrid . '>'; 
    $this->column = $content; 
    if (!empty($this->showgrid)) $col .= ' showgrid'; 
    return '<div id="' . $this->doc . '" class="' . $col . '">'; 
  } 
   
  public function header ($content) { 
    return "\n  " . '<div id="hd">' . $this->content($content) . '</div>'; 
  } 
   
  public function body ($content) { 
    $html = "\n  "; 
    $html .= '<div id="bd">'; 
    if ($this->column !== false) { 
      $html .= '<div id="yui-main"><div class="yui-b">' . $this->content($content) . '</div></div>'; 
      $html .= '<div class="yui-b">' . $this->content($this->column) . '</div>'; 
    } else { 
      $html .= $this->content($content); 
    } 
    $html .= '</div>'; 
    return $html; 
  } 
   
  public function footer ($content) { 
    return "\n  " . '<div id="ft">' . $this->content($content) . '</div>'; 
  } 
 
  public function close() { 
    return '</div>'; 
  } 
 
  public function row ($content1) { 
    return "\n  " . '<div class="yui-g">' . $this->content($content1) . '</div>'; 
  } 
 
  public function half ($content1, $content2) { 
    $html = "\n  "; 
    $html .= '<div class="yui-g">'; 
      $html .= '<div class="yui-u first">' . $this->content($content1) . '</div>'; 
      $html .= '<div class="yui-u">' . $this->content($content2) . '</div>'; 
    $html .= '</div>'; 
    return $html; 
  } 
   
  public function third ($content1, $content2, $content3) { 
    $html = "\n  "; 
    $class = 'yui-gb'; // 1/3, 1/3, 1/3 
    if (empty($content2)) $class = 'yui-gc'; // 2/3, 1/3 
    elseif (empty($content3)) $class = 'yui-gd'; // 1/3, 2/3 
    $html .= '<div class="' . $class . '">'; 
      $html .= '<div class="yui-u first">' . $this->content($content1) . '</div>'; 
      if ($class != 'yui-gc') $html .= '<div class="yui-u">' . $this->content($content2) . '</div>'; 
      if ($class != 'yui-gd') $html .= '<div class="yui-u">' . $this->content($content3) . '</div>'; 
    $html .= '</div>'; 
    return $html; 
  } 
   
  public function quarter ($content1, $content2, $content3, $content4) { 
    $html = "\n  "; 
    if (empty($content2) && empty($content3)) { // 3/4, 1/4 
      $html .= '<div class="yui-ge">'; 
        $html .= '<div class="yui-u first">' . $this->content($content1) . '</div>'; 
        $html .= '<div class="yui-u">' . $this->content($content4) . '</div>'; 
      $html .= '</div>'; 
    } elseif (empty($content3) && empty($content4)) { // 1/4, 3/4 
      $html .= '<div class="yui-gf">'; 
        $html .= '<div class="yui-u first">' . $this->content($content1) . '</div>'; 
        $html .= '<div class="yui-u">' . $this->content($content2) . '</div>'; 
      $html .= '</div>'; 
    } else { // 1/4, 1/4, 1/4, 1/4 
      $html = '<div class="yui-g">'; 
        $html .= '<div class="yui-g first">'; 
          $html .= '<div class="yui-u first">' . $this->content($content1) . '</div>'; 
          $html .= '<div class="yui-u">' . $this->content($content2) . '</div>'; 
        $html .= '</div>'; 
        $html .= '<div class="yui-g">'; 
          $html .= '<div class="yui-u first">' . $this->content($content3) . '</div>'; 
          $html .= '<div class="yui-u">' . $this->content($content4) . '</div>'; 
        $html .= '</div>'; 
      $html .= '</div>'; 
    } 
    return $html; 
  } 
   
  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 content ($content) { 
    return '<div class="body">' . $content . '</div>'; 
  } 
   
} 
 
?>

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