Presentation on some tips / techniques to improve CSS and website development.

1. Super Stylesheets

2. Beatriz Oliveira

10. tipstechniques

11. web design + easier

12. Reset CSS
Tip #1

13. http://meyerweb.com/eric/thought
s/2007/05/01/reset-reloaded/

14. why?

15. browsers have ≠
presentation defaults

16. default look consistent
across browsers

17. less fighting browsers
CSS

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

19. demo

20. Tableless design
Tip #2

21. what is it?

22. HTML tablesHTML tablesCSS

23. table = tabular data

24. advantages • Accessibility
• Flexibility for
designers
• Bandwidth savings
• Maintainability

25. wrapper
footer
outer

26. logo
navaux
navbar
breadcrumb date
Content Area

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

28. demo

29. Grids
Tip #3

30. what are grids?

33. units
columns

41. http://developer.yahoo.com/yui/grids
YUI GRIDS

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

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

47. demo

48. Universal container
Tip #4

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

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

54. demo

55. Always-on-bottom footer
Tip #5

57. demo

58. CSS Sprites
Tip #6

59. what are sprites?

61. where are they used?

65. advantages • less files
• contained changes
• maintainability
• less server requests
• better performance

66. where does it fail?

67. http://spriteme.org/

68. http://csssprites.com

70. use blueprints
Tip #7

71. what are blueprints?

73. CSS framework

74. reduce dev time

75. facilitate testing

77. http://blueprintcss.org
joshua clayton

78. http://dnnblueprint.codeplex.com

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

80. demo

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

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

83. questions?