CSS3 is Not Magic Pixie Dust

1,076 views
985 views

Published on

A case study of CSS3, how it made SourceForge.net a sleeker, faster site, and the bumps encountered along the way.

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

  • Be the first to like this

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

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • CSS3 is Not Magic Pixie Dust

    1. 1. CSS3: Not Magic Pixie Dust
    2. 2. CSS3: Not Magic Pixie DustSourceForge.net: A Case Study
    3. 3. Remember:
    4. 4. BigTime Savers
    5. 5. Sleek& Fast
    6. 6. HappySexy
    7. 7. Some History
    8. 8. Redesign #1Better downloading
    9. 9. Redesign #2Better looking downloading
    10. 10. CSS3Time to rock and roll!
    11. 11. Compass ExtensionsA Crash Course
    12. 12. git pull
    13. 13. git pullSFX: PHP
    14. 14. git pullSFX: PHP SF.py: Python
    15. 15. git pullSFX: PHP SF.py: Python Allura: Python
    16. 16. Fast ForwardHello, CSS3
    17. 17. Old New
    18. 18. Images
    19. 19. Images 24 9 Old New
    20. 20. Requests
    21. 21. Requests 33 16 Old New
    22. 22. Total Weight
    23. 23. Total Weight668K 564K Old New
    24. 24. CSS
    25. 25. CSS 115K 77K Old New
    26. 26. Problem:CSS Bloat
    27. 27. Replacing Images border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; background-image: linear-gradient(top, #ffffff 0%, #cccccc 100%);
    28. 28. Vendor Prefixes -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -o-border-bottom-left-radius: 4px; -ms-border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -o-border-bottom-right-radius: 4px; -ms-border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #ffffff), color-stop(100%, #cccccc)); background-image: -moz-linear-gradient(top, #ffffff 0%, #cccccc 100%); background-image: linear-gradient(top, #ffffff 0%, #cccccc 100%);
    29. 29. Inefficient SASS
    30. 30. DRY: Mixins@mixin inverse-text { #footer { background-color: black; background-color: black; color: white; color: white;} ... }#footer { @include inverse-text; #header { ... background-color: black;} color: white; ...#header { } @include inverse-text; ...} SASS CSS
    31. 31. DRY: Extends.inverse-text { #footer, #header { background-color: black; background-color: black; color: white; color: white;} }#footer { #header { @extends .inverse-text; ... ... }} #footer {#header { ... @include .inverse-text; } ...} SASS CSS
    32. 32. Mixins rock…
    33. 33. …except when they don’t.
    34. 34. @mixin razzledazzle { @include border-radius(4px); @include box-shadow(black, 0, 1px, 5px); @include linear-gradient(…);}#header { @include razzledazzle; …}#footer { @include razzledazzle; …}
    35. 35. #header { background-image: -webkit-gradient(…); background-image: -moz-linear-gradient(…); background-image: linear-gradient(…); -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 1px 5px black; -webkit-box-shadow: 0 1px 5px black; -o-box-shadow: 0 1px 5px black; box-shadow: 0 1px 5px black; …}#footer { background-image: -webkit-gradient(…); background-image: -moz-linear-gradient(…); background-image: linear-gradient(…); -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 1px 5px black; -webkit-box-shadow: 0 1px 5px black; -o-box-shadow: 0 1px 5px black; box-shadow: 0 1px 5px black; …
    36. 36. .razzledazzle { @include border-radius(4px); @include box-shadow(black, 0, 1px, 5px); @include linear-gradient(…);}#header { @extend .razzledazzle; …}#footer { @extend .razzledazzle; …}
    37. 37. #header, #footer { background-image: -webkit-gradient(…); background-image: -moz-linear-gradient(…); background-image: linear-gradient(…); -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 1px 5px black; -webkit-box-shadow: 0 1px 5px black; -o-box-shadow: 0 1px 5px black; box-shadow: 0 1px 5px black;}#header { …}#footer { …}
    38. 38. Keep an eye on your CSS.Vendor prefixes and mixins don’t, er… mix.
    39. 39. ?
    40. 40. Remember:
    41. 41. BigTime Savers
    42. 42. Sleek& Fast
    43. 43. HappySexy
    44. 44. Not MagicNotpixie dust
    45. 45. Work SmartHave Fun

    ×