YUI’s CSS Foundation

transcript

Nate Koechley25 Oct 2007, Yahoo!

natek@yahoo-inc.comhttp://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 Koechleynatek@yahoo-inc.com

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

2.3.1/

build/

fonts/fonts-min.css

Including Grids.css

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.

A black box system.

Using YUI Grids

Part I: Overall Page Width

750px centered950px centered974px centered100% fluid

750px, centered

950px, centered

974px, centered

100% fluid

Control the page from the root

The root node

<body>

</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>

</body>

Available ID values

750px centered #doc

950px centered #doc2

974px centered #doc4

100% fluid #doc3

750px centered document

<body>

</body>

<body>

</body>

<body>

</body>

100% fluid document

<body>

</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;

#doc can hold anything

<body>

</div>

</body>

(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

2. Six preset templates accommodate all IAB ad unit sizes and the vast majority of Y! pages.

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.

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

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 .

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.

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

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.

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>

Now, identify the main block.

identify the main block:

</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>

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

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>

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>

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

.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

.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 Koechleynatek@yahoo-inc.com

Thank you.http://nate.koechley.com/talks/yui-css

natek@yahoo-inc.com

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

YUI’s CSS Foundation

Documents