Super Stylesheets

Beatriz Oliveira

tipstechniques

web design + easier

Reset CSSTip #1

http://meyerweb.com/eric/thoughts/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;font-size: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

Tableless designTip #2

what is it?

HTML tablesHTML tablesCSS

table = tabular data

advantages

• Accessibility• Flexibility for designers• Bandwidth savings• Maintainability

wrapper

footer

outer

logonavaux

navbarbreadcrumb 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

GridsTip #3

what are grids?

unitscolumns

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

YUI GRIDS

http://960.gs/ 960 GRID SYSTEM

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

grids generator

demo

Universal containerTip #4

<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

Always-on-bottom footer

Tip #5

demo

CSS SpritesTip #6

what are sprites?

where are they used?

advantages

• less files• contained changes•maintainability• less server requests• better performance

where does it fail?

http://spriteme.org/

http://csssprites.com

use blueprintsTip #7

what are blueprints?

CSS framework

reduce dev time

facilitate testing

http://blueprintcss.orgjoshua clayton

http://dnnblueprint.codeplex.com

features Reset CSSHTML base structure

GridsTypographic baseHTML versionPrint CSS*

demo

7 Tips Reset CSSTableless designGridsUniversal containerAlways-on-bottom

footerCSS SpritesUse blueprints

Contacts

www.bind.ptTwitter – bindskinsbeatrizoliveira@bind.pthttp://dnnbluepri

nt.codeplex.comhttp://orchardblueprint.codeplex.com

questions?