yui css

1Nate Koechley – [email protected] – Yahoo! Hack Day, September 29/30th, 2006

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

Nate Koechley Platform Engineering, Yahoo!

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

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

mailto:[email protected]

http://yuiblog.com/devday06/yui-css/

http://yuiblog.com/devday06/yui-css/


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

Nate Koechley Platform Engineering, Yahoo!



About me…[email protected]

• YUI team:

– Engineer and Design Liaison

– Technical Evangelist

• Graded Browser Support…

…and browser vendor coordination

• http://yuiblog.com

• http://nate.koechley.com/blog



http://yuiblog.com/

http://nate.koechley.com/blog


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 Doeshttp://developer.yahoo.com/yui/reset

• Cross-browser normalization of the default rendering of HTML elements

– Overcome browser.css

– Level the playing field


http://developer.yahoo.com/yui/reset


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)

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

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

strong {font-weight:bold;}h1 {margin-bottom:1em;}

strong {font-weight:bold;}h1 {margin-bottom:1em;}





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


http://developer.yahoo.com/yui/fonts


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





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.





Using YUI Fonts: Setting Size

http://developer.yahoo.com/yui/fonts/#using


To get pixel size Use this percentage

10px 77%

11px 85%

12px 92%

13px 100%

14px 107%

15px 114%

16px 122%

17px 129%

18px 136%

19px 144%

20px 152%

h1 {font-size:136%;}

#node {font-size:77%;}

h1 {font-size:136%;}

#node {font-size:77%;}







Using YUI Fonts: Setting Font

We use:– Arial (default)

– Verdana

– Georgia

– Tahoma

– Monospace

h1 {font-family:georgia;}#node {font-family:verdana;}.error {

font-size:77%;font-family:verdana;color:red;

}

h1 {font-family:georgia;}#node {font-family:verdana;}.error {

font-size:77%;font-family:verdana;color:red;

}



Hands-on Exercise #1

1. Open hackday-exercise1.html 2. Match these specs:

16 pixels

italic

Verdana 11 pixels and grey (#666)

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



YUI Grids – What it Doeshttp://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


http://developer.yahoo.com/yui/grids


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!)



http://developer.yahoo.com/yui/grids


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)




1. Open hackday-exercise2.html 2. Switch top-level template (yui-t1)3. 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”> <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></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)



1. Open hackday-exercise3.html 2. Experiment stacking grids3. Experiment nesting grids4. 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

Technology

yahoo hack day

css gridsnate koechley

css rules

css reset2

css fonts3

css fonts handson

yui css goals1

comblognate koechley