Skip to main content

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.

Comments

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

    ReplyDelete

Post a Comment

Popular posts from this blog

Converting Java Map to String

Java Collections framework, String manipulation etc is something that we often encounter in Development process.
For processing collections (like checking null/empty, Intersection, Disjunction) We do have some of the very use full libraries.

Some of the Collection related libraries are Apche Commons Collections and Google  Collections(Guava).

Problem Use Case

This article explains how to convert a Java Map to String(and vice versa) using different libraries and technique.

One way is to use StringBuilder(Or String) and loop though the Map and build the String by applying some sort of separator ( for key:value and entry). Here we have to take care of the null value etc.

Without Any Library
If we want to convert the map to a String with key value separator and also individual entry seperator in the resulting String, we have to write code for that. For a simple Map, we have to iterate though the map, take care of the null values etc. Following is a sample to get String built out from Map C…

Masking Credit Card number in Java

Sometimes we need to mask crucial information like Credit Card Numbers, CVV numbers etc before storing  or logging the information. This example mask Credit Card Number (Except last 4 Digit) from a Text which contains information along with Credit Card Number.

The following example demonstrates how we can easily mask the credit card with Matcher and Pattern Classes. This Sample Code uses Matcher and Pattern.
Pattern Used in this sample is not optimized for Credit Card Numbers, this pattern will get any numerical numbers in the String Content.  Based on the Credit Card Type a more efficient and Strict RegEx can be used to mask the Credit Card.
/**Mask the Credit card number but last four digit value **/   Pattern PATTERN = Pattern.compile("[0-9]+"); String message = content; Matcher matcher = PATTERN.matcher(message); String maskingChar = "*"; StringBuilder finalMask = new StringBuilder(maskingChar); while …

Invoking EJB deployed on a remote machine

Invoking EJB deployed on a remote machineIn case we are calling remote ejb( ejb deployed on remote machines),The JNDI lookup might lookup like,Properties env = new Properties();env.put(Context.INITIAL_CONTEXT_FACTORY, "org.jnp.interfaces.NamingContextFactory");env.put(Context.PROVIDER_URL, "XX.XXX.XX.XX:1099");env.put("java.naming.factory.url.pkgs", "org.jboss.naming:org.jnp.interfaces"); Context ctx = new InitialContext(env);If we are calling local ejb then we can simply create InitialContext without any parameters.Like,Context ctx = new InitialContext();