YUI Grids slides by Nate Koechley

YUI’s CSS Foundation Nate Koechley 25 Oct 2007, Yahoo! [email_address]

Yahoo! User Interface (YUI) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

[object Object],CSS JavaScript 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 . ,[object Object],Computed Style Rule #2

Two primary layering models ,[object Object],[object Object],[object Object],[object Object],[object Object]

The Cascade Rule #1 Computed Style Rule #2

Inheritance Parent node Child node Rule #1 Grandchild

Errors and discrepancies are transferred equally efficiently.

Goals of YUI CSS ,[object Object],[object Object],[object Object],[object Object]

YUI CSS Components ,[object Object],[object Object],[object Object],[object Object]

"Base" is an outsider ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object]

Including YUI CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Including Reset.css ,[object Object],[object Object],[object Object],[object Object],[object Object]

Including Fonts.css ,[object Object],[object Object],[object Object],[object Object]

Including Grids.css ,[object Object],[object Object],[object Object],[object Object]

Pre-Concatenated Version ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Using YUI Grids ,[object Object],[object Object],[object Object]

Part I: Overall Page Width ,[object Object],[object Object],[object Object],[object Object],[object Object]

Control the page from the root node.

The root node ,[object Object],[object Object],[object Object]

Why a div ? Isn’t that "divitis?"

What are DIV s for? ,[object Object]

Available ID values ,[object Object],[object Object],[object Object],[object Object]

750px centered document ,[object Object],[object Object],[object Object]

100% fluid document ,[object Object],[object Object],[object Object]

Notes: ,[object Object],[object Object]

Locking the page width ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

#doc can hold anything ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Notes: ,[object Object],[object Object],[object Object]

(A quick aside about Graded Browser Support.)

Graded Browser Support ,[object Object],http://developer.yahoo.com/yui/articles/gbs

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 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 dol or sit amet, con sec te tuer adipisc ing elit. Quisque a urna. Maecenas lo bortis lacinia nibh. 160px Donec rhoncus, purus at vehicula mollis, lacus massa pulvinar nunc, vel semper neque enim quis nulla. Nunc rhoncus tincidunt eros. Nulla euismod, dui id

Template 2: 180px left 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 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 adipiscing elit. Quisque a urna. Maecenas lobortis lacinia nibh. In ac 180px 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

Template 3: 300px left 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 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 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 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 300px Donec rhoncus, purus at lobortis lacinia nibh. In ac 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,

Template 4: 180px right Lorem ipsum dolor sit amet, consect etuer adipiscing elit. Quisque a urna. Maecenas lobortis lacinia nibh. In ac 180px 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 . 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 block 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 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.

Template 5: 240px right 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. 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 block 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 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.

Template 6: 300px right 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. 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 block 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 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.

Two content b locks ,[object Object],[object Object],[object Object],[object Object]

Now, id entify the main block.

id entify the main block : ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Now, choose a t emplate class.

Available Template Classes ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Set the template on the root DIV .

Set the template at the root ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Hidden feature: Source order independence.

Source order Independence ,[object Object],[object Object]

Nested Grids ,[object Object],[object Object]

The basic microformat: ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Each u nit takes up half. (half of anything - doesn’t care) ,[object Object],.yui-u .yui-u

One more step: .first ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Each unit takes up half. Gutters are voids between them. ,[object Object],.yui-u .first .yui-u

What about four (2+2)?

Nest again for four columns ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

What about three columns? What about uneven distributions?

Special Grid Holders ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Uneven columns (for example 1/3—2/3) ,[object Object],[object Object],[object Object],[object Object],.yui-u.first .yui-u .yui-gd

Divide into three ,[object Object],[object Object],[object Object],[object Object],[object Object],.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 1 1/3 1/3 1/3 1 1/3 1/3 1/3

Let’s review: ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Using YUI Fonts ,[object Object],[object Object],[object Object]

For free: ,[object Object],[object Object],[object Object]

Using YUI Fonts ,[object Object],[object Object]

Use Percentages (%) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Don’t use pixels ,[object Object],Always use percentages h1 {font-size:123.1%;} .hd h1 {font-size:77%;}

Allows User Zooming ,[object Object],[object Object],Delivers OS-appropriate Fonts Yes. Happens for free.

Using YUI Reset ,[object Object],[object Object]

Quiz: ,[object Object],[object Object]

Answer: HTML has no visualization.

Where does it come from? ,[object Object],[object Object],[object Object]

What does Reset do? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Using Reset ,[object Object],[object Object],[object Object]

Using YUI Base ,[object Object],[object Object],[object Object]

YUI CSS Summary ,[object Object],[object Object],[object Object],[object Object]

Other YUI CSS Notes ,[object Object],[object Object]

Calculating EMs ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Customizing Templates ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

More Information ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

CC Image Credits ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

YUI Grids slides by Nate Koechley

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (19)

Similar to YUI Grids slides by Nate Koechley

Similar to YUI Grids slides by Nate Koechley (20)

Recently uploaded

Recently uploaded (20)

YUI Grids slides by Nate Koechley