Super stylesheets download_en

Super Stylesheets

Beatriz Oliveira

tips
techniques

web design + easier

Reset CSS
Tip #1

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

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; }

Tableless design
Tip #2

what is it?

HTML tables
HTML tables
CSS

table = tabular data

advantages
Accessibility
Flexibility for designers
Bandwidth savings
Maintainability

wrapper
outer
footer

logo
navaux
navbar
breadcrumb
date
Content Area

Grids
Tip #3

what are grids?

unitscolumns

http://developer.yahoo.com/yui/gridsYUI GRIDS

http://960.gs/960 GRID SYSTEM

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

Universal container
Tip #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>

Always-on-bottom footer
Tip #5

CSS Sprites
Tip #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 blueprints
Tip #7

what are blueprints?

CSS framework

reduce dev time

facilitate testing

http://blueprintcss.orgjoshuaclayton

http://dnnblueprint.codeplex.com

features
Reset CSS
HTML base structure
Grids
Typographic base
HTML version
Print CSS*

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.com

questions?

Super stylesheets download_en

by mbeatrizoliveira on Nov 25, 2010

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Super stylesheets download_en — Presentation Transcript