Your SlideShare is downloading. ×
Yuicss R7
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Yuicss R7


Published on

Published in: Technology, Education

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. If you can’t read this, move closer Making the hard stuff fun & easy with YUI CSS Vani Raja 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>
  • 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:// 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!
  • 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;;> 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.
  • 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! ★ 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
  • 28. Thank you! • Slides • Yahoo Grids • See it in action! • More questions? Need help?