Get reusable CSS at no cost from Yahoo!

by Tony Patton | Aug 07, 2006 7:00:00 AM

Tags: Web browsers, Tony Patton, Yahoo! Inc., CSS, Web browser, YUI Library, font, Web Development Zone Newsletter

Takeaway: The Yahoo! User Interface Library offers CSS Tools, which allow you to easily integrate CSS-based designs in your Web applications. CSS Tools are free, and the files contain code that has been heavily tested and debugged. Get more details on this useful resource.

In last week's column, I discussed the Yahoo! Developer Network, while focusing on the JavaScript features (most notably the calendar) available in the Yahoo! User Interface (YUI) Library. I want to take a little more time to cover another area of the YUI Library, which offers CSS Tools. These tools allow you to easily integrate CSS-based designs in your Web applications.

Browser support

A key feature of the CSS Tools is its classification as offering full A-grade browser support. Graded Browser Support is purely a Yahoo! classification. You can read the full description on its site, which basically describes how well the CSS performs in the browsers in the current marketplace.

The three grades of browser support (A, C, and X) are assigned to browsers in this online table. A-grade is the highest support level. The YUI Library notes that, by taking full advantage of the powerful capabilities of modern Web standards, the A-grade experience provides advanced functionality and visual fidelity. The support category�and related documentation�allows you to get a feel for where the CSS will be supported, but it should work (with possible degradation) in every browser.

Weekly development tips in your inbox

Keep your developer skills sharp by signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday.

Automatically sign up today!

Reusable CSS

The YUI Library includes three CSS areas or features that cover formatting, font presentation, and grid-based (columns and rows) layouts. The site describes the three elements in these terms:

Page Grids: Provides the ability to nest grids of one to four columns within the content area of the template used.
Fonts: Provides cross-browser typographical normalization and control. Basically, it offers consistent font sizing and line height while providing full support for font-size adjustment by the user (within the browser).
Reset: Provides cross-browser normalization of the default rendering of HTML elements. It also removes common default presentation of HTML elements in the browser such as bolding of strong elements, helping to ensure that all style is declared intentionally and that elements are always used for their semantic meaning instead of their customary visual presentation.

Each element is available in the YUI Library download in the following directory/file on the Web server after it is installed:

Page Grids: build\grids\grids.css
Fonts: build\fonts\fonts.css
Reset: build\reset\reset.css

You can install these base directories on your Web server or place them within your site and reference them accordingly. One of the great features of the CSS (besides being free) is it has been thoroughly tested and debugged before being made available. Let's take a closer look at the CSS Tools in action.

Page layout with grids

Grid-based layout is the impetus behind almost every site design or page layout. In the past, this was often accomplished via HTML tables, but the CSS provides great power and flexibility in designing layout pages. The Page Grids provide the code to organize a page using columns and rows according to your requirements.

At its most basic level, Page Grids provide seven Web page templates, six of which define specific main content/sidebar layouts; the seventh template defines a layout without a sidebar, and the main content is given the full page width. The templates have the following names:

yui-t1: Includes a sidebar on the left with a width of 160px and a main area of 570px.
yui-t2: Includes a sidebar on the left with a width of 180px and a main area of 550px.
yui-t3: Includes a sidebar on the left with a width of 300px and a main area of 430px.
yui-t4: Includes a sidebar on the right with a width of 180px and a main area of 550px.
yui-t5: Includes a sidebar on the right with a width of 240px and a main area of 490px.
yui-t6: Includes a sidebar on the right with a width of 300px and a main area of 430px.
yui-t7: Includes no sidebar and a main area width of 750px.

You can combine (or edit, if you're feeling brave) these templates to achieve your goal. Listing A uses the first layout to format a page (notice that the CSS Tools are installed on the Web server in the default directories).

A few notes on the page HTML:

The template is assigned to the whole page�the main div tag with the yui-t2 class assignment. This says use the second template.
The page is divided into header, body, and footer areas of the page. The header receives the hd id, body is bd, and the footer is ft.
The body of the page is divided into the left area (if the template supports it) and the main area. Both are assigned the yui-b class, but the main area is enclosed in its own div tag with the yui-main id attribute.

This simple HTML produces a two-column page with a header and footer. The main area of the page may be separated into as many as four columns. Listing B divides the main area of the page into two columns. Columns are created with the yui-g CSS class; it tells the browser to separate the area into two equal columns. Once it is used, the two columns may be inserted with the yui-u class.

Using the Page Grids provides a simple way to lay out a Web page. The associated documentation provides plenty of information on taking full advantage of the code.

Consistency

The CSS Tools Fonts stylesheet provides font consistency and control. When using it, all fonts are rendered with a default font of Arial with a pixel size of 13 and a 16 pixel line height. The pre and code elements use the monospace font family. You change font sizes by using percentage values as defined in the documentation. It isn't as flashy as Page Grids, but it can be equally important to providing a consistent user experience. The same is true for the CSS Tools Reset stylesheet, as it ensures consistency by normalizing elements.

Time saver

In today's fast-paced world, any shortcut is appreciated by even the most experienced developer. The Yahoo! Developer Network is a great resource with plenty of product-specific as well as generic code. In addition, CSS Tools provide tested CSS that you may use to quickly lay out a Web application. Take full advantage of this resource in your next application.