Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS3 is Not Magic Pixie Dust

0 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
  • Be the first to comment

  • Be the first to like this

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

×