Super Stylesheets

DES207

Beatriz Oliveira

tips / techniques

web design + easier

Tip #1

Reset CSS

http://meyerweb.com/eric/thought s/2007/05/01/reset-reloaded/

why?

browsers have presentation defaults

default look consistent across browsers

less fighting browsers CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;fontsize:100%;font-family:inherit;vertical-align:baseline; } article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; } /* remember to define focus pseudo-class to your styles! */ :focus { outline:0; } body { line-height:1; color:black; background:white; } ol, ul { list-style:none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse:separate; border-spacing:0; } caption, th, td { text-align:left; font-weight:normal; } table, td, th { vertical-align:middle; } blockquote:before, blockquote:after, q:before, q:after { content:""; } /*Do not insert quotation marks around quote*/ blockquote, q { quotes:"" ""; } /*Reset quotes to none*/ a img { border:none; }

demo

Tip #2

Tableless design

what is it?

HTML tables CSS

table = tabular data

you win

Accessibility Flexibility for designers Bandwidth savings Maintainability

outer wrapper
footer

logo
breadcrumb

navaux navbar date

Content Area

<div id="Wrapper"> <div id="Outer"> <div id="Logo"/> <div id="NavAux> <div id="NavBar/> <div id="Breadcrumb/> <div id="Date/> <div id=ContentArea/> </div> <div id="Footer/> </div>

demo

Tip #3

Grids

what are grids?

units columns

http://developer.yahoo.com/yui/grids YUI GRIDS

http://960.gs/ 960 GRID SYSTEM

http://www.spry-soft.com/grids/ grids generator

demo

Tip #4

Universal container

<div class="container"> <div class="C01_Box> <div class="C01_BoxTL"> <div class="C01_BoxTR"> <div class="C01_BoxTM>Title Elements</div> </div> </div> <div class="C01_BoxML"> <div class="C01_BoxMR"> <div class="C01_BoxMM>Content Area Elements</div> </div> </div> <div class="C01_BoxBL"> <div class="C01_BoxBR"> <div class="C01_BoxBM>Footer Elements</div> </div> </div> </div> </div>

<div class="container"> <div class="C01_Box> <div class="C01_BoxTL"> <div class="C01_BoxTR"> <div class="C01_BoxTM>Title Elements</div> </div> </div> <div class="C01_BoxML"> <div class="C01_BoxMR"> <div class="C01_BoxMM>Content Area Elements</div> </div> </div> <div class="C01_BoxBL"> <div class="C01_BoxBR"> <div class="C01_BoxBM>Footer Elements</div> </div> </div> </div> </div>

demo

Tip #5

Always-on-bottom footer

demo

Tip #6

CSS Sprites

what are sprites?

where are used?

you win

less files localized changes maintainability less server requests better performance

where does it fail?

http://spriteme.org/

http://csssprites.com

Tip #7

use blueprints

what are blueprints?

framework CSS

reduce development time

facilitate testing

http://blueprintcss.org joshua clayton

http://dnnblueprint.codeplex.com

http://orchardblueprint.codeplex.co m

features

Reset CSS Tableless HTML Grids Typography HTML version Print CSS*

demo

7 Tips

Reset CSS Tableless design Grids Universal container Always-on-bottom footer CSS Sprites Use blueprints

Contacts

www.bind.pt Twitter bindskins beatrizoliveira@bind.pt http://dnnblueprint.codeplex.com http://orchardblueprint.codeplex.co m