Nate koechley the yui css foundation
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Nate koechley the yui css foundation

on

  • 2,594 views

introduce how to use yui css

introduce how to use yui css

Statistics

Views

Total Views
2,594
Views on SlideShare
2,594
Embed Views
0

Actions

Likes
2
Downloads
7
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
  • (microformats are simple data formats based on existing technology and usage patterns.)

Nate koechley the yui css foundation Presentation Transcript

  • 1. YUI’s CSS Foundation Nate Koechley 25 Oct 2007, Yahoo! [email_address]
  • 2. Welcome.
  • 3.  
  • 4. Yahoo! User Interface (YUI)
    • Documentation
    • developer.yahoo.com/yui
    • Mailing list
    • groups.yahoo.com/group/ydn-javascript
    • Blog
    • yuiblog.com
    • Nate Koechley
    • [email_address]
  • 5.
    • HTML
    CSS JavaScript The User Interface
  • 6.
    • HTML
    CSS JavaScript The User Interface
  • 7. CSS is different. Property values from anywhere and everywhere mingle and conflate before a final value is calculated.
  • 8. Powerful but risky. Enables elegance. But a bit brittle.
  • 9. CSS is accretive .
    • Rule #1
    Computed Style Rule #2
  • 10. Two primary layering models
    • The Cascade model:
      • Rules are sorted according to weight and origin.
    • The Inheritance model:
      • Some properties are passed to descendent nodes, some of which can accept them.
      • (Tricky when values repeat, like "80%")
  • 11. The Cascade Rule #1 Computed Style Rule #2
  • 12. Inheritance Parent node Child node Rule #1 Grandchild
  • 13. Errors and discrepancies are transferred equally efficiently.
  • 14. Goals of YUI CSS
    • Provide stability
    • Normalize differences
    • Solve recurring problems
    • Centrally manage complexity
  • 15. YUI CSS Components
    • Reset – a clean foundation
    • Fonts – typographical control
    • Grids – layout and page control
    • Base – basic helper/snippets lib
  • 16. "Base" is an outsider
    • Foundation
    • Reset
    • Fonts
    • Grids
    • Helpers
    • Base
  • 17.
    • Grids
    • Fonts
    • Reset
  • 18. Including YUI CSS
    • Recommended:
    • Use <link>
    • Use http://yui.yahooapis.com
    • Concatenate with your own CSS
    • More info:
    • http://developer.yahoo.com/performance/
  • 19. Including Reset.css
    • href=&quot;
    • http://yui.yahooapis.com/
    • 2.3.1/
    • build/
    • reset/reset-min.css&quot;
  • 20. Including Fonts.css
    • href=&quot; http://yui.yahooapis.com/
    • 2.3.1/
    • build/
    • fonts/fonts-min.css&quot;
  • 21. Including Grids.css
    • href=&quot; http://yui.yahooapis.com/
    • 2.3.1/
    • build/
    • grids/grids-min.css&quot;
  • 22. Pre-Concatenated Version
    • href=&quot; http://yui.yahooapis.com/
    • 2.3.1/
    • build/
    • reset-fonts-grids/
    • reset-fonts-grids.css&quot;
    • (concatenated files are &quot;min&quot; by definition)
  • 23. Using YUI Grids
    • Control overall page width and centering.
    • Six preset templates accommodate all IAB ad unit sizes & nearly all Y! pages.
    • Easily create nested multi-column regions.
  • 24. ~4kb
  • 25. A black box system.
  • 26. Using YUI Grids
    • Control overall page width and centering.
    • Six preset templates accommodate all IAB ad unit sizes & nearly all Y! pages.
    • Easily create nested multi-column regions.
  • 27. Part I: Overall Page Width
    • 750px centered
    • 950px centered
    • 974px centered
    • 100% fluid
    • (easy to customize, but that should be rare.)
  • 28. 750px, centered
  • 29. 750px, centered
  • 30. 750px, centered
  • 31. 950px, centered
  • 32. 950px, centered
  • 33. 974px, centered
  • 34. 974px, centered
  • 35. 974px, centered
  • 36. 100% fluid
  • 37. 100% fluid
  • 38. Control the page from the root node.
  • 39. The root node
    • <body>
    • < div ></div>
    • </body>
  • 40. Why a div ? Isn’t that &quot;divitis?&quot;
  • 41. What are DIV s for?
    • &quot;The DIV element, in conjunction with id and class attributes, offers a generic mechanism for adding structure to documents.&quot;
  • 42. The root node
    • <body>
    • < div ></div>
    • </body>
  • 43. Available ID values
    • 750px centered #doc
    • 950px centered #doc2
    • 974px centered #doc4
    • 100% fluid #doc3
  • 44. 750px centered document
    • <body>
    • <div id=&quot; doc &quot;></div>
    • </body>
  • 45. 950px centered document
    • <body>
    • <div id=&quot; doc2 &quot;></div>
    • </body>
  • 46. 974px centered document
    • <body>
    • <div id=&quot; doc4 &quot;></div>
    • </body>
  • 47. 100% fluid document
    • <body>
    • <div id=&quot; doc3 &quot;></div>
    • </body>
  • 48. Notes:
    • Page widths are defined with EM s. This means the page will expand when users zoom this fonts.
    • It’s easy to lock it down if you must.
  • 49. Locking the page width
    • Fluid by default:
    • #doc2 {
    • width:73.074em;*width:71.313em;
    • }
    • Easy to lock with local override:
    • #doc2 {
    • width:950px;
    • }
  • 50. Notes:
    • Page widths are defined with EMs. This means the page will expand when users zoom this fonts. It’s easy to lock it down if you must.
    • The div#doc can hold anything.
  • 51. #doc can hold anything
    • <body>
    • <div id=&quot; doc &quot;>
    • <div id=&quot; hd &quot;></div>
    • <div id=&quot; bd &quot;></div>
    • <div id=&quot; ft &quot;></div>
    • </div>
    • </body>
  • 52. Notes:
    • Page widths are defined with EMs. This means the page will expand when users zoom this fonts. It’s easy to lock it down if you must.
    • The div#doc can hold anything.
    • Centering is—amazingly—still non-trivial across the range of A-Grade browsers.
  • 53. (A quick aside about Graded Browser Support.)
  • 54. Graded Browser Support
    • Whitelist of browsers that enjoy A-Grade support from YUI & Yahoo!
    http://developer.yahoo.com/yui/articles/gbs
  • 55. (OK, now back to Grids.)
  • 56. Using YUI Grids
    • Control overall page width and centering.
    • Six preset templates accommodate all IAB ad unit sizes and the vast majority of Y! pages.
    • Easily create nested multi-column regions.
  • 57.  
  • 58.  
  • 59. The narrow column is fixed width. The main column gets the rest. The size of their parent is irrelevant.
  • 60. Template 1: 160px left Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque a urna. Maecenas lobortis lacinia nibh. In ac odio. Donec rhoncus, purus at vehicula mollis, lacus massa pulvinar nunc, vel semper neque enim quis nulla. Nunc rhoncus tincidunt eros. Nulla euismod, dui id commodo viverra, pede leo aliquam diam, non eleifend The main block accumsan non, mollis in, neque. Aliquam eu tellus. Morbi imperdiet, eros gravida dictum suscipit, dui orci dapibus erat, et pretium dui est eget velit. Proin eget neque in ante fringilla pulvinar. Proin vel augue. Mauris aliquam tempus nibh. Curabitur enim ante, laoreet ullamcorper, mollis in, dapibus quis, orci. Curabitur consequat, neque eu lobortis tristique, quam nibh posuere purus, in egestas mi posuere purus, in egestas neque ut pede. Pellentesque lacinia, elit a tincidunt bibendum, nisl dolor consequat lorem, sit amet lobortis elit ligula at ante. Lorem ipsum dol or sit amet, con sec te tuer adipisc ing elit. Quisque a urna. Maecenas lo bortis lacinia nibh. 160px Donec rhoncus, purus at vehicula mollis, lacus massa pulvinar nunc, vel semper neque enim quis nulla. Nunc rhoncus tincidunt eros. Nulla euismod, dui id
  • 61. Template 2: 180px left Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque a urna. Maecenas lobortis lacinia nibh. In ac odio. Donec rhoncus, purus at vehicula mollis, lacus massa pulvinar nunc, vel semper neque enim quis nulla. Nunc rhoncus tincidunt eros. Nulla euismod, dui id commodo viverra, pede leo aliquam diam, non eleifend The main block accumsan non, mollis in, neque. Aliquam eu tellus. Morbi imperdiet, eros gravida dictum suscipit, dui orci dapibus erat, et pretium dui est eget velit. Proin eget neque in ante fringilla pulvinar. Proin vel augue. Mauris aliquam tempus nibh. Curabitur enim ante, laoreet ullamcorper, mollis in, dapibus quis, orci. Curabitur consequat, neque eu lobortis tristique, quam nibh posuere purus, in egestas mi neque ut pede. Pellentesque lacinia, elit a tincidunt bibendum, nisl dolor consequat lorem, sit amet lobortis elit ligula at Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque a urna. Maecenas lobortis lacinia nibh. In ac 180px Donec rhoncus, purus at vehicula mollis, lacus massa pulvinar nunc, vel semper neque enim quis nulla. Nunc rhoncus tincidunt eros. Nulla euismod, dui id commodo viverra, pede leo aliquam
  • 62. Template 3: 300px left Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque a urna. Maecenas lobortis lacinia nibh. In ac odio. Donec rhoncus, purus at vehicula neque enim quis nulla. Nunc rhoncus tincidunt eros. Nulla euismod, dui id commodo viverra, pede leo The main block accumsan non, mollis in, neque. Aliquam eu tellus. Morbi imperdiet, eros gravida dictum suscipit, dui orci dapibus erat, et pretium dui est eget velit. Proin eg mollis, lacus massa pulvinar nunc, vel semper et neque in ante fringilla pulvinar. Proin vel augue. Mauris aliquam diam, non eleifend aliquam tempus nibh. Curabitur enim ante, laoreet ullamcorper, mollis in, dapibus quis, orci. Curabitur consequat, neque eu lobortis Lorem ipsum dolor sit amet, consectetuer adip quis nulla. Nunc rhoncus tincidunt eros. Nulla euismod, dui id commodo viverra, pede leo iscing elit. Quisque a urna. Maecenas 300px Donec rhoncus, purus at lobortis lacinia nibh. In ac vehicula mollis, lacus massa pulvinar nunc, vel semper neque enim quis nulla. Nunc rhoncus tincidunt eros. Nulla euismod, dui id commodo viverra, pede leo aliquam diam, non eleifend dolor pede lacinia felis. llus dolor enim,
  • 63. Template 4: 180px right Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Quisque a urna. Maecenas lobortis lacinia nibh. In ac 180px accumsan non, mollis in, neque. Aliquam eu tellus. Morbi imperdiet, eros gravida dictum suscipit, dui orci dapibus erat, et pretium dui est eget velit. Proin eget neque in ante . Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque a urna. Maecenas lobortis lacinia nibh. In ac eleifend dolor pede lacinia felis. llus dolor enim, consectetuer id, accumsan non, mollis in, neque. Aliquam eu tellus. Morbi imperdiet, eros gravida dictum suscipit, dui orci dapibus erat, et pretium dui est eget velit. Proin The main block Donec rhoncus, purus at vehicula mollis, lacus massa pulvinar nunc, vel semper neque enim quis nulla. Nunc rhoncus tincidunt eros. Nulla euismod, dui id commodo viverra, pede leo aliquam diam, non eleifend dolor pede lacinia felis. llus dolor enim, consectetuer id, accumsan non, mollis in, neque. Aliquam eu tellus. Morbi imperdiet, eros gravida dictum suscipit, dui orci dapibus erat, et pretium dui est eget velit. Proin eget neque in ante fringilla pulvinar. Proin vel augue. Mauris aliquam tempus nibh. Curabitur enim ante, laoreet ullamcorper, mollis in.
  • 64. Template 5: 240px right Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Quisque a urna. Maecenas et pretium dui est eget velit. Proin eget neque in ante fringilla lobortis lacinia nibh. 240px accumsan non, mollis in, neque. Aliquam eu tellus. Morbi imperdiet, eros gravida dictum suscipit, dui orci dapibus erat, et pretium dui est eget velit. Proin eget neque in ante fringilla pulvinar. Proin vel augue. Mauris aliquam tempus nibh. Curabitur enim ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque a urna. Maecenas lobortis lacinia nibh. In ac eleifend dolor pede lacinia felis. llus dolor enim, consectetuer id, accumsan non, mollis in, neque. Aliquam eu tellus. Morbi imperdiet, eros gravida dictum suscipit, dui orci The main block Donec rhoncus, purus at vehicula mollis, lacus massa pulvinar nunc, vel semper neque enim quis nulla. Nunc rhoncus tincidunt eros. Nulla euismod, dui id commodo viverra, pede leo aliquam diam, non eleifend dolor pede lacinia felis. llus dolor enim, consectetuer id, accumsan non, mollis in, neque. Aliquam eu tellus. Morbi imperdiet, eros gravida dictum suscipit, dui orci dapibus erat, et pretium dui est eget velit. Proin eget neque in ante fringilla pulvinar. Proin vel.
  • 65. Template 6: 300px right Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Quisque a urna. Maecenas et pretium dui est eget velit. Proin eget neque in ante fringilla lobortis lacinia nibh. 300px accumsan non, mollis in, neque. Aliquam eu tellus. Morbi imperdiet, eros gravida dictum suscipit, dui orci dapibus erat, et pretium dui est eget velit. Proin eget neque in ante fringilla pulvinar. Proin vel augue. Mauris aliquam tempus nibh. Curabitur enim ante, laoreet ullamcorper, mollis in, dapibus quis, orci. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque a urna. Maecenas lobortis lacinia nibh. In ac eleifend dolor pede lacinia felis. llus dolor enim, consectetuer id, accumsan non, mollis in, neque. Aliquam eu tellus. Morbi imperdiet, eros gravida dictum The main block Donec rhoncus, purus at vehicula mollis, lacus massa pulvinar nunc, vel semper neque enim quis nulla. Nunc rhoncus tincidunt eros. Nulla euismod, dui id commodo viverra, pede leo aliquam diam, non eleifend dolor pede lacinia felis. llus dolor enim, consectetuer id, accumsan non, mollis in, neque. Aliquam eu tellus. Morbi imperdiet, eros gravida dictum suscipit, dui orci dapibus erat, et pretium dui est ege.
  • 66.  
  • 67.  
  • 68. 2 columns = 2 content blocks
  • 69. Two content b locks
    • <div id=&quot;doc&quot;>
    • <div class=&quot; yui-b &quot;></div>
    • <div class=&quot; yui-b &quot;></div>
    • </div>
  • 70. Now, id entify the main block.
  • 71. id entify the main block :
    • <div id=&quot;doc&quot;>
    • <div id=&quot; yui-main &quot;>
    • <div class=&quot; yui-b &quot;></div>
    • </div>
    • <div class=&quot;yui-b&quot;></div>
    • </div>
  • 72. Now, choose a t emplate class.
  • 73. Available Template Classes
    • left 160px .yui-t1
    • left 180px .yui-t2
    • left 300px .yui-t3
    • right 180px .yui-t4
    • right 240px .yui-t5
    • right 300px .yui-t6
  • 74. Set the template on the root DIV .
  • 75. Set the template at the root
    • <div id=&quot;doc&quot; class&quot; yui-t3 &quot;>
    • <div id=&quot;yui-main&quot;>
    • <div class=&quot;yui-b&quot;></div>
    • </div>
    • <div class=&quot;yui-b&quot;></div>
    • </div>
  • 76. Hidden feature: Source order independence.
  • 77. Source order Independence
    • The order of the blocks does not impact the layout.
    • Put important content first to boost Accessibility, Usability, and SEO
  • 78. Using YUI Grids
    • Control overall page width and centering.
    • Six preset templates accommodate all IAB ad unit sizes & nearly all Y! pages.
    • Easily create nested multi-column regions.
  • 79. Nested Grids
    • Use nested grids when you need divisions of space beyond templates.
    • Nested grids are based on a simple markup microformat.
  • 80. The basic microformat:
    • G rid holder: .yui- g
    • U nits: .yui- u
    • <div class=&quot; yui- g &quot;>
    • <div class=&quot; yui -u &quot;></div>
    • <div class=&quot; yui -u &quot;></div>
    • </div>
  • 81. Each u nit takes up half. (half of anything - doesn’t care)
    • .yui-g
    .yui-u .yui-u
  • 82. One more step: .first
    • G rid holder: .yui- g
    • U nits: .yui- u
    • First unit . first
    • <div class=&quot; yui- g &quot;>
    • <div class=&quot; yui -u first &quot;></div>
    • <div class=&quot; yui -u &quot;></div>
    • </div>
  • 83. Each unit takes up half. Gutters are voids between them.
    • .yui-g
    .yui-u .first .yui-u
  • 84. What about four (2+2)?
  • 85. Nest again for four columns
    • div.yui- g
    • div.yui- g.first
    • div.yui-u.first /div
    • div.yui-u /div
    • /div
    • div.yui- g
    • div.yui-u.first /div
    • div.yui-u /div
    • /div
    • /div
  • 86. What about three columns? What about uneven distributions?
  • 87. Special Grid Holders
    • For three columns
    • .yui-gb 1/3 -- 1/3 -- 1/3
    • For uneven distributions
    • .yui-gc 2/3 -- 1/2
    • .yui-gd 1/3 -- 2/3
    • .yui-ge 3/4 -- 1/4
    • .yui-gf 1/4 -- 3/4
  • 88. Uneven columns (for example 1/3—2/3)
    • div. yui-gd
    • div.yui-u.first /div
    • div.yui-u /div
    • /div
    .yui-u.first .yui-u .yui-gd
  • 89. Divide into three
    • div.yui- gb
    • div.yui-u.first /div
    • div.yui-u /div
    • div.yui-u /div
    • /div
    .yui-u.first .yui-u .yui-u .yui-gb
  • 90. Grids are Stackable .yui-u.first .yui-u .yui-u .yui-gb .yui-u.first .yui-um .yui-gd
  • 91. Nested Grids 1 1/3 1/3 1/3 1 1/3 1/3 1/3
  • 92. Let’s review:
    • Page Width: div#doc
    • Templates: .yui-t1
    • Grids: .yui-g .yui-u
    • Fills any space.
    • Nestable & stackable.
    • Sweet! You can now make intricate layouts safely and quickly.
  • 93.  
  • 94. Using YUI Fonts
    • Mostly automatic.
    • Reliably set font sizes.
    • Other niceties.
  • 95. For free:
    • Arial (and fallbacks)
    • 13px font size
    • 16px line height
  • 96. Using YUI Fonts
    • Mostly automatic.
    • Reliably set precise font sizes.
  • 97. Use Percentages (%)
    • 10px = 77%
    • 11px = 85%
    • 12px = 93%
    • 13px = 100%
    • 14px = 108%
    • 15px = 116%
    • 16px = 123.1%
  • 98. Don’t use pixels
    • Pixel sizes break IE’s ability to zoom fonts.
    Always use percentages h1 {font-size:123.1%;} .hd h1 {font-size:77%;}
  • 99. Using YUI Fonts
    • Mostly automatic.
    • Reliably set precise font sizes.
    • Other niceties.
  • 100. Allows User Zooming
    • Yes.
    • Fonts and Grids combine to preserve user zooming.
    Delivers OS-appropriate Fonts Yes. Happens for free.
  • 101. Fonts Tip
    • Avoid using the font: shorthand because it is parsed inconsistently across browsers.
  • 102. Using YUI Reset
    • Lowest-level piece of YUI CSS
    • Creates a clean and sturdy foundation.
  • 103. Quiz:
    • What is the default visualization of the STRONG element?
    • Of the UL LI element?
  • 104. Answer: HTML has no visualization.
  • 105. Where does it come from?
    • Browsers contains a browser.css file.
    • Fine, but they’re all different.
    • Reset.css removes everything.
  • 106. What does Reset do?
      • Sets margin and padding to zero
      • Sets borders to zero
      • Removes visual list style (ol, ul, dl)
      • Sets fonts to 100% of base
      • Sets font-weight & font-style to normal
      • Etc…
  • 107. Using Reset
    • Nothing to learn, but you’ll need to be explicit.
      • Browsers are good at guessing, but even better at following directions.
    • It’s a good reminder that HTML should be chosen based on content alone.
  • 108. Using YUI Base
      • Almost a &quot;snippets&quot; library.
      • Gives back what Reset removes.
      • Great for linear HTML content pages.
  • 109. A page with Grids & Base
  • 110. YUI CSS Summary
    • Reset – a clean foundation
    • Fonts – typographical control
    • Grids – layout and page control
    • Base – basic helper/snippets lib
  • 111. Other YUI CSS Notes
    • Calculating EMs
    • Customizing Template Presets
  • 112. Calculating EMs
    • Pixel width / 13px = “EM width”
    • “EM width” x 0.9759 = “IE’s EM width”
    • #custom-doc {
    • width:46.15em;/* non-IE *
    • *width:45.04em;/* IE */
    • }
  • 113. Customizing Templates
    • .yui-t2 .yui-b {
    • float:left;
    • width:13.8456em;
    • *width:13.512em;
    • }
    • .yui-t2 #yui-main .yui-b {
    • margin-left:14.8456em;
    • *margin-left:14.512em;
    • }
  • 114. Thank you. [email_address]
  • 115. More Information
    • Documentation
    • http://developer.yahoo.com/yui
    • Mailing list
    • http://groups.yahoo.com/group/ydn-javascript
    • Blog
    • http://yuiblog.com
    • Nate Koechley
    • [email_address]
  • 116. CC Image Credits
    • Pyramide Inversée: http://www.flickr.com/photos/drodriguez/117818017/
    • Cusco Qoricancha Inca foundations
    • http://www.flickr.com/photos/yandi/364125159/
    • Three-legged Stool
    • http://www.mnartists.org/work.do?rid=34382
    • Enjoy the openness
    • http://www.flickr.com/photos/perfhex/293118214/
    • Night Lights
    • http://www.flickr.com/photos/fornal/391746944/
    • Helvetica
    • http://www.flickr.com/photos/redsil/490734685/