Yahoo! UI Library: Grids CSS for Drupal Themers

Tue, 04/22/2008 - 4:25pm

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?

Formats available:QuickTime (.mov), Flash Video (.flv), Text Summary, PDF Summary, PowerPoint Presentation

Note: The sound quality on the low res version is somewhat poor. You may want to watch the High Res QuickTime Movie, or just download the PDF to view.

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/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.