Making the hard stufffun & easy with YUI CSS

Vani Rajavani@webchic.net

http://webchic.net/talks/yui/

OSCON ’07

If you can’t read this, move closer

r7

YUI CSS: Why It Rocks★ A handful of predefined styles that will rock

your world.

★Over 750 page layout possibilities in under 3 minutes – minimal html changes!

★ A-Grade browser support (supported and tested by Yahoo)

★Normalize all HTML elements to ensure similar display across browsers.

★ Customized table-less page layouts in 10 minutes, without two Advil.

Basic CSS terminology

★ div – html elementEssential building block of your layout.

★ id – selectorOne unique per page. Like your driver’s license.#header, <div id=”header”></div>

★ class –selectorUp to many per page. .caption, <span class=”caption”></span>

http://flickr.com/photos/randomlyhumming/247604167/

The Files

★reset.cssnormalizes margins, padding, etc.

★fonts.csssets font baseline & even scaling

★grids.cssdefines classes for preset height and widths of div html elements

reset.cssbody,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}table {border-collapse:collapse;border-spacing:0;}fieldset,img {border:0;}address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}q:before,q:after {content:'';}abbr,acronym {border:0;}

what reset does

★ starts with everything normalized, zeroed and borderless

★margin & padding: 0body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td

★ border: 0fieldset,img,abbr

fonts.css

★ handles uneven font-scaling

★ sets standard line-height across browsers

body {font:13px arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}select, input, textarea {font:99% arial,helvetica,clean,sans-serif;}pre, code {font:115% monospace;*font-size:100%;}body * {line-height:1.22em;}

Using YUI CSS★ Download the latest build and use from your

~/css directory

★Or link to files served from Yahoo! servers:<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/reset-fonts-grids/reset-fonts-grids.css" />

★ (a combined file; minimized and compressed served by Yahoo)

★ First, include YUI css files.Either download, or serve from Yahoo

★ Explicitly set h1, h2, p, etc. in your own master.css

grids.csswoohoo – this is the cool stuff!

Build Your Page: docpage width IDs

doc 750px

doc2 950px

doc3 100%

<div id="doc"> <div id="hd"> Header </div> <div id="bd"> Body </div> <div id="ft"> Footer </div></div>

*

* border colors have been applied for clarity

Build Your Page: template

template classes

.yui-t1 160px on left

.yui-t2 180px on left

.yui-t3 300px on left

.yui-t4 180px on right

.yui-t5 240px on right

.yui-t6 300px on right

.yui-t7 One full-width column

<div id="doc" class="yui-t1"> <div id="hd"> Header </div> <div id="bd"> <div id="yui-main"> <div class="yui-b"> Main </div> </div> <div class="yui-b"> Side </div> </div> <div id="ft"> Footer </div></div>

(“yui-b” = “yui block”)

Build Your Page:template presets

.yui-t2 - 180px on left

.yui-t3 - 300px on left

.yui-t4 - 180px on right

.yui-t5 - 240px on right

Build Your Page: grids

★ Instant two- to four-column sections

★ Safe nesting

★ Source order independent

<div class="yui-g"> <div class="yui-u first"></div> <div class="yui-u"></div></div>

Cascading Style SheetsAbstract and re-use!

http://flickr.com/photos/cayusa/477619516/

Cascade for Simple Folk

★Last style applied takes effect!

★ Doesn’t matter if in single/multiple files.

★ Can set all colors in one file, fonts in another file, etc.

The Cascade

/* master.css */.tagline {color: #ccc;

}

/* winter.css */.tagline {color: #aaa;

}

<link rel=”stylesheet” src=”master.css” ...><link rel=”stylesheet” src=”winter.css” ...>

★ Use to override previous styles

★ Create custom themes for users, seasons, accessibility

★ Separation of concerns: layout.css vs winter.css

A Sense of Style

★ Use semantic names as much as possible#logo, .tagline, .thumbnail, #profile_gallery

★ Keep the non-semantic names to a bare minimum if used at all.black_line, #left_whitespace

★ Indentation & comments. (Can be stripped later.)

Use “standards mode”

★ Trigger a more consistent HTML interpretation across browsers

★ Accessibility-friendly

★ Don’t be MySpace

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Yeah, so it takes a little more attention to detail, but...

Top 5 FAQin under 5 minutes!

How do floats work?

★ Don’t “align” - float!

★ Like a rock in a stream, other elements FLOAT around it.

★ To make the next element CLEAR the bottom of your floated item, clear it.

img.thumbnail { float: left; }

div#gallery { clear: left; }

Float Your Cares Away

★ Mimic table layouts without the table!

★ Specific per-column margins & padding(Bet your tables can’t do that!)

★ Progressive downloading in floated column layouts.

★ For the skinny, check out Max Design’s Floatutorial.

Or, the benefits of using float.

http://css.maxdesign.com.au/floatutorial/

What about positioning?

★ “Where does this element go in relation to its PARENT?”

★ Removed from regular document flow.

position: absolute;

div#absolute {/* parent is body */

position: absolute;top: 40px;left: 40px;

}

More positioning...

★ “Where does this element go in relation to its MARKUP?”

★ Previous place held occupied!

position: relative;

div#relative_box {position: relative;top: 40px;left: 40px;

}

Mixing relative and absolute positioning

★ To absolutely position something inside an element, set the wrapping element to position: relative.

★ For more on positioning, peek at BarelyFitz Designs’ Learn CSS Positioning in Ten Steps.

Inline divs? Block span?★ All elements display as either block or

inline by default.

★ They can also be forced to do the opposite!

★ Give a span a height and width by adding display: block

★ K.I.S.S. - Ask yourself if there’s a better markup element to use instead!

h1#subheader {display: inline;text-align: left;font: 10px Ar...

}

<span></span>=

So, what about tables?★ Leave tables for large amounts of tabular data.

★ Learn a solid table-replacement CSS technique.

div.thumbnail {float: left;width: 100px;height: 100px;margin: 0 20px 20px 0;

}

<div class=”thumbnail”>!</div><div class=”thumbnail”>!</div><div class=”thumbnail”>!</div><div class=”thumbnail”>!</div>

Thank you!

• Slideshttp://webchic.net/talks/yui/

• Yahoo Gridshttp://developer.yahoo.com/yui/grids/

• See it in action!http://www.yellowbot.comhttp://www.webchic.net

• More questions? Need help?vani@webchic.net