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

2. CSS3: Not Magic Pixie Dust

3. CSS3: Not Magic Pixie Dust
SourceForge.net: A Case Study

4. Remember:

5. Big
Time Savers

6. Sleek
& Fast

7. Happy
Sexy

8. Some History

9. Redesign #1
Better downloading

11. Redesign #2
Better looking downloading

13. CSS3
Time to rock and roll!

15. Compass Extensions
A Crash Course

18. git pull

19. git pull
SFX: PHP

20. git pull
SFX: PHP SF.py: Python

21. git pull
SFX: PHP SF.py: Python
Allura: Python

22. Fast Forward
Hello, CSS3

23. Old New

24. Images

25. Images
24
9
Old New

26. Requests

27. Requests
33
16
Old New

28. Total Weight

29. Total Weight
668K 564K
Old New

31. CSS

32. CSS
115K
77K
Old New

33. Problem:
CSS Bloat

34. Replacing Images
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
background-image: linear-gradient(top,
#ffffff 0%, #cccccc 100%);

35. 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%);

36. Inefficient SASS

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

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

39. Mixins rock…

40. …except when they don’t.

41. @mixin razzledazzle {
@include border-radius(4px);
@include box-shadow(black, 0, 1px, 5px);
@include linear-gradient(…);
}
#header {
@include razzledazzle;
…
}
#footer {
@include razzledazzle;
…
}

42. #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;
…

43. .razzledazzle {
@include border-radius(4px);
@include box-shadow(black, 0, 1px, 5px);
@include linear-gradient(…);
}
#header {
@extend .razzledazzle;
…
}
#footer {
@extend .razzledazzle;
…
}

44. #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 {
…
}

45. Keep an eye on your CSS.
Vendor prefixes and mixins don’t, er… mix.

46. ?

47. Remember:

48. Big
Time Savers

49. Sleek
& Fast

50. Happy
Sexy

52. Not Magic
Not
pixie dust

53. Work Smart
Have Fun