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

No notes for slide

Yuicss R7

  1. 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. 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. 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. 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. 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. 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. 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. 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. 9. grids.css woohoo – this is the cool stuff!
  10. 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. 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. 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. 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. 14. Cascading Style Sheets Abstract and re-use! http://flickr.com/photos/cayusa/477619516/
  15. 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. 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. 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. 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. 19. Top 5 FAQ in under 5 minutes!
  20. 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. 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. 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. 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. 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. 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. 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. 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. 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