Super Stylesheets

DES207

Beatriz Oliveira

tips / techniques

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 tables CSS

table = tabular data

you win • 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 used?

you win • less files• localized changes•maintainability• less server requests• better performance

where does it fail?

http://spriteme.org/

http://csssprites.com

use blueprintsTip #7

what are blueprints?

framework CSS

reduce development time

facilitate testing

http://blueprintcss.orgjoshua clayton

http://dnnblueprint.codeplex.com

http://orchardblueprint.codeplex.com

features Reset CSSTableless HTMLGridsTypographyHTML 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