4. 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)
Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 4
5. 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
Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 5
6. CSS’s Two Mechanisms
• Cascade
– many rules single element
• Inheritance
– single rule many elements
(And don’t forget about cascading inheritance, of course.)
Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 6
7. CSS is Accretive… (cont’d)
• The accretive aspects of CSS –
cascade and inheritance – are the
source of CSS’s power…
Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 7
8. 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!
Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 8
9. 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
Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 9
10. The Three Tools
1. CSS Reset
2. CSS Fonts
3. CSS Grids
Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 10
11. 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
Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 11
12. 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
Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 12
14. 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;
}
Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 14
15. 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
Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 15
16. YUI Fonts – What it Does (cont’d)
http://developer.yahoo.com/yui/fonts
• 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
• A-Grade Browser Support
Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 16
17. YUI Fonts – What it Does (cont’d)
http://developer.yahoo.com/yui/fonts
• For free:
– Font-family: Arial (except per OS)
– Font-size = 13px (not pixels)
– Line-height = 16px (not pixels)
• Consistent em dimension.
Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 17
18. 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%
Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 18
20. 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
Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 20
21. 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
Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 21
22. 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!)
• A-Grade Browser Support
Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 22
23. How It Works…
Two Components:
1. Templates
2. Subdivide with Grids and Units
Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 23
24. How It Works… (cont’d)
• Choose a template (yui-t1…yui-t7)
Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 24
26. Hands-on Exercise #2
• Open hackday-exercise2.html
• Switch top-level template (yui-t1)
• Experiment with source-order control
Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 26
27. How It Works… (cont’d)
• “Recursively subdivide”
• Based on “grids”
holding “units”
• Custom “grids” for non-
even unit distribution
Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 27
29. The Base Case:
.yui-g (tells children to take 50%)
.yui-u first (obey parent)
.yui-u (obey parent)
30. The Base Case:
<div class=“yui-g”>
<div class=“yui-u first”></div>
<div class=“yui-u”></div>
</div>
31. 1. You Can Nest Grids.
2. Units and Grids can both be within Grids.
<div class=“yui-g”>
<div class=“yui-u first”></div>
<div class=“yui-g”>
<div class=“yui-u first”></div>
<div class=“yui-u”></div>
</div>
</div>
32. What % does each take up?
<div class=“yui-g”>
<div class=“yui-u first”></div>
<div class=“yui-g”>
<div class=“yui-u first”></div>
<div class=“yui-u”></div>
</div>
</div>
36. .yui-g
.yui-g first
.yui-u first
.yui-u
.yui-g
.yui-u first
.yui-u
37. .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)
39. Thanks!
• Available for questions all day and night
– In Clasroom 1 and Classroom 6
– Wandering around
• Hack on, hackers
Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 39