Super Stylesheets<br />DES207<br />
Beatriz Oliveira<br />
tips / techniques<br />
web design + easier<br />
Reset CSS<br />Tip #1<br />
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/<br />
why?<br />
browsers have ≠ presentation defaults<br />
default look consistent across browsers<br />
less fighting browsers CSS<br />
html, body, div, span, applet, object, iframe,<br />h1, h2, h3, h4, h5, h6, p, blockquote, pre,<br />a, abbr, acronym, add...
demo<br />
Tableless design<br />Tip #2<br />
what is it?<br />
HTML tables<br />CSS<br />
table = tabular data<br />
you win<br />Accessibility<br />Flexibility for designers<br />Bandwidth savings<br />Maintainability<br />
wrapper<br />outer<br />footer<br />
logo<br />navaux<br />navbar<br />breadcrumb<br />date<br />Content Area<br />
<div id="Wrapper"><br /><div id="Outer"><br />	<div id="Logo"/><br />	<div id="NavAux”><br />	<div id="NavBar”/><br />	<di...
demo<br />
Grids<br />Tip #3<br />
what are grids?<br />
unitscolumns<br />
http://developer.yahoo.com/yui/gridsYUI GRIDS <br />
http://960.gs/960 GRID SYSTEM<br />
http://www.spry-soft.com/grids/grids generator <br />
demo<br />
Universal container<br />Tip #4<br />
<div class="container"><br />	<div class="C01_Box”><br />		<div class="C01_BoxTL"><br />			<div class="C01_BoxTR"><br />		...
<div class="container"><br />	<div class="C01_Box”><br />		<div class="C01_BoxTL"><br />			<div class="C01_BoxTR"><br />		...
demo<br />
Always-on-bottom footer<br />Tip #5<br />
demo<br />
CSS Sprites<br />Tip #6<br />
what are sprites?<br />
where are used?<br />
you win<br />less files<br />localized changes<br />maintainability<br />lessserver requests<br />betterperformance<br />
where does it fail?<br />
http://spriteme.org/<br />
http://csssprites.com<br />
use blueprints<br />Tip #7<br />
what are blueprints? <br />
framework CSS<br />
reduce development time<br />
facilitate testing<br />
http://blueprintcss.orgjoshuaclayton<br />
http://dnnblueprint.codeplex.com<br />
http://orchardblueprint.codeplex.com<br />
features<br />Reset CSS<br />TablelessHTML<br />Grids<br />Typography<br />HTML version<br />Print CSS*<br />
demo<br />
7 Tips<br />Reset CSS<br />Tableless design<br />Grids<br />Universal container<br />Always-on-bottom footer<br />CSS Spri...
Contacts<br />www.bind.pt<br />Twitter – bindskins<br />beatrizoliveira@bind.pt<br />http://dnnblueprint.codeplex.com<br /...
Super Stylesheets
Upcoming SlideShare
Loading in …5
×

Super Stylesheets

3,330 views

Published on

