yui’s css foundation
DESCRIPTION
YUI’s CSS Foundation. Nate Koechley 25 Oct 2007, Yahoo! [email protected] 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 - PowerPoint PPT PresentationTRANSCRIPT
YUI’s CSS Foundation
Nate Koechley25 Oct 2007, Yahoo!
[email protected]://ue.corp.yahoo.com/natek/yui-css
Welcome.
Yahoo! User Interface (YUI)
Documentationdeveloper.yahoo.com/yui
Mailing listgroups.yahoo.com/group/ydn-javascript
Blogyuiblog.com
Nate [email protected]
HTML CSSJavaScript
HTML CSSJavaScript
CSS is different.
Property values from anywhere and everywhere mingle and conflate before a final value is calculated.
CSS is accretive.Rule #1
Computed Style
Rule #2
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%")
The CascadeRule #1
Computed Style
Rule #2
InheritanceParent node
Child node
Rule #1Grandchild
Errors and discrepancies are transferred equally
efficiently.
Goals of YUI CSS• Normalize differences• Provide stability• Centrally manage
complexity• Solve recurring problems
YUI CSS Components
Reset – a clean foundationFonts – typographical controlGrids – layout and page control
Base – basic helper/snippets lib
“Base” is an outsider
Foundation• Reset• Fonts• Grids
Helpers• Base
GridsFontsReset
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/
Including Reset.css
http://yui.yahooapis.com/
2.3.1/
build/
reset/reset-min.css
Including Fonts.css
http://yui.yahooapis.com/
2.3.1/
build/
fonts/fonts-min.css
Including Grids.css
http://yui.yahooapis.com/
2.3.1/
build/
grids/grids-min.css
Pre-Concatenated Version
http://yui.yahooapis.com/2.3.1/build/
reset-fonts-grids/reset-fonts-grids.css
(concatenated files are "min" by definition)
Using YUI Grids
1. Control overall page width and centering.
2. Six preset templates that accommodate all IAB ad unit sizes and the vast majority of Y! pages.
3. Easily create nested multi-column regions.
~4kb
A black box system.
Using YUI Grids
1. Control overall page width and centering.
2. Six preset templates that accommodate all IAB ad unit sizes and the vast majority of Y! pages.
3. Easily create nested multi-column regions.
Part I: Overall Page Width
750px centered950px centered974px centered100% fluid
750px, centered
750px, centered
750px, centered
950px, centered
950px, centered
974px, centered
974px, centered
974px, centered
100% fluid
100% fluid
Control the page from the root
node.
The root node
<body>
<div></div>
</body>
What are DIVs for?"The DIV element, in conjunction
with id and class attributes, offers a generic mechanism for adding structure to documents."
The root node
<body>
<div></div>
</body>
Available ID values
750px centered #doc
950px centered #doc2
974px centered #doc4
100% fluid #doc3
750px centered document
<body>
<div id="doc"></div>
</body>
950px centered document
<body>
<div id="doc2"></div>
</body>
974px centered document
<body>
<div id="doc4"></div>
</body>
100% fluid document
<body>
<div id="doc3"></div>
</body>
Notes:1. Page width, defined in EMs,
allows the page to expand when users zoom their fonts. It’s easy to lock it if you must.
2. div#doc can hold anything.3. Centering is—amazingly—still
non-trivial across the range of A-Grade browsers.
Locking the page width
Fluid by default:#doc2 { width:73.074em;*width:71.313em;
}
Easy to lock with local override:#doc2 { width:950px;
}
Notes:1. Page width, defined in EMs,
allows the page to expand when users zoom their fonts. It’s easy to lock it if you must.
2. div#doc can hold anything.3. Centering is—amazingly—still
non-trivial across the range of A-Grade browsers.
#doc can hold anything
<body>
<div id="doc">
<div id=“hd”></div>
<div id=“bd”></div>
<div id=“fd”></div>
</div>
</body>
Notes:1. Page width, defined in EMs,
allows the page to expand when users zoom their fonts. It’s easy to lock it if you must.
2. div#doc can hold anything.3. Centering is—amazingly—still
non-trivial across the range of A-Grade browsers.
(A quick aside about Graded Browser Support.)
Graded Browser Support
Whitelist of browsers that enjoy A-Grade support from YUI & Yahoo!
http://developer.yahoo.com/yui/articles/gbs
(OK, now back to Grids.)
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.
The narrow column is fixed width. The main column gets the rest.
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.
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
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
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 .
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.
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.
2 columns = 2 content blocks
Two content blocks<div id="doc">
<div class="yui-b"></div>
<div class="yui-b"></div>
</div>
Now, identify the main block.
identify the main block:
<div id="doc">
<div id="yui-main">
<div class="yui-b"></div>
</div>
<div class="yui-b"></div>
</div>
Now, choose a template class.
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
Set the template for the overall
document at our root DIV.
Classify the document 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>
Hidden feature:Source order independence.
Source order IndependenceAt this level, the order of the
blocks does not impact the layout.
Put important content first to boost Accessibility, Usability, and SEO
Using YUI Grids
1. Control overall page width and centering.
2. Six preset templates that accommodate all IAB ad unit sizes and the vast majority of Y! pages.
3. Easily create nested multi-column regions.
Nested Grids• Use nested grids when you need
more than two columns.• Nesting grids are based on a
simple markup microformat.
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>
Each unit takes up half.
(half of anything)
.yui-g
.yui-u .yui-u
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>
Each unit takes up half.
.yui-g
.yui-u
.first.yui-u
What about more than two?
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
What about three columns?
What about uneven distributions?
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
Nested Grids
3 column = Special Grid “B”
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
Uneven Columns (1/3—2/3)
div.yui-gd
div.yui-u.first /div
div.yui-u /div
/div
.yui-u.first .yui-u
.yui-gd
Let’s review:
1. Page Width: div#doc
2. Templates: .yui-t1
3. Grids: .yui-g .yui-u
4. Fills any space.
Sweet! You can now make intricate layouts safely and quickly.
Next: YUI Fonts
Using YUI Fonts
1. Lots for free.2. Reliably set font sizes.3. Protect user’s ability to zoom their
font sizes.4. Deliver appropriate fonts families
per platform.
For free:Arial (and fallbacks)13px font size16px line height
Using YUI Fonts
1. Lots for free.2. Reliably set font sizes.
Use Percentages (%)
10px = 77%
11px = 85%
12px = 93%
13px = 100%
14px = 108%
15px = 116%
16px = 123.1%
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%;}
Using YUI Fonts
1. Lots for free.2. Reliably set font sizes.3. Protect user’s ability to zoom their
font sizes.4. Deliver appropriate fonts families
per platform.
Allow User ZoomingYes. Fonts and Grids combine to
preserve user zooming.
Deliver Font Families per OS
Yes. Happens for free.
Fonts TipAvoid using the font: shorthand
because it is parsed inconsistently across browsers.
Using YUI Reset
• Lowest-level piece of YUI CSS• Creates a clean and sturdy
foundation.
What’s it remove?Black text, white page background,
Margin and padding to zero,
Table borders to zero,
No visual list style (ol, ul, dl),
All fonts at 100% of base,
Font-weight and font-style to normal,
You might assume…
…but you’d be wrong.
HTML has no visualization.
Using YUI Base
• Not foundational, but 2 key uses:1. Almost a “snippets” library2. Great for linear HTML content
pages.
YUI CSS SummaryReset – a clean foundation
Fonts – typographical control
Grids – layout and page control
Base – basic helper/snippets lib
More InformationDocumentation
http://developer.yahoo.com/yui
Mailing list
http://groups.yahoo.com/group/ydn-javascript
Bloghttp://yuiblog.com
Nate [email protected]
Thank you.http://nate.koechley.com/talks/yui-css
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/
YUI CSS mirrors CSS’s nature
Additive by nate
GridsGrids
FontsFonts
Reset Reset
HTML CSSJavaScript
HTML CSS
JavaScript
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