• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Yui css
 

Yui css

on

  • 508 views

 

Statistics

Views

Total Views
508
Views on SlideShare
508
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Yui css Yui css Presentation Transcript

    • 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 KoechleyNate 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 KoechleyNate 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/blogNate 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)Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 4
    • 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 anotherNate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 5
    • 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
    • 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
    • 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
    • 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! SpecificationsNate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 9
    • The Three Tools 1. CSS Reset 2. CSS Fonts 3. CSS GridsNate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 10
    • 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 fieldNate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 11
    • 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 SupportNate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 12
    • 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; }Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 14
    • 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 consistencyNate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 15
    • 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 SupportNate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 16
    • 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
    • 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
    • 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; }Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 19
    • 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/timestampNate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 20
    • 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 systemNate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 21
    • 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 SupportNate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 22
    • How It Works… Two Components: 1. Templates 2. Subdivide with Grids and UnitsNate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 23
    • 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
    • <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 controlNate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 26
    • How It Works… (cont’d) • “Recursively subdivide” • Based on “grids” holding “units” • Custom “grids” for non- even unit distributionNate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 27
    • 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 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 gridsNate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 38
    • Thanks! • Available for questions all day and night – In Clasroom 1 and Classroom 6 – Wandering around • Hack on, hackersNate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 39