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

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

3. Basic CSS terminology
★ div – html element
Essential building block of your
layout.
★ id – selector
One unique per page. Like your driver’s license.
#header, <div id=”header”></div>
★ class –selector
Up to many per page.
.caption, <span class=”caption”></span>
http://flickr.com/photos/randomlyhumming/247604167/

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

5. 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;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;}

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

7. fonts.css
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;}
★ handles uneven font-scaling
★ sets standard line-height across browsers

8. Using YUI CSS
★ Download the latest build and use from your
~/css directory
★ Or link to files served from Yahoo! servers:
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;http://
yui.yahooapis.com/2.2.2/build/reset-fonts-grids/reset-
fonts-grids.cssquot; />
★ (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

9. grids.css
woohoo – this is the cool stuff!

10. Build Your Page: doc
page width IDs
*
doc 750px
doc2 950px
doc3 100%
<div id=quot;docquot;>
<div id=quot;hdquot;> Header </div>
<div id=quot;bdquot;> Body </div>
<div id=quot;ftquot;> Footer </div>
</div> * border colors have been applied for clarity

11. Build Your Page: template
<div id=quot;docquot; class=quot;yui-t1quot;> template classes
<div id=quot;hdquot;> Header </div>
.yui-t1 160px on left
<div id=quot;bdquot;>
<div id=quot;yui-mainquot;> .yui-t2 180px on left
<div class=quot;yui-bquot;> Main </div>
.yui-t3 300px on left
</div>
.yui-t4 180px on right
<div class=quot;yui-bquot;> Side </div>
</div> .yui-t5 240px on right
<div id=quot;ftquot;> Footer </div>
.yui-t6 300px on right
</div>
One full-width
.yui-t7
column
(“yui-b” = “yui block”)

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

13. Build Your Page: grids
★ Instant two- to four-column sections
★ Safe nesting
★ Source order independent
<div class=quot;yui-gquot;>
<div class=quot;yui-u firstquot;></div>
<div class=quot;yui-uquot;></div>
</div>

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

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

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

17. 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.)

18. Use “standards mode”
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
quot;http://www.w3.org/TR/html4/strict.dtdquot;>
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

19. Top 5 FAQ
in under 5 minutes!

20. 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; }

21. Float Your Cares Away
Or, the benefits of using float.
★ Mimic table layouts without the table!
★ Specific per-column do that!) & padding
margins
(Bet your tables can’t
★ Progressive downloading in floated column
layouts.
★ For the skinny, check out Max Design’s
Floatutorial.
http://css.maxdesign.com.au/floatutorial/

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

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

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

25. Inline divs? Block span?
★ All elements display as either block or
by default.
inline
★ 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; <span></span>
font: 10px Ar...
}

26. So, what about tables?
★ Leave tables for large amounts of tabular data.
★ Learn a solid table-replacement CSS
technique.
div.thumbnail {
float: left; <div class=”thumbnail”>!</div>
width: 100px; <div class=”thumbnail”>!</div>
height: 100px; <div class=”thumbnail”>!</div>
margin: 0 20px 20px 0; <div class=”thumbnail”>!</div>
}

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

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