1 / 121

YUI’s CSS Foundation

YUI’s CSS Foundation. Nate Koechley 25 Oct 2007, Yahoo! natek@yahoo-inc.com http://ue.corp.yahoo.com/natek/yui-css. Welcome. Yahoo! User Interface (YUI). Documentation developer.yahoo.com/yui Mailing list groups.yahoo.com/group/ydn-javascript Blog yuiblog.com Nate Koechley

sachi
Download Presentation

YUI’s CSS Foundation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. YUI’s CSS Foundation Nate Koechley 25 Oct 2007, Yahoo! natek@yahoo-inc.com http://ue.corp.yahoo.com/natek/yui-css

  2. Welcome.

  3. Yahoo! User Interface (YUI) • Documentation • developer.yahoo.com/yui • Mailing list • groups.yahoo.com/group/ydn-javascript • Blog • yuiblog.com • Nate Koechley • natek@yahoo-inc.com

  4. HTML CSS JavaScript

  5. HTML CSS JavaScript

  6. CSS is different.Property values from anywhere and everywhere mingle and conflate before a final value is calculated.

  7. CSS is accretive. • Rule #1 Computed Style Rule #2

  8. Two primary layering models • The Cascade sorting rules: • Rules are sorted according to weight and origin. • The Inheritance of computed values: • Some properties are passed to descendent nodes, some of which can accept them. • (Tricky when values repeat, like "80%")

  9. The Cascade Rule #1 Computed Style Rule #2

  10. Inheritance Parent node Child node Grandchild Rule #1

  11. Errors and discrepancies are transferred equally efficiently.

  12. Goals of YUI CSS • Normalize differences • Provide stability • Centrally manage complexity • Solve recurring problems

  13. YUI CSS Components • Reset – a clean foundation • Fonts – typographical control • Grids – layout and page control • Base – basic helper/snippets lib

  14. Foundation Reset Fonts Grids Helpers Base “Base” is an outsider

  15. Grids • Fonts • Reset

  16. Including YUI CSS • Recommended: • Use <link> • Use http://yui.yahooapis.com • Concatenate with your own CSS • More info: • http://developer.yahoo.com/performance/

  17. Including Reset.css • http://yui.yahooapis.com/ • 2.3.1/ • build/ • reset/reset-min.css

  18. Including Fonts.css • http://yui.yahooapis.com/ • 2.3.1/ • build/ • fonts/fonts-min.css

  19. Including Grids.css • http://yui.yahooapis.com/ • 2.3.1/ • build/ • grids/grids-min.css

  20. Pre-Concatenated Version • http://yui.yahooapis.com/ • 2.3.1/ • build/ • reset-fonts-grids/ • reset-fonts-grids.css • (concatenated files are "min" by definition)

  21. Using YUI Grids Control overall page width and centering. Six preset templates that accommodate all IAB ad unit sizes and the vast majority of Y! pages. Easily create nested multi-column regions.

  22. ~4kb

  23. A black box system.

  24. Using YUI Grids Control overall page width and centering. Six preset templates that accommodate all IAB ad unit sizes and the vast majority of Y! pages. Easily create nested multi-column regions.

  25. Part I: Overall Page Width • 750px centered • 950px centered • 974px centered • 100% fluid

  26. 750px, centered

  27. 750px, centered

  28. 750px, centered

  29. 950px, centered

  30. 950px, centered

  31. 974px, centered

  32. 974px, centered

  33. 974px, centered

  34. 100% fluid

  35. 100% fluid

  36. Control the page from the root node.

  37. The root node • <body> • <div></div> • </body>

  38. What are DIVs for? • "The DIV element, in conjunction with id and class attributes, offers a generic mechanism for adding structure to documents."

  39. The root node • <body> • <div></div> • </body>

  40. Available ID values • 750px centered #doc • 950px centered #doc2 • 974px centered #doc4 • 100% fluid #doc3

  41. 750px centered document • <body> • <div id="doc"></div> • </body>

  42. 950px centered document • <body> • <div id="doc2"></div> • </body>

  43. 974px centered document • <body> • <div id="doc4"></div> • </body>

  44. 100% fluid document • <body> • <div id="doc3"></div> • </body>

  45. Notes: • Page width, defined in EMs, allows the page to expand when users zoom their fonts. It’s easy to lock it if you must. • div#doc can hold anything. • Centering is—amazingly—still non-trivial across the range of A-Grade browsers.

  46. Locking the page width • Fluid by default: • #doc2 { • width:73.074em;*width:71.313em; • } • Easy to lock with local override: • #doc2 { • width:950px; • }

  47. Notes: • Page width, defined in EMs, allows the page to expand when users zoom their fonts. It’s easy to lock it if you must. • div#doc can hold anything. • Centering is—amazingly—still non-trivial across the range of A-Grade browsers.

  48. #doc can hold anything • <body> • <div id="doc"> • <div id=“hd”></div> • <div id=“bd”></div> • <div id=“fd”></div> • </div> • </body>

  49. Notes: • Page width, defined in EMs, allows the page to expand when users zoom their fonts. It’s easy to lock it if you must. • div#doc can hold anything. • Centering is—amazingly—still non-trivial across the range of A-Grade browsers.

More Related