This presentation supported a one-hour presentation by Beatriz Oliveira at Microsft TechDays 2010 at Lisbon, about 7 great tips for a better CSS development.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,330
On SlideShare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
75
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Super Stylesheets

  1. 1. Super Stylesheets<br />DES207<br />
  2. 2. Beatriz Oliveira<br />
  3. 3.
  4. 4.
  5. 5.
  6. 6. tips / techniques<br />
  7. 7. web design + easier<br />
  8. 8. Reset CSS<br />Tip #1<br />
  9. 9. http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/<br />
  10. 10. why?<br />
  11. 11. browsers have ≠ presentation defaults<br />
  12. 12. default look consistent across browsers<br />
  13. 13. less fighting browsers CSS<br />
  14. 14. html, body, div, span, applet, object, iframe,<br />h1, h2, h3, h4, h5, h6, p, blockquote, pre,<br />a, abbr, acronym, address, big, cite, code,<br />del, dfn, em, font, img, ins, kbd, q, s, samp,<br />small, strike, strong, sub, sup, tt, var,<br />dl, dt, dd, ol, ul, li, fieldset, form, label, legend,<br />table, caption, tbody, tfoot, thead, tr, th, td,<br />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; }<br />article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; }<br />/* remember to define focus pseudo-class to your styles! */<br />:focus { outline:0; }<br />body { line-height:1; color:black; background:white; }<br />ol, ul { list-style:none; }<br />/* tables still need 'cellspacing="0"' in the markup */<br />table { border-collapse:separate; border-spacing:0; }<br />caption, th, td { text-align:left; font-weight:normal; }<br />table, td, th { vertical-align:middle; }<br />blockquote:before, blockquote:after,<br />q:before, q:after { content:""; } /*Do not insert quotation marks around quote*/<br />blockquote, q { quotes:"" ""; } /*Reset quotes to none*/<br />a img { border:none; }<br />
  15. 15. demo<br />
  16. 16. Tableless design<br />Tip #2<br />
  17. 17. what is it?<br />
  18. 18. HTML tables<br />CSS<br />
  19. 19. table = tabular data<br />
  20. 20. you win<br />Accessibility<br />Flexibility for designers<br />Bandwidth savings<br />Maintainability<br />
  21. 21. wrapper<br />outer<br />footer<br />
  22. 22. logo<br />navaux<br />navbar<br />breadcrumb<br />date<br />Content Area<br />
  23. 23. <div id="Wrapper"><br /><div id="Outer"><br /> <div id="Logo"/><br /> <div id="NavAux”><br /> <div id="NavBar”/><br /> <div id="Breadcrumb”/><br /> <div id="Date”/><br /> <div id=”ContentArea”/><br /></div><br /><div id="Footer”/><br /></div><br />
  24. 24. demo<br />
  25. 25. Grids<br />Tip #3<br />
  26. 26. what are grids?<br />
  27. 27. unitscolumns<br />
  28. 28.
  29. 29.
  30. 30.
  31. 31.
  32. 32.
  33. 33. http://developer.yahoo.com/yui/gridsYUI GRIDS <br />
  34. 34.
  35. 35. http://960.gs/960 GRID SYSTEM<br />
  36. 36.
  37. 37. http://www.spry-soft.com/grids/grids generator <br />
  38. 38.
  39. 39. demo<br />
  40. 40. Universal container<br />Tip #4<br />
  41. 41.
  42. 42.
  43. 43.
  44. 44. <div class="container"><br /> <div class="C01_Box”><br /> <div class="C01_BoxTL"><br /> <div class="C01_BoxTR"><br /> <div class="C01_BoxTM”>Title Elements</div><br /> </div><br /> </div><br /> <div class="C01_BoxML"><br /> <div class="C01_BoxMR"><br /> <div class="C01_BoxMM”>Content Area Elements</div><br /> </div><br /> </div><br /> <div class="C01_BoxBL"><br /> <div class="C01_BoxBR"><br /> <div class="C01_BoxBM”>Footer Elements</div><br /> </div><br /> </div><br /> </div><br /></div><br />
  45. 45. <div class="container"><br /> <div class="C01_Box”><br /> <div class="C01_BoxTL"><br /> <div class="C01_BoxTR"><br /> <div class="C01_BoxTM”>Title Elements</div><br /> </div><br /> </div><br /> <div class="C01_BoxML"><br /> <div class="C01_BoxMR"><br /> <div class="C01_BoxMM”>Content Area Elements</div><br /> </div><br /> </div><br /> <div class="C01_BoxBL"><br /> <div class="C01_BoxBR"><br /> <div class="C01_BoxBM”>Footer Elements</div><br /> </div><br /> </div><br /> </div><br /></div><br />
  46. 46. demo<br />
  47. 47. Always-on-bottom footer<br />Tip #5<br />
  48. 48.
  49. 49. demo<br />
  50. 50. CSS Sprites<br />Tip #6<br />
  51. 51. what are sprites?<br />
  52. 52.
  53. 53. where are used?<br />
  54. 54.
  55. 55.
  56. 56.
  57. 57. you win<br />less files<br />localized changes<br />maintainability<br />lessserver requests<br />betterperformance<br />
  58. 58. where does it fail?<br />
  59. 59. http://spriteme.org/<br />
  60. 60. http://csssprites.com<br />
  61. 61.
  62. 62. use blueprints<br />Tip #7<br />
  63. 63. what are blueprints? <br />
  64. 64.
  65. 65. framework CSS<br />
  66. 66. reduce development time<br />
  67. 67. facilitate testing<br />
  68. 68.
  69. 69. http://blueprintcss.orgjoshuaclayton<br />
  70. 70. http://dnnblueprint.codeplex.com<br />
  71. 71. http://orchardblueprint.codeplex.com<br />
  72. 72. features<br />Reset CSS<br />TablelessHTML<br />Grids<br />Typography<br />HTML version<br />Print CSS*<br />
  73. 73. demo<br />
  74. 74. 7 Tips<br />Reset CSS<br />Tableless design<br />Grids<br />Universal container<br />Always-on-bottom footer<br />CSS Sprites<br />Use blueprints<br />
  75. 75. Contacts<br />www.bind.pt<br />Twitter – bindskins<br />beatrizoliveira@bind.pt<br />http://dnnblueprint.codeplex.com<br />http://orchardblueprint.codeplex.com<br />

×