YUI CSS

From Fishcakes Wiki

Jump to: navigation, search

Edit Menu

YUI
YUI Library
Overview of Yahoo User Interface Library.
YUI CSS
A guide to YUI CSS markup techniques.
YUI CSS Reset
CSS source code for YUI Reset.
YUI CSS Base
CSS source code for YUI Base.
YUI CSS Fonts
CSS source code for YUI Fonts.
YUI CSS Grids
CSS source code for YUI Grids.

Edit Menu

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:

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.

Source Reset File

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.4.1/build/reset/reset-min.css">

Source Reset, Fonts and Grids File

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.4.1/build/reset-fonts-grids/reset-fonts-grids.css">

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.

Using YUI Grids

Set Page Width

The first thing to do is set your page width, with one of 4 presets:

750px centred — #doc
950px centred — #doc2
100% fluid — #doc3
974px centred — #doc4

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

<body>
   <div id="doc"></div>
<body>

You can override this by setting your own css value:

#doc2 {
   width: 73.074em;
}

Set Page Layout

You set the layout with 6 preset templates:

left 160px — .yui-t1
left 180px — .yui-t2
left 300px — .yui-t3
right 160px — .yui-t4
right 180px — .yui-t5
right 300px — .yui-t6

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

<body>
   <div id="doc" class="yui-t3"></div>
<body>

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:

yui-g — 2 column grid holder — 1/2 + 1/2
- yui-gb — 3 column — 1/3 + 1/3 + 1/3
- yui-gc — 2 column — 2/3 + 1/3
- yui-gd — 2 column — 1/3 + 2/3
- yui-ge — 2 column — 3/4 + 1/4
- yui-gf — 2 column — 1/4 + 3/4
yui-u— units
.first — first unit — sets first node to display, set for each generation.

2 Columns Even

For a 2 column evenly spaced grid, use:

<div class="yui-g">
   <div class="yui-u first"></div>
   <div class="yui-u"></div>
</div>

4 Columns Even

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

<div class="yui-g">
   <div class="yui-g first">
      <div class="yui-u first"></div>
      <div class="yui-u"></div>
   </div>
   <div class="yui-g">
      <div class="yui-u first"></div>
      <div class="yui-u"></div>
   </div>
</div>

3 Columns

For 3 column grids you need a special case:

<div class="yui-gb">
   <div class="yui-u first"></div>
   <div class="yui-u"></div>
   <div class="yui-u"></div>
</div>

2 Column Uneven

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

<div class="yui-gd">
   <div class="yui-u first"></div>
   <div class="yui-u"></div>
</div>

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 font: shorthand in css as some browsers ignore! Use font-family:, font-size:, 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:

#custom-doc {
   width:46.15em; /* non-IE */
   *width:45.04em;/* IE */
}

Example from YUI source of 180 pixels with 20 pixel gap

.yui-t2 .yui-b {
   float: left;
   width: 13.18456em;
   *width: 13.512em;
}
 
.yui-t2 #yui-main .yui-b {
   margin-left: 14.8456em;
   *margin-left: 14.512em;
}

YUI Resources

Official Resources

developer.yahoo.com/yui — developer documentation.
yuiblog.com — developer's blog.
groups.yahoo.com/group/ydn-javascript — user group and mailing list.

Unofficial Resources

Davs Blog — loads of YUI code samples.
YUI Grids Builder — excellenttool to layout the page for you.
EXT YUI Javascript Library — very good application layer for web app developers.