Nate koechley the yui css foundation
-
Upload
niles-tang -
Category
Technology
-
view
2.626 -
download
4
description
Transcript of Nate koechley the yui css foundation
![Page 2: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/2.jpg)
Welcome.
![Page 3: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/3.jpg)
![Page 4: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/4.jpg)
Yahoo! User Interface (YUI)
Documentationdeveloper.yahoo.com/yui
Mailing listgroups.yahoo.com/group/ydn-javascript
Blogyuiblog.com
Nate [email protected]
![Page 5: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/5.jpg)
HTML CSSJavaScript
The User Interface
![Page 6: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/6.jpg)
HTML CSSJavaScript
The User Interface
![Page 7: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/7.jpg)
CSS is different.
Property values from anywhere and everywhere mingle and conflate before a final value is calculated.
![Page 8: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/8.jpg)
Powerful but risky.
Enables elegance.But a bit brittle.
![Page 9: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/9.jpg)
CSS is accretive.Rule #1
Computed Style
Rule #2
![Page 10: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/10.jpg)
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%")
![Page 11: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/11.jpg)
The CascadeRule #1
Computed Style
Rule #2
![Page 12: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/12.jpg)
InheritanceParent node
Child node
Rule #1Grandchild
![Page 13: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/13.jpg)
Errors and discrepancies are transferred equally
efficiently.
![Page 14: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/14.jpg)
Goals of YUI CSS• Provide stability• Normalize differences• Solve recurring problems• Centrally manage
complexity
![Page 15: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/15.jpg)
YUI CSS Components
Reset – a clean foundationFonts – typographical controlGrids – layout and page control
Base – basic helper/snippets lib
![Page 16: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/16.jpg)
"Base" is an outsider
Foundation•Reset•Fonts•Grids
Helpers• Base
![Page 17: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/17.jpg)
GridsFontsReset
![Page 18: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/18.jpg)
Including YUI CSS
Recommended:1. Use <link>2. Use http://yui.yahooapis.com 3. Concatenate with your own CSS
More info:http://developer.yahoo.com/performance/
![Page 19: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/19.jpg)
Including Reset.css
href="
http://yui.yahooapis.com/
2.3.1/
build/
reset/reset-min.css"
![Page 20: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/20.jpg)
Including Fonts.css
href=" http://yui.yahooapis.com/
2.3.1/
build/
fonts/fonts-min.css"
![Page 21: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/21.jpg)
Including Grids.css
href=" http://yui.yahooapis.com/
2.3.1/
build/
grids/grids-min.css"
![Page 22: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/22.jpg)
Pre-Concatenated Version
href=" http://yui.yahooapis.com/2.3.1/build/reset-fonts-grids/reset-fonts-grids.css"
(concatenated files are "min" by definition)
![Page 23: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/23.jpg)
Using YUI Grids
1. Control overall page width and centering.
2. Six preset templates accommodate all IAB ad unit sizes & nearly all Y! pages.
3. Easily create nested multi-column regions.
![Page 24: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/24.jpg)
~4kb
![Page 25: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/25.jpg)
A black box system.
![Page 26: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/26.jpg)
Using YUI Grids
1. Control overall page width and centering.
2. Six preset templates accommodate all IAB ad unit sizes & nearly all Y! pages.
3. Easily create nested multi-column regions.
![Page 27: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/27.jpg)
Part I: Overall Page Width
750px centered950px centered974px centered100% fluid
(easy to customize, but that should be rare.)
![Page 28: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/28.jpg)
750px, centered
![Page 29: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/29.jpg)
750px, centered
![Page 30: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/30.jpg)
750px, centered
![Page 31: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/31.jpg)
950px, centered
![Page 32: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/32.jpg)
950px, centered
![Page 33: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/33.jpg)
974px, centered
![Page 34: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/34.jpg)
974px, centered
![Page 35: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/35.jpg)
974px, centered
![Page 36: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/36.jpg)
100% fluid
![Page 37: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/37.jpg)
100% fluid
![Page 38: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/38.jpg)
Control the page from the root
node.
![Page 39: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/39.jpg)
The root node
<body>
<div></div>
</body>
![Page 40: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/40.jpg)
Why a div? Isn’t that "divitis?"
![Page 41: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/41.jpg)
What are DIVs for?"The DIV element, in conjunction
with id and class attributes, offers a generic mechanism for adding structure to documents."
![Page 42: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/42.jpg)
The root node
<body>
<div></div>
</body>
![Page 43: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/43.jpg)
Available ID values
750px centered #doc
950px centered #doc2
974px centered #doc4
100% fluid #doc3
![Page 44: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/44.jpg)
750px centered document
<body>
<div id="doc"></div>
</body>
![Page 45: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/45.jpg)
950px centered document
<body>
<div id="doc2"></div>
</body>
![Page 46: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/46.jpg)
974px centered document
<body>
<div id="doc4"></div>
</body>
![Page 47: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/47.jpg)
100% fluid document
<body>
<div id="doc3"></div>
</body>
![Page 48: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/48.jpg)
Notes:1. 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.
![Page 49: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/49.jpg)
Locking the page width
Fluid by default:#doc2 { width:73.074em;*width:71.313em;
}
Easy to lock with local override:#doc2 { width:950px;
}
![Page 50: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/50.jpg)
Notes:1. 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.
2. The div#doc can hold anything.
![Page 51: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/51.jpg)
#doc can hold anything
<body>
<div id="doc">
<div id="hd"></div>
<div id="bd"></div>
<div id="ft"></div>
</div>
</body>
![Page 52: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/52.jpg)
Notes:1. 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.
2. The div#doc can hold anything. 3. Centering is—amazingly—still
non-trivial across the range of A-Grade browsers.
![Page 53: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/53.jpg)
(A quick aside about Graded Browser Support.)
![Page 54: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/54.jpg)
Graded Browser Support
Whitelist of browsers that enjoy A-Grade support from YUI & Yahoo!
http://developer.yahoo.com/yui/articles/gbs
![Page 55: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/55.jpg)
(OK, now back to Grids.)
![Page 56: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/56.jpg)
Using YUI Grids
1. Control overall page width and centering.
2. Six preset templates accommodate all IAB ad unit sizes and the vast majority of Y! pages.
3. Easily create nested multi-column regions.
![Page 57: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/57.jpg)
![Page 58: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/58.jpg)
![Page 59: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/59.jpg)
The narrow column is fixed width. The main column gets the rest.
The size of their parent is irrelevant.
![Page 60: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/60.jpg)
Template 1: 160px left
Lorem ipsum dol or sit amet, con sec te tuer adipisc ing elit. Quisque a urna. Maecenas lo bortis lacinia nibh.
160pxDonec rhoncus, purus at vehicula mollis, lacus massa pulvinar nunc, vel semper neque enim quis nulla. Nunc rhoncus tincidunt eros. Nulla euismod, dui id
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.
![Page 61: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/61.jpg)
Template 2: 180px left
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque a urna. Maecenas lobortis lacinia nibh. In ac
180pxDonec 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
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 blockaccumsan 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
![Page 62: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/62.jpg)
Template 3: 300px left
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
300pxDonec rhoncus, purus at lobortis lacinia nibh. In acvehicula 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,
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 blockaccumsan 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
![Page 63: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/63.jpg)
Template 4: 180px right
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 blockDonec 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.
Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Quisque a urna. Maecenas lobortis lacinia nibh. In ac
180pxaccumsan 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 .
![Page 64: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/64.jpg)
Template 5: 240px right
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 blockDonec 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.
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.
![Page 65: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/65.jpg)
Template 6: 300px right
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 blockDonec 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.
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.
![Page 66: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/66.jpg)
![Page 67: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/67.jpg)
![Page 68: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/68.jpg)
2 columns = 2 content blocks
![Page 69: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/69.jpg)
Two content blocks<div id="doc">
<div class="yui-b"></div>
<div class="yui-b"></div>
</div>
![Page 70: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/70.jpg)
Now, identify the main block.
![Page 71: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/71.jpg)
identify the main block:
<div id="doc">
<div id="yui-main">
<div class="yui-b"></div>
</div>
<div class="yui-b"></div>
</div>
![Page 72: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/72.jpg)
Now, choose a template class.
![Page 73: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/73.jpg)
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
![Page 74: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/74.jpg)
Set the templateon the root DIV.
![Page 75: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/75.jpg)
Set the template at the root
<div id="doc" class"yui-t3">
<div id="yui-main">
<div class="yui-b"></div>
</div>
<div class="yui-b"></div>
</div>
![Page 76: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/76.jpg)
Hidden feature:Source order independence.
![Page 77: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/77.jpg)
Source order IndependenceThe order of the blocks does not
impact the layout.
Put important content first to boost Accessibility, Usability, and SEO
![Page 78: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/78.jpg)
Using YUI Grids
1. Control overall page width and centering.
2. Six preset templates accommodate all IAB ad unit sizes & nearly all Y! pages.
3. Easily create nested multi-column regions.
![Page 79: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/79.jpg)
Nested Grids• Use nested grids when you need
divisions of space beyond templates.
• Nested grids are based on a simple markup microformat.
![Page 80: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/80.jpg)
The basic microformat:
Grid holder: .yui-g
Units: .yui-u
<div class="yui-g">
<div class="yui-u"></div>
<div class="yui-u"></div>
</div>
![Page 81: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/81.jpg)
Each unit takes up half.
(half of anything - doesn’t care)
.yui-g
.yui-u .yui-u
![Page 82: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/82.jpg)
One more step: .first
Grid holder: .yui-g
Units: .yui-u
First unit .first
<div class="yui-g">
<div class="yui-u first"></div>
<div class="yui-u"></div>
</div>
![Page 83: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/83.jpg)
Each unit takes up half.
Gutters are voids between them.
.yui-g
.yui-u
.first.yui-u
![Page 84: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/84.jpg)
What about
four (2+2)?
![Page 85: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/85.jpg)
Nest again for four columns
div.yui-gdiv.yui-g.first
div.yui-u.first /divdiv.yui-u /div
/divdiv.yui-g
div.yui-u.first /divdiv.yui-u /div
/div/div
![Page 86: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/86.jpg)
What about three columns?
What about uneven distributions?
![Page 87: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/87.jpg)
Special Grid HoldersFor 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
![Page 88: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/88.jpg)
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
![Page 89: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/89.jpg)
Divide into threediv.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
![Page 90: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/90.jpg)
Grids are Stackable
.yui-u.first .yui-u .yui-u
.yui-gb
.yui-u.first .yui-um
.yui-gd
![Page 91: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/91.jpg)
Nested Grids
11/3 1/3 1/3
11/3 1/3 1/3
![Page 92: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/92.jpg)
Let’s review:
1. Page Width: div#doc2. Templates: .yui-t13. Grids: .yui-g .yui-u4. Fills any space. 5. Nestable & stackable.
Sweet! You can now make intricate layouts safely and quickly.
![Page 93: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/93.jpg)
![Page 94: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/94.jpg)
Using YUI Fonts
1. Mostly automatic.2. Reliably set font sizes.3. Other niceties.
![Page 95: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/95.jpg)
For free:Arial (and fallbacks)13px font size16px line height
![Page 96: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/96.jpg)
Using YUI Fonts
1. Mostly automatic.2. Reliably set precise font sizes.
![Page 97: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/97.jpg)
Use Percentages (%)
10px = 77%
11px = 85%
12px = 93%
13px = 100%
14px = 108%
15px = 116%
16px = 123.1%
![Page 98: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/98.jpg)
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%;}
![Page 99: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/99.jpg)
Using YUI Fonts
1. Mostly automatic.2. Reliably set precise font sizes.3. Other niceties.
![Page 100: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/100.jpg)
Allows User Zooming
Yes. Fonts and Grids combine to
preserve user zooming.
Delivers OS-appropriate Fonts
Yes. Happens for free.
![Page 101: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/101.jpg)
Fonts TipAvoid using the font: shorthand
because it is parsed inconsistently across browsers.
![Page 102: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/102.jpg)
Using YUI Reset
• Lowest-level piece of YUI CSS• Creates a clean and sturdy
foundation.
![Page 103: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/103.jpg)
Quiz:
• What is the default visualization of the STRONG element?
• Of the UL LI element?
![Page 104: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/104.jpg)
Answer:HTML has no visualization.
![Page 105: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/105.jpg)
Where does it come from?
• Browsers contains a browser.css file.
• Fine, but they’re all different.• Reset.css removes everything.
![Page 106: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/106.jpg)
What does Reset do?
Sets margin and padding to zeroSets borders to zeroRemoves visual list style (ol, ul, dl)
Sets fonts to 100% of baseSets font-weight & font-style to normal
Etc…
![Page 107: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/107.jpg)
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.
![Page 108: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/108.jpg)
Using YUI Base
1. Almost a "snippets" library.2. Gives back what Reset removes.3. Great for linear HTML content
pages.
![Page 109: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/109.jpg)
A page with Grids & Base
![Page 110: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/110.jpg)
YUI CSS SummaryReset – a clean foundationFonts – typographical controlGrids – layout and page control
Base – basic helper/snippets lib
![Page 111: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/111.jpg)
Other YUI CSS Notes1. Calculating EMs2. Customizing Template Presets
![Page 112: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/112.jpg)
Calculating EMsPixel width / 13px = “EM width”“EM width” x 0.9759 = “IE’s EM
width”
#custom-doc {
width:46.15em;/* non-IE *
*width:45.04em;/* IE */
}
![Page 113: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/113.jpg)
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;
}
![Page 115: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/115.jpg)
More InformationDocumentation
http://developer.yahoo.com/yui
Mailing list
http://groups.yahoo.com/group/ydn-javascript
Bloghttp://yuiblog.com
Nate [email protected]
![Page 116: Nate koechley the yui css foundation](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468f433af79596a1b8b4b30/html5/thumbnails/116.jpg)
CC Image CreditsPyramide Inversée:
http://www.flickr.com/photos/drodriguez/117818017/
Cusco Qoricancha Inca foundationshttp://www.flickr.com/photos/yandi/364125159/
Three-legged Stoolhttp://www.mnartists.org/work.do?rid=34382
Enjoy the opennesshttp://www.flickr.com/photos/perfhex/293118214/
Night Lightshttp://www.flickr.com/photos/fornal/391746944/
Helveticahttp://www.flickr.com/photos/redsil/490734685/