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 – [email protected]://dnnbluepri
nt.codeplex.comhttp://orchardblueprint.codeplex.com
Top Related