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:
- 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)
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
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
YUI Base CSS
Applies a consistent style foundation for common HTML elements across A-grade browsers
YUI Fonts CSS
Offers cross-browser typographical normalization
YUI Grids CSS
Provides over 1000 page layout combinations
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/
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.
Source - http://developer.yahoo.com/yui/grids/
Visit the Yahoo! User Interface Library (YUI) website
Yahoo! UI Library: Grids CSS web page
Grids CSS web page: Important Sections
- Video: **The YUI CSS Foundation **- http://developer.yahoo.com/yui/grids/#video
- **Getting Started **- http://developer.yahoo.com/yui/grids/#start
- **Using YUI Grids CSS **- http://developer.yahoo.com/yui/grids/#using
- **CSS Reset/Base/Fonts/Grids Cheat Sheet **- http://yuiblog.com/assets/pdf/cheatsheets/css.pdf
Starting Base Markup
Choose the Overall Page Width
Available Template Presets
Preset Template Code
YUI Base CSS
Share or Comment via Twitter