Friday, October 24, 2008

3 Column Page Design using YUI

The Yahoo! User Interface Library (YUI) is a collection of Java script and CSS, which helps  for building rich interactive web applications quickly. 

The CSS components provide a collection of CSS which when used correctly helps us to produce nice and complex layouts.

The following

★reset.css
normalizes margins, padding, etc.
★fonts.css
sets font baseline & even scaling
★grids.css
defines classes for preset height
and widths of div html elements

★base.css Base is an optional CSS file that complements YUI's core CSS foundation (Reset, Fonts, and Grids). While Reset removes and neutralizes the inconsistent default styling of HTML elements, Base applies a consistent style foundation for common HTML elements across A-grade browsers

In the following example I have created a Three column page structure using YUI CSS Framework.

<html>
<head>
<title>Reworked with YUI Grids CSS</title>  


<link rel="stylesheet" type="text/css" href="grids.css" mce_href="grids.css">
<style>
div {border: 1px; border-color: blue; border-style: solid;}
</style>
</head>


<body>
  

  <div id="doc3" class="yui-t6">
  <div id="hd">Header ......<!-- header --></div>  
  <div id="bd"><!-- body -->  
  <div id="yui-main">
  <div class="yui-b">
  <div class="yui-gf">
  The Main Block The Main Block The Main Block
  <div class="yui-u first"> 
  <p>Left Menu 1</p> 
  <p>Left Menu 2</p>
  <p>Left Menu 3</p>
  <p>Left Menu 4</p>
  <p>Left Menu 5</p>
  </div>
  <div class="yui-u">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

  </div>
  </div>
  </div>
  <div class="yui-b">
  THe other block the other BLock
  </div> 
   
</div>

<div id="ft">Footer<!-- footer --></div>  

  </div>
</body>

</html>

The outline how I have used YUI are as follows,

Step1.  Define the Base Layout, I have defined Header, Footer and Content Section.

Step2. Choose the overall Page width, By selecting proper id for the starting div. I have used  #doc3 which gives 100% width.

           Other options available are #doc(750),#doc2(950) etc.

Step3.  Select and Use a Template Preset, I have opt for yui-t6. Template Preset allows us to divide the content in different blocks and also defines the sizes of the two blocks. yui-t6 makes the right side block 300 pixel width and rest is assigned to the left block.

Step4. Deepnest the Main block created on Step3.  In side the first block, we put a special grid (yui-gf) and in side this special grid two yui units(yui-u). Now  yui-gf is a special grid which tells the first unit to take up two-thirds of the space, and the other unit to take up one-third of the space.

YUI provides other kind of special grid also which creates different childs (with different width) as per follows,

Special Grid Class Description Example

.yui-gb 1/3 - 1/3 - 1/3

.yui-gc 2/3 - 1/3

.yui-gd 1/3 - 2/3

.yui-ge 3/4 - 1/4

.yui-gf 1/4 - 3/4

.yui-g 1/2 - 1/2


Combining Page Widths, Template Presets, and Nesting Grids, a nearly infinite number of complex page layouts are possible.We can Define very complex page stucture with minimum CSS knowledge also, just we need the YUI Grid CSS file and follow few simple steps.

1 comment :

  1. does it support any kind of layout, means like for WAP too??

    ReplyDelete