Uploaded on

 

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,249
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 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
  • 2. 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
  • 3. 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
  • 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 anotherNate 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! SpecificationsNate 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 GridsNate 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 fieldNate 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 SupportNate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006 12
  • 13. 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:;}
  • 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 consistencyNate 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 SupportNate 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
  • 19. 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
  • 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/timestampNate 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 systemNate 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 SupportNate 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 UnitsNate 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
  • 25. <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>
  • 26. 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
  • 27. 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
  • 28. The Base Case:.yui-g .yui-u first .yui-u
  • 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>
  • 33. 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>
  • 34. . . .<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>
  • 35. . . .<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>
  • 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)
  • 38. 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
  • 39. 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