Super stylesheets download_en

1,549 views
1,464 views

Published on

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

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

  • Be the first to like this

No Downloads
Views
Total views
1,549
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Apply to an existing web site
  • Use before development.
    Upload images
    Create sprite
  • Super stylesheets download_en

    1. 1. Super Stylesheets
    2. 2. Beatriz Oliveira
    3. 3. tipstechniques
    4. 4. web design + easier
    5. 5. Reset CSS Tip #1
    6. 6. http://meyerweb.com/eric/thought s/2007/05/01/reset-reloaded/
    7. 7. why?
    8. 8. browsers have ≠ presentation defaults
    9. 9. default look consistent across browsers
    10. 10. less fighting browsers CSS
    11. 11. 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; }
    12. 12. demo
    13. 13. Tableless design Tip #2
    14. 14. what is it?
    15. 15. HTML tablesHTML tablesCSS
    16. 16. table = tabular data
    17. 17. advantages • Accessibility • Flexibility for designers • Bandwidth savings • Maintainability
    18. 18. wrapper footer outer
    19. 19. logo navaux navbar breadcrumb date Content Area
    20. 20. <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>
    21. 21. demo
    22. 22. Grids Tip #3
    23. 23. what are grids?
    24. 24. units columns
    25. 25. http://developer.yahoo.com/yui/grids YUI GRIDS
    26. 26. http://960.gs/ 960 GRID SYSTEM
    27. 27. http://www.spry-soft.com/grids/ grids generator
    28. 28. demo
    29. 29. Universal container Tip #4
    30. 30. <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>
    31. 31. <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>
    32. 32. demo
    33. 33. Always-on-bottom footer Tip #5
    34. 34. demo
    35. 35. CSS Sprites Tip #6
    36. 36. what are sprites?
    37. 37. where are they used?
    38. 38. advantages • less files • contained changes • maintainability • less server requests • better performance
    39. 39. where does it fail?
    40. 40. http://spriteme.org/
    41. 41. http://csssprites.com
    42. 42. use blueprints Tip #7
    43. 43. what are blueprints?
    44. 44. CSS framework
    45. 45. reduce dev time
    46. 46. facilitate testing
    47. 47. http://blueprintcss.org joshua clayton
    48. 48. http://dnnblueprint.codeplex.com
    49. 49. features Reset CSS HTML base structure Grids Typographic base HTML version Print CSS*
    50. 50. demo
    51. 51. 7 Tips Reset CSS Tableless design Grids Universal container Always-on-bottom footer CSS Sprites Use blueprints
    52. 52. Contacts www.bind.pt Twitter – bindskins beatrizoliveira@bind.pt http://dnnblueprint.codeplex.com http://orchardblueprint.codeplex.co m
    53. 53. questions?

    ×