Making the hard stuff fun & easy with YUI CSS

If you can’t 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 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 element
Essential building block of your
layout.
★ id – selector
One unique per page. Like your driver’s license.
#header,
★ class –selector
Up to many per page.
.caption,
http://flickr.com/photos/randomlyhumming/247604167/

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

eset.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
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,field
set,input,textarea,p,blockquote,th,td
★ border: 0
fieldset,img,abbr

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 files served from Yahoo! servers:
★ (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.css
woohoo – this is the cool stuff!

page width IDs
doc 750px
doc2 950px
doc3 100%
Build Your Page: doc
Header
Body
Footer
* border colors have been applied for clarity
*

Build Your Page: template
Header
Main
Side
Footer
(“yui-b” = “yui block”)
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

.yui-t2 - 180px on left
.yui-t3 - 300px on left
Build Your Page:
template presets
.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

Cascading Style Sheets
http://flickr.com/photos/cayusa/477619516/
Abstract and re-use!

Cascade for Simple Folk
★Last style applied takes
effect!
★ Doesn’t matter if in
single/multiple files.
★ Set all colors in one
file, fonts in another
file, etc.

The Cascade
★ Use to override previous
styles
★ Create custom themes for
users, seasons, accessibility
★ Separation of concerns:
layout.css vs. winter.css
/* master.css */
.tagline {
color: #ccc;
}
/* winter.css */
.tagline {
color: #aaa;
}

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”
Yeah, so it takes a little more attention to detail, but...
★ Trigger a more consistent
HTML interpretation across
browsers
★ Accessibility-friendly
★ Don’t be MySpace

Top 5 FAQ
in under 5 minutes!

How do floats work?
img.thumbnail { float: left; }
★ 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.
div#gallery { clear: left; }

Float Your Cares Away
Or, the benefits of using float.
★ 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.
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 flow.

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 there’s a better
markup element to use instead!
h1#subheader {
display: inline;
text-align: left;
font: 10px Ar...
}
=

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;
}
!
!
!
!

Stuff I’d Recommend :-)
★ YUI CSS Cheatsheet!
http://yuiblog.com/assets/pdf/cheatsheets/css.pdf
★ TextMate, Transmit, CSSEdit, Coda, Free Ruler,
DigitalColor Meter (OS X)
★ CSSViewer, Firebug (Firefox), Opera 9/Mini
★ Dolor Sit Amet (OSX/Dashboard)
★ Web Developer’s 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