• Like
  • Save
Yuicss R7
Upcoming SlideShare
Loading in...5
×
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,771
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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