Wednesday, July 30, 2008

YUI Library Moving to CSS-based layouts

YUI Grids CSS

The use of the YUI Grids CSS feature of the YUI Library added another level of acceptance via a tested solution. YUI Grids CSS provides a CSS solution for delivering page layouts that divide the page into areas.

A great aspect of the YUI Grids CSS feature is its A-level browser support, which provides the highest support level in terms of browsers. This means you don't have to worry about the quirks in different browsers when using CSS for layout.

CSS layout

YUI Grids CSS offers preset page widths and templates, along with the ability to nest and stack layouts to generate what you need. Yahoo boasts the capability to deliver more than 1,000 layout combinations with it. YUI Grids CSS is part of the YUI Library download.

We used the following features of the YUI Grids CSS feature:

|> The 100% page width is employed via the doc3 id attribute assigned to the overall
container.
|> The entire page is divided into three rows using three
elements. The YUI Grids CSS standard id attributes for header (hd), body (bd), and footer (ft) are used.
|> The header has three rows using two

elements and a

element. The
includes another
that uses YUI Grids CSS features. This includes the 100% page width (doc3 attribute), as well as a preset template that has two columns with the narrower column on the left with a width of 180 pixels. The narrower column is assigned the class id of yui-b with the larger column assigned the yui-main attribute. The two columns are used to ensure the breadcrumb appears above the content area of the page.
|> The middle or body row of the whole page layout is divided into two columns with a left column width of 180 pixels. This is accomplished with a predefined template employed by assigning the yui-t2 class to the body's
container. The smaller left column is designated with the yui-b class assignment, and the main area is designated with the yui-main class assignment.
|> The footer row uses the same approach as the body with two columns -- a left column of 180 pixels.
|> The smaller left column of the body row of the page contains a navigation menu. The menu is created with an HTML unordered list and styled via CSS.
|> The YUI Grids CSS is contained in one CSS file available in the YUI Library download. The file is called grids.css and has a small footprint of 4KB.

No comments: