F22€¦ · . USER MANUAL. WiFi Access Control Terminal. F22 : ★ ★ ★ ★ ★ ★
Making the hard stuff fun & easy with YUI CSS · YUI CSS: Why It Rocks ★A handful of predefined...
Transcript of Making the hard stuff fun & easy with YUI CSS · YUI CSS: Why It Rocks ★A handful of predefined...
Making the hard stufffun & easy with YUI CSS
Vani [email protected]
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 [email protected]