nate koechley the yui css foundation
DESCRIPTION
introduce how to use yui cssTRANSCRIPT
Welcome.
Yahoo! User Interface (YUI)
Documentationdeveloper.yahoo.com/yui
Mailing listgroups.yahoo.com/group/ydn-javascript
Blogyuiblog.com
Nate [email protected]
HTML CSSJavaScript
The User Interface
HTML CSSJavaScript
The User Interface
CSS is different.
Property values from anywhere and everywhere mingle and conflate before a final value is calculated.
Powerful but risky.
Enables elegance.But a bit brittle.
CSS is accretive.Rule #1
Computed Style
Rule #2
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%")
The CascadeRule #1
Computed Style
Rule #2
InheritanceParent node
Child node
Rule #1Grandchild
Errors and discrepancies are transferred equally
efficiently.
Goals of YUI CSS• Provide stability• Normalize differences• Solve recurring problems• Centrally manage
complexity
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
href="
http://yui.yahooapis.com/
2.3.1/
build/
reset/reset-min.css"
Including Fonts.css
href=" http://yui.yahooapis.com/
2.3.1/
build/
fonts/fonts-min.css"
Including Grids.css
href=" http://yui.yahooapis.com/
2.3.1/
build/
grids/grids-min.css"
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)
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.
~4kb
A black box system.
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.
Part I: Overall Page Width
750px centered950px centered974px centered100% fluid
(easy to customize, but that should be rare.)
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>
Why a div? Isn’t that "divitis?"
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 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.
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 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.
#doc can hold anything
<body>
<div id="doc">
<div id="hd"></div>
<div id="bd"></div>
<div id="ft"></div>
</div>
</body>
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.
(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.
The size of their parent is irrelevant.
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 templateon the root DIV.
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>
Hidden feature:Source order independence.
Source order IndependenceThe 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 accommodate all IAB ad unit sizes & nearly all Y! pages.
3. Easily create nested multi-column regions.
Nested Grids• Use nested grids when you need
divisions of space beyond templates.
• Nested 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 - doesn’t care)
.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.
Gutters are voids between them.
.yui-g
.yui-u
.first.yui-u
What about
four (2+2)?
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
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
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
Grids are Stackable
.yui-u.first .yui-u .yui-u
.yui-gb
.yui-u.first .yui-um
.yui-gd
Nested Grids
11/3 1/3 1/3
11/3 1/3 1/3
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.
Using YUI Fonts
1. Mostly automatic.2. Reliably set font sizes.3. Other niceties.
For free:Arial (and fallbacks)13px font size16px line height
Using YUI Fonts
1. Mostly automatic.2. Reliably set precise 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. Mostly automatic.2. Reliably set precise font sizes.3. Other niceties.
Allows User Zooming
Yes. Fonts and Grids combine to
preserve user zooming.
Delivers OS-appropriate Fonts
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.
Quiz:
• What is the default visualization of the STRONG element?
• Of the UL LI element?
Answer:HTML has no visualization.
Where does it come from?
• Browsers contains a browser.css file.
• Fine, but they’re all different.• Reset.css removes everything.
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…
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.
Using YUI Base
1. Almost a "snippets" library.2. Gives back what Reset removes.3. Great for linear HTML content
pages.
A page with Grids & Base
YUI CSS SummaryReset – a clean foundationFonts – typographical controlGrids – layout and page control
Base – basic helper/snippets lib
Other YUI CSS Notes1. Calculating EMs2. Customizing Template Presets
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 */
}
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;
}
More InformationDocumentation
http://developer.yahoo.com/yui
Mailing list
http://groups.yahoo.com/group/ydn-javascript
Bloghttp://yuiblog.com
Nate [email protected]
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/