3 Column Page Design using YUI

By -

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

Post a Comment

Popular posts from this blog

Difference between volatile and synchronized

By -
volatile is a field modifier, while synchronized modifies code blocks and methods. So we can specify three variations of a simple accessor using those two keywords: int i1; int geti1() {return i1;} volatile int i2; int geti2() {return i2;} int i3; synchronized int geti3() {return i3;} geti1() accesses the value currently stored in i1 in the current thread . Threads can have local copies of variables, and the data does not have to be the same as the data held in other threads. In particular, another thread may have updated i1 in it's thread, but the value in the current thread could be different from that updated value. In fact Java has the idea of a "main" memory, and this is the memory that holds the current "correct" value for variables. Threads can have their own copy of data for variables, and the thread copy can be different from the "main" memory. So in fact, it is possible for the "main...
Read more

Converting Java Map to String

By -
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...
Read more

Masking Credit Card number in Java

By -
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...
Read more