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

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 Platform Engineering, Yahoo!

YUI’s Foundational CSS CSS Reset, CSS Fonts, CSS Grids Nate Koechley Platform Engineering, Yahoo!

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

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 • Normalize and stabilize • Sound foundation enables sane development • Maximize Availability and Accessibility • Centralize wheel invention • Centralize kludges • A-Grade Browser Support • Support Yahoo! Specifications

The Three Tools • CSS Reset • CSS Fonts • 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

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

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 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; }

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

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

How It Works… Two Components: • Templates • Subdivide with Grids and Units

How It Works… (cont’d) • Choose a template (yui-t1…yui-t7)

<body> <div id="doc” class=“yui-t1”> <div id="hd"></div> <div id="bd"> <div id=“yui-main”> <div class=“yui-b”></div> </div> <div class=“yui-b”></div> </div> <div id="ft"></div> </div>

Hands-on Exercise #2 • Open hackday-exercise2.html • 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>

You Can Nest Grids. 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>

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>

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 class=“yui-b”></div> <div id=“yui-main”> <div class=“yui-b”> <div class=“yui-g”> <div class=“yui-u first”></div> <div class=“yui-u”></div> </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)

Hands-on Exercise #3 • Open hackday-exercise3.html • 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’s Foundational CSS CSS Reset, CSS Fonts, CSS Grids