Yuicss R7

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 predeﬁned 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, <div id=”header”></div> ★ class –selector Up to many per page. .caption, <span class=”caption”></span> http://flickr.com/photos/randomlyhumming/247604167/

The Files ★normalizes margins, padding, etc. reset.css ★sets font baseline & even scaling fonts.css ★deﬁnes classes for preset height grids.css 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;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: 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,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

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

grids.css woohoo – this is the cool stuff!

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

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

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=quot;yui-gquot;> <div class=quot;yui-u firstquot;></div> <div class=quot;yui-uquot;></div> </div>

Cascading Style Sheets Abstract 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. ★ Set all colors in one file, fonts in another file, etc.

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 }

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

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

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

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

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

Yuicss R7

by oscon2007

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Yuicss R7 Presentation Transcript

Yuicss R7

by oscon2007

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Yuicss R7 Presentation Transcript

Let LinkedIn power your SlideShare experience

Let LinkedIn power your SlideShare experience

Customize SlideShare content based on your interests

Keep up to date when your LinkedIn contacts post on SlideShare