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.

1. Super Stylesheets DES207

2. Beatriz Oliveira

6. tips / techniques

7. web design + easier

8. Reset CSS Tip #1

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

10. why?

11. browsers have ≠ presentation defaults

12. default look consistent across browsers

13. less fighting browsers CSS

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

15. demo

16. Tableless design Tip #2

17. what is it?

18. HTML tables CSS

19. table = tabular data

20. you win Accessibility Flexibility for designers Bandwidth savings Maintainability

21. wrapper outer footer

22. logo navaux navbar breadcrumb date Content Area

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

24. demo

25. Grids Tip #3

26. what are grids?

27. unitscolumns

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

35. http://960.gs/960 GRID SYSTEM

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

39. demo

40. Universal container Tip #4

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

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

46. demo

47. Always-on-bottom footer Tip #5

49. demo

50. CSS Sprites Tip #6

51. what are sprites?

53. where are used?

57. you win less files localized changes maintainability lessserver requests betterperformance

58. where does it fail?

59. http://spriteme.org/

60. http://csssprites.com

62. use blueprints Tip #7

63. what are blueprints?

65. framework CSS

66. reduce development time

67. facilitate testing

69. http://blueprintcss.orgjoshuaclayton

70. http://dnnblueprint.codeplex.com

71. http://orchardblueprint.codeplex.com

72. features Reset CSS TablelessHTML Grids Typography HTML version Print CSS*

73. demo

74. 7 Tips Reset CSS Tableless design Grids Universal container Always-on-bottom footer CSS Sprites Use blueprints

75. Contacts www.bind.pt Twitter – bindskins beatrizoliveira@bind.pt http://dnnblueprint.codeplex.com http://orchardblueprint.codeplex.com