super stylesheets download_en
DESCRIPTION
Presentation on some tips / techniques to improve CSS and website development.TRANSCRIPT
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://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?
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 – [email protected]://dnnbluepri
nt.codeplex.comhttp://orchardblueprint.codeplex.com
questions?