If you cant read this, move closer

Making the hard stuff fun & easy with YUI CSS

Vani Raja vani@webchic.net

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

OSCON 07
r7

YUI CSS: Why It Rocks

A handful of predened 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. minutes, without two Advil.

Customized table-less page layouts in 10

Basic CSS terminology

div html element id selector
Essential building block of your layout. One unique per page. Like your drivers license.
#header, <div id=header></div>

class selector

Up to many per page.

.caption, <span class=caption></span>

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

The Files
reset.css normalizes margins, padding, etc. fonts.css sets font baseline & even scaling grids.css denes classes for preset height
and widths of div html elements

reset.css
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h 6,pre,form,fieldset,input,textarea,p,blockq uote,th,td {margin:0;padding:0;} table {border-collapse:collapse;borderspacing: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 {textalign: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: 0 border: 0

fieldset,img,abbr

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,field set,input,textarea,p,blockquote,th,td

fonts.css
body {font:13px arial,helvetica,clean,sansserif;*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;}

handles uneven font-scaling sets standard line-height across browsers

Using YUI CSS

Download the latest build and use from your
~/css directory

Or link to les served from Yahoo! servers: (a combined le; minimized and
compressed served by Yahoo)

<link rel="stylesheet" type="text/css" href="http:// yui.yahooapis.com/2.2.2/build/reset-fonts-grids/resetfonts-grids.css" />

First, include YUI css les. Explicitly set h1, h2, p, etc. in your own
Either download, or serve from Yahoo

master.css

grids.css
woohoo this is the cool stuff!

Build Your Page: doc

page width IDs doc doc2 doc3 750px 950px 100%

<div id="doc"> <div id="hd"> Header </div> <div id="bd"> Body </div> <div id="ft"> Footer </div> * border colors have been applied for clarity </div>

Build Your Page: template

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

template classes .yui-t1 .yui-t2 .yui-t3 .yui-t4 .yui-t5 .yui-t6 .yui-t7 160px on left 180px on left 300px on left 180px on right 240px on right 300px on right One full-width column

(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 Sheets

Abstract and re-use!

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

Cascade for Simple Folk

Last style applied takes
effect!

Doesnt matter if in
single/multiple les.

Set all colors in one

le, fonts in another le, etc.

The Cascade
<link rel=stylesheet src=master.css ...> <link rel=stylesheet src=winter.css ...>

Use to override previous

styles

Create custom themes for Separation of concerns:

layout.css vs. winter.css

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

users, seasons, accessibility

A Sense of Style
Use semantic names as much as
possible
#logo, .tagline, .thumbnail, #profile_gallery

Keep the non-semantic names

.black_line, #left_whitespace

to a bare minimum if used at all

Indentation & comments. (Can

be stripped later.)

Use standards mode

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

Trigger a more consistent Accessibility-friendly Dont be MySpace

HTML interpretation across browsers

Top 5 FAQ
in under 5 minutes!

How do oats work?

img.thumbnail { float: left; }

Dont align - oat! Like a rock in a stream, other elements

FLOAT around it.

To make the next element CLEAR the

bottom of your oated item, clear it.
div#gallery { clear: left; }

Float Your Cares Away

Or, the benets of using oat.

Mimic table layouts without the table! margins Specic per-column do that!) & padding (Bet your tables cant Progressive downloading in oated column
layouts.

For the skinny, check out Max Designs

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

What about positioning?

position: absolute;

Where does this element go in relation to its PARENT?

div#absolute { /* parent is body */ position: absolute; top: 40px; left: 40px; }

Removed from regular document ow.

More positioning...
position: relative;

Where does this element go in relation to its MARKUP?

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

Previous place held occupied!

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 theres 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 <div <div <div class=thumbnail>!</div> class=thumbnail>!</div> class=thumbnail>!</div> class=thumbnail>!</div>

Stuff Id Recommend :-)

YUI CSS Cheatsheet! TextMate, Transmit, CSSEdit, Coda, Free Ruler,
http://yuiblog.com/assets/pdf/cheatsheets/css.pdf

DigitalColor Meter (OS X)

CSSViewer, Firebug (Firefox), Opera 9/Mini Dolor Sit Amet (OSX/Dashboard) Web Developers Handbook
http://www.alvit.de/handbook/

Thank you!

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

Yahoo Grids
http://developer.yahoo.com/yui/grids/

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

More questions? Need help? vani@webchic.net