YUI CSS

   YUI CSS

This page contains information about the YUI CSS including Reset, Fonts, Grids and Base.

About YUI CSS
YUI CSS can be used to setup the basic layout of the page.
 * YUI Grids Builder — tool to setup the page for you.
 * See also EXT YUI Javascript Library — very good application layer for web app developers.

This is a set of CSS files to handle layout and formatting for HTML documents. View the source:
 * 1)  YUI CSS Reset Source
 * 2)  YUI CSS Base Source
 * 3)  YUI CSS Fonts Source
 * 4)  YUI CSS Grids Source

Usage Notes

 * All style and layout elements are scalable EM values.
 * Ensure that your design has gutters around all elements so that there's wiggle room when browsers render the results.

Using YUI Reset
Call this first to set all CSS values to their base values. This will ensure that your css starts the same in all browsers:
 * Sets margins and padding to 0.
 * Sets borders to 0.
 * Removes visual list styles (ol, ul, dl)
 * Sets fonts to 100% of base
 * Sets font-weight and font-style to normal.

Using YUI Base
Helper file or snippet library, which restores the bits Reset removes, but so they work the same across browsers. Best to use as a code reference, then copy the CSS into your site's stylesheet.

Set Page Width
The first thing to do is set your page width, with one of 4 presets:
 * 750px centred —
 * 950px centred —
 * 100% fluid —
 * 974px centred —

This is set with the document's primary div id:

You can override this by setting your own css value:

Set Page Layout
You set the layout with 6 preset templates:
 * left 160px —
 * left 180px —
 * left 300px —
 * right 160px —
 * right 180px —
 * right 300px —

This is set with the document's primary div class:


 * See the YUI CSS Page Layouts for images.

Column Region Grids
Once the page width and layout is defined, you can setup other regions using grid holder and units div classes:
 * — 2 column grid holder — 1/2 + 1/2
 * — 3 column — 1/3 + 1/3 + 1/3
 * — 2 column — 2/3 + 1/3
 * — 2 column — 1/3 + 2/3
 * — 2 column — 3/4 + 1/4
 * — 2 column — 1/4 + 3/4
 * — units
 * — first unit — sets first node to display, set for each generation.

2 Columns Even
For a 2 column evenly spaced grid, use:

4 Columns Even
For a 4 column even spaced grid, use two generations:

3 Columns
For 3 column grids you need a special case:

2 Column Uneven
2 column grid with 1/3 + 2/3 widths, use:

YUI Fonts
Base font Arial, 13px size, 16px line height. Fonts should be set in percentage (i.e. 70%) values.

Font CSS
Don't use the  shorthand in css as some browsers ignore! Use,  , etc.

Calculating EM Values
EM values are related to the font size:
 * Pixel width for 13px font = 1 EM width for all browsers, except for:
 * EM width * 0.9759 = IE's EM width is different.

With EM values, Internet Explorer (IE) renders differently!

To specify an IE exception, use:

Example from YUI source of 180 pixels with 20 pixel gap