YUI 3 Cookbook

Chapter 6. CSS

Although YUI is primarily a JavaScript framework, it also provides CSS resources. YUI’s CSS support dates back to very early releases of YUI 2, and has now evolved to include:

• YUI CSS Reset, which nulls out default browser styles.

• YUI CSS Base, which together with YUI CSS Reset, sets all browsers to have a common baseline look and feel.

• YUI CSS Fonts, which provides a consistent set of font sizes across all browsers.

• YUI CSS Grids, which enables you to quickly create sophisticated layouts using very minimal CSS.

Although developed alongside the YUI 3 JavaScript APIs, the YUI stylesheets are not tied to YUI 3 JS in any way. They work just fine with legacy YUI 2 code, with other JavaScript libraries, or with no JavaScript at all.

Like YUI JavaScript, YUI CSS can be combo loaded, minified, gzipped, and served from the Yahoo! CDN. For example, the combo load URL for YUI CSS Reset and YUI CSS Fonts looks like:

http://yui.yahooapis.com/combo?3.5.0/build/cssreset/reset-min.css
&3.5.0/build/cssfonts/fonts-min.css

YUI CSS Reset, Base, and Fonts come in two flavors: global and contextual. By default, these stylesheets apply to every element in the page. To restrict them to a subsection of the page, you can load the contextual version of the stylesheet. For example:

http://yui.yahooapis.com/3.5.0/build/cssreset/reset-context-min.css

loads a version of CSS Reset scoped to act only on elements that descend from the class yui3-cssreset. Similarly, you can pull in base-context-min.css (scoped ...