YUI Grids slides by Nate Koechley

YUI’s CSS Foundation

Nate Koechley25 Oct 2007, Yahoo!

[email protected]

mailto:[email protected]

Welcome.

Yahoo! User Interface (YUI)

Documentationdeveloper.yahoo.com/yui

Mailing listgroups.yahoo.com/group/ydn-javascript

Blogyuiblog.com

Nate [email protected]

http://developer.yahoo.com/yui

http://groups.yahoo.com/group/ydn-javascript

http://yuiblog.com/


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%")

http://www.w3.org/TR/REC-CSS2/cascade.html#cascade

http://www.w3.org/TR/REC-CSS2/cascade.html#inheritance

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/

http://yui.yahooapis.com/

http://developer.yahoo.com/performance/

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




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."

http://www.w3.org/TR/html4/struct/global.html

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>


<body>

<div id="doc2"></div>

</body>


<body>


</body>

100% fluid document

<body>


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

}


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>


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


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.

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.


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.

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

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>

Now, identify the main block.

identify the main block:

<div id="doc">

<div id="yui-main">


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


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




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>

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>

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

}

Thank [email protected]


More InformationDocumentation


Mailing list


Bloghttp://yuiblog.com

Nate [email protected]




http://yuiblog.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/



http://www.flickr.com/photos/yandi/364125159/

http://www.mnartists.org/work.do?rid=34382

http://www.flickr.com/photos/perfhex/293118214/

http://www.flickr.com/photos/fornal/391746944/

http://www.flickr.com/photos/redsil/490734685/

Business

YUI Grids slides by Nate Koechley