Yahoo! UI Library: Grids CSS for Drupal Themers

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

A brief resource description for Drupal Themers

We’ll look at:

  1. What’s YUI Grids CSS and what are its benefits?
  2. What’s in the library?
  3. 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 -

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 - &

  • 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


Why YUI: CSS is important to Drupal Themers

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

Core CSS resources


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


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


Offers cross-browser typographical normalization

and control


Provides over 1000 page layout combinations

Benefits of YUI CSS

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

Source -



Benefits of YUI Grids CSS

  1. Offers 4 preset page widths, 6 preset templates, & the **ability to stack & nest **subdivided regions of 2, 3, or 4 columns.
  2. The 4kb file provides over 1000 page layout combinations.
  3. Supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, & 974px, & the ability to easily customize to any number.
  4. 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).
  5. Self-clearing footer. No matter which column is longer, the footer stays at the bottom.
  6. Layouts less than 100% are automatically centered.
  7. Accommodates IAB’s Ad Unit Guidelines for common ad dimensions.

Source -

Visit the Yahoo! User Interface Library (YUI) website

Yahoo! UI Library: Grids CSS web page

Grids CSS web page: Important Sections

  1. Video: **The YUI CSS Foundation **-
  2. **Getting Started **-
  3. **Using YUI Grids CSS **-
  4. **CSS Reset/Base/Fonts/Grids Cheat Sheet **-

Starting Base Markup



Choose the Overall Page Width



Available Template Presets


Preset Template Code




Share or Comment via Twitter