Getting started

Intro

info gabbed from the video introduction to the yui css foundation: http://video.yahoo.com/video/play?vid=1373808

YUI itself is at: http://developer.yahoo.com/yui/

also check the yui css cheat sheet: http://yuiblog.com/assets/pdf/cheatsheets/css.pdf

More yui:

Layers

yuicss consists of different css files one can use independently

  1. reset
  2. fonts
  3. grid
  4. base

They can/should be used in your own pages by

  1. using the <link/>
  2. refering to the online available versions of yui
  3. (or if needed by concatenating there code into your own css)

grid

overall page layout

4 variants, indicated by applying a @id on a root div. (ie a div straight under the body tag)

see cheat sheet for list of available layouts & their matching id (i.e.  the ones that match /doc[2..4]?/)

<html>
  <body>
    <div id="doc">
     content here...
    </div>
  </body>
</html>

important:

preset templates

the 'root' id can be assigned a template grid, fixing a standard 2 column layout on the page

each of these layouts arranges the fixed positioning of the nested 'blocks' (noted with .yui-b).  The block wrapped with div.yui-main will take the main 'rest' space, the other will be placed in the fixed column.  This regardless of their order of appearance in the markup.

<div id="doc " class="yui-t1">
content here
</div>

nested grids

composes of two concepts:

  • grid holders (identiefied by class .yui-g[b..f]?)
  • grid units (identified by class .yui-u

by default these units take half of everything, other ratios coded in other grids (see cheat sheet)

important:

  • first yui-u should be marked with .first since not all browsers effectively support 'first-element-selector'

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

fonts

defaults all text on all browsers to be in Arial 13px with 16px line height

important:

  • all other font sizes should be expressed in percentages (since specifying actual pixels breaks zoom in IE)
  • don't use the font: shorthand property in css since it's not well supported accross browsers

reset

  • erases all differences from the various built-in browser.css styles
  • removes borders, paddings, margins, ...

important:

  • reintroduce a base (none divergent) style by including base.css
    • typically don't use that in production though
    • is only a fast bootstrap to give viewable results
    • use as a copy-paste source for actual development

notes

  1. all stuff in yui-css is expressed in em
    • play allong by calculating: pixel-width / 13 = em width
    • add fix for ie by adding em-width * 0.9759 = ie_em width
  2. add in specific ie settings with the 'star' trick:
    #myid {
      width: 46.15em; /* non ie */
      *width:45.04em; /* for ie since others will ignore */
    }

Other sources

Critiques