�ݺ�ߣ

While we’re getting ready to start, please
download the three exercises from:
http://yuiblog.com/devday06/yui-css/

YUI’s Foundational CSS
CSS Reset, CSS Fonts, CSS Grids

Nate Koechley
Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 Platform Engineering, Yahoo!
1

YUI’s Foundational CSS
CSS Reset, CSS Fonts, CSS Grids

Nate Koechley
Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 Platform Engineering, Yahoo!
2

About me…
natek@yahoo-inc.com

• YUI team:
– Engineer and Design Liaison
– Technical Evangelist
• Graded Browser Support…
…and browser vendor coordination
• http://yuiblog.com
• http://nate.koechley.com/blog

Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 3

What we’ll cover…

• Background and YUI CSS Goals
• Hands-on with CSS Reset
• Hands-on with CSS Fonts
• Hands-on with CSS Grids
– What It Does (x3)
– Using It (x3)


CSS is Accretive…

• An element’s presentation accumulates
substance from every rule that touches it
– via direct declaration, cascade, inheritance

• Put another way:
– CSS rules build on one another


CSS’s Two Mechanisms

• Cascade
– many rules  single element
• Inheritance
– single rule  many elements

(And don’t forget about cascading inheritance, of course.)


CSS is Accretive… (cont’d)

• The accretive aspects of CSS –
cascade and inheritance – are the
source of CSS’s power…


CSS is Accretive… (cont’d)

… but also a source of vulnerability:

A worrying equation:
Slight disagreement on foundational rules
+ Slight disagreement on application of rules
----------------------------------------------------------------
= Dramatic compounded difference!


YUI CSS Goals

1. Normalize and stabilize
• Sound foundation enables sane
development
2. Maximize Availability and Accessibility
3. Centralize wheel invention
4. Centralize kludges
5. A-Grade Browser Support
6. Support Yahoo! Specifications

The Three Tools

1. CSS Reset
2. CSS Fonts
3. CSS Grids


YUI Reset – What it Does
http://developer.yahoo.com/yui/reset

• Cross-browser normalization of the
default rendering of HTML elements
– Overcome browser.css
– Level the playing field


Removes common “default”
presentation

• Helps ensure all style is declared
intentionally
– You choose how you want to <em>phasize
something
• Allows us to choose elements based on
their semantic meaning instead of their
“default” presentation
– You choose how you want to render <li>sts
• A-Grade Browser Support

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,p,blockquote,th,td
{margin:0;padding:0;}
table
{border-collapse:collapse;border-spacing:0;}
fieldset,img
{border:0;}
address,caption,cite,code,dfn,em,strong,th,var
{font-style:normal;font-weight:normal;}
ol,ul
{list-style:none;}
caption,th
{text-align:left;}
h1,h2,h3,h4,h5,h6
{font-size:100%;}
q:before,q:after
{content:'';}

Using YUI Reset http://
developer.yahoo.com/yui/reset

• Step 1: Say what you mean.
• (there is no Step 2)
strong {font-weight:bold;}
h1 {margin-bottom:1em;}

li {
background:transparent
url(dot.gif)
no-repeat left 6px;
padding:0 0 0 .55em;
}


YUI Fonts – What it Does…
http://developer.yahoo.com/yui/fonts

• Consistent font sizing and line-height
• Appropriate cross-OS font-family
degradation paths
– e.g., arial, helvetica, sans-serif
• Not fixed, so users can adjust the font
size within their browser
– Even when adjusted, better cross-browser
consistency


YUI Fonts – What it Does (cont’d)

• Works in both Quirks Mode and
Standards Mode
– A centralized “kludge” (was “hack”, but…)
– We develop with HTML 4.01 Strict which
puts us in Standards Mode
• Normalizes “em” size (almost)
– Allows font-size-responsive positioning


YUI Fonts – What it Does (cont’d)

• For free:
– Font-family: Arial (except per OS)
– Font-size = 13px (not pixels)
– Line-height = 16px (not pixels)
• Consistent em dimension.


Using YUI Fonts: Setting Size

To get pixel size Use this percentage http://developer.yahoo.com/yui/
10px 77%
11px 85%
12px 92%
13px 100%
14px 107% h1 {font-size:136%;}
15px 114% #node {font-size:77%;}
16px 122%
17px 129%
18px 136%
19px 144%
20px 152%


Using YUI Fonts: Setting Font

We use:
– Arial (default)
– Verdana
h1 {font-family:georgia;}
– Georgia
#node {font-family:verdana;}
– Tahoma .error {
– Monospace font-size:77%;
font-family:verdana;
color:red;
}


Hands-on Exercise #1

• Open hackday-exercise1.html
• Match these specs:

16 pixels

Verdana 11 pixels and grey
(#666)

italic
1em margin at the bottom of
each paragraph and after
source/timestamp


YUI Grids – What it Does
http://developer.yahoo.com/yui/grids

“The safe and easy way to create complex
page and template layouts that are
bulletproof and flexible.”

• 130+ layouts from single efficient CSS file
– (under 1.9kb)
• Recursive, extensible system


YUI Grids – What it Does (cont’d)
http://developer.yahoo.com/yui/grids

• Scale with font-size adjustment
• Source-order independent
• Self-clearing footer
• Fits all IAB Advertising Units
• Forward-compatible (coming soon!)


How It Works…

Two Components:
1. Templates
2. Subdivide with Grids and Units


How It Works… (cont’d)

• Choose a template (yui-t1…yui-t7)



• Switch top-level template (yui-t1)
• Experiment with source-order control


How It Works… (cont’d)

• “Recursively subdivide”
• Based on “grids”
holding “units”

• Custom “grids” for non-
even unit distribution


The Base Case:

.yui-g
.yui-u first
.yui-u

The Base Case:

.yui-g (tells children to take 50%)
.yui-u first (obey parent)
.yui-u (obey parent)

The Base Case:

<div class=“yui-g”>
<div class=“yui-u first”></div>
<div class=“yui-u”></div>
</div>

1. You Can Nest Grids.
2. Units and Grids can both be within Grids.

</div>
</div>

What % does each take up?

</div>
</div>

Special Grids (yui-g[a...f])

<div class=“yui-gb”>
<div class=“yui-u first”>33%</div>
<div class=“yui-u”>33%</div>
<div class=“yui-u”>33%</div>
</div>

. . .
<div id=“bd”>
<div id=“yui-main”>
<div class=“yui-b”>
</div>
</div>
</div>
</div>

. . .
<div class=“yui-b”>
<div class=“yui-g first”>
</div>
</div>
</div>
</div>

.yui-g
.yui-g first
.yui-u first
.yui-u
.yui-g
.yui-u first
.yui-u

.yui-g (tells children to take 50%)
.yui-g first (half of parent & children take half)
.yui-u first (half of parent)
.yui-u (half of parent)
.yui-g (half of parent & children take half)
.yui-u first (half of parent)
.yui-u (half of parent)


• Experiment stacking grids
• Experiment nesting grids
• Experiment with custom grids


Thanks!

• Available for questions all day and night
– In Clasroom 1 and Classroom 6
– Wandering around
• Hack on, hackers


�ݺ�ߣ

Yui css

More Related Content

Yui css