Yui css

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

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (11)

Similar to Yui css

Similar to Yui css (7)

Recently uploaded

Recently uploaded (20)

Yui css