Making the hard stuff fun & easy with YUI CSS

Transcription

1 If you can t read this, move closer Making the hard stuff fun & easy with YUI CSS Vani Raja vani@webchic.net 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 reset.css normalizes margins, padding, etc. fonts.css sets font baseline & even scaling grids.css defines classes for preset height 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;borderspacing: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 {textalign:left;} h1,h2,h3,h4,h5,h6 {font-size:100%;fontweight: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,sansserif;*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="stylesheet" type="text/css" href=" yui.yahooapis.com/2.2.2/build/reset-fonts-grids/resetfonts-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

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="doc"> <div id="hd"> Header </div> <div id="bd"> Body </div> <div id="ft"> Footer </div> </div> * border colors have been applied for clarity

11 Build Your Page: template <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 ).yui-t1.yui-t2.yui-t3.yui-t4.yui-t5.yui-t6.yui-t7 template classes 160px on left 180px on left 300px on left 180px on right 240px on right 300px on right One full-width column

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="yui-g"> <div class="yui-u first"></div> <div class="yui-u"></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. Can 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...> Use to override previous styles Create custom themes for users, seasons, accessibility Separation of concerns: layout.css vs winter.css /* master.css */.tagline { color: #ccc; } /* winter.css */.tagline { color: #aaa; }

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 "-//W3C//DTD HTML 4.01//EN" " 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 margins & padding (Bet your tables can t do that!) 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 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>

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

27 Thank you! Slides Yahoo Grids See it in action! More questions? Need help?