Yahoo! UI Library: Grids CSS for Drupal Themers

Apr 22, 2008

Note: The sound quality on the low res version is somewhat poor.

A brief resource description for Drupal Themers

We’ll look at:

What’s YUI Grids CSS and what are its benefits?
What’s in the library?
How do we use it?

The Yahoo! User Interface Library (YUI)

A set of utilities and controls, **written in JavaScript, **for building **richly **interactive web applications **using techniques such as DOM scripting, DHTML and AJAX. The YUI Library also **includes several core CSS resources. All components in the YUI Library have been released as open source under a BSD license and are free for all uses.

Source - http://developer.yahoo.com/yui/

YUI Browser-Support Philosophy

Graded Browser Support- > “provides a sane path to achieving accessibility and graceful degradation while still building richly interactive interfaces in the browser” _ > > _Source - http://developer.yahoo.com/yui/ & http://developer.yahoo.com/yui/articles/gbs/
A broader and more reasonable definition of “support.”
The notion of “grades” of support.
A-grade browsers are identified, capable, modern and common.

A-Grade Browser Support Chart

http://developer.yahoo.com/yui/articles/gbs/index.html#gbschart

Why YUI: CSS is important to Drupal Themers

We can quickly build Drupal themes with multiple page layouts
Presentation works well in most browsers
Supported and tested by Yahoo! Developers, so we can worry instead about making good looking Drupal themes

Core CSS resources

YUI Reset CSS

Removes and neutralizes inconsistent default styling of HTML elements across A-grade browsers

http://developer.yahoo.com/yui/reset/

YUI Base CSS

Applies a consistent style foundation for common HTML elements across A-grade browsers

http://developer.yahoo.com/yui/base/

YUI Fonts CSS

Offers cross-browser typographical normalization

and control

http://developer.yahoo.com/yui/fonts/

YUI Grids CSS

Provides over 1000 page layout combinations

http://developer.yahoo.com/yui/grids/

Benefits of YUI CSS

**Creates a level playing ** field across A-grade browsers.
**Provides a sound foundation ** upon which you can explicitly declare your intentions.
Offers full A-grade browser support.
Provides consistent font sizing and line-height.
Provides appropriate cross-OS font-family degradation paths.
**Supports user-driven font-size **adjustment in the browser, including cross-browser consistency for adjusted sizes.
Works in both** “Quirks Mode”** and “Standards Mode.”

Source - http://developer.yahoo.com/yui/fonts/

[http://developer.yahoo.com/yui/base/](http://developer.yahoo.com/yui/base/)

[http://developer.yahoo.com/yui/reset/](http://developer.yahoo.com/yui/reset/)

Benefits of YUI Grids CSS

Offers 4 preset page widths, 6 preset templates, & the **ability to stack & nest **subdivided regions of 2, 3, or 4 columns.
The 4kb file provides over 1000 page layout combinations.
Supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, & 974px, & the ability to easily customize to any number.
Template columns are source-order independent, so you can put your most important content first in the markup layer for improved accessibility & **search engine optimization **(SEO).
Self-clearing footer. No matter which column is longer, the footer stays at the bottom.
Layouts less than 100% are automatically centered.
Accommodates IAB’s Ad Unit Guidelines for common ad dimensions.