Sweet and Sassy Responsive Design - Distill 2014

Most devs I know have a love/hate relationship with responsive design. We agree it's important. We agree it's hard. But it doesn't have to be. Using the power of Sass mixins, I'll show you how to declare base, media queries and browser specific styles in one place, making for less code and fewer worries.

Transcript

1. y
   sweet &
   RESPONSIVE DESIGN
   

   View Slide

2. @minamarkham
   

   View Slide

3. View Slide

4. View Slide

5. not SASS
   

   View Slide

6. Ingredients
   

   View Slide

7. Flexible Grids
   Flexible Media
   Media Queries
   

   View Slide

8. “WHY SHOULD
   I CARE?”
   

   View Slide

9. Presentational
   Classes
   

   View Slide

10. Media Queries
    

    View Slide

11. Conditional
    Classes
    

    View Slide

12. View Slide

13. @mixins
    

    View Slide

14. View Slide

15. Friendly
    

    View Slide

16. Mobile First
    

    View Slide

17. $ gem install foundation
    

    View Slide

18. Flexible Grids
    

    View Slide

19. 
    

    View Slide

20. @include grid-column(2);
    

    View Slide

21. .hero-unit { @include grid-column(2); }
    .promo-unit { @include grid-column(4); }
    

    View Slide

22. 
    
    

    View Slide

23. Flexible Media
    

    View Slide

24. max-width: 100%
    

    View Slide

25. src="small.jpg" />
    

    View Slide

26. Interchange
    

    View Slide

27. 
    

    View Slide

28. 
    
    
    

    View Slide

29. Media Queries
    

    View Slide

30. @media
    

    View Slide

31. Every time you see 320px, 480px,
    768px, 1024px used as breakpoint
    values, a kitten gets its head bitten off
    by an angel…or something like that.
    – Brad Frost
    

    View Slide

32. device-in
    

    View Slide

33. content-out
    

    View Slide

34. Start with the small screen first,
    then expand until it looks like shit.
    Time for a breakpoint!
    – Stephen Hay
    

    View Slide

35. View Slide

36. @mixin mq($breakpoint, $query:
    'min-width', $type: 'screen') {…}
    

    View Slide

37. @if $no-mqs {
    @if $no-mqs >= $breakpoint
    { @content; }}
    

    View Slide

38. @else {
    @media #{$type} and (#{$query}:
    #{$breakpoint}) { @content; } }
    

    View Slide

39. $small: 20em;
    $medium: 48em;
    $large: 90em;
    

    View Slide

40. @include mq($large) {…}
    

    View Slide

41. usage
    

    View Slide

42. .hero-unit {
    @include mq($small) {font-size: 1.2em;}
    @include mq($large) {font-size: 1.5em;}
    @include mq(30em) {font-size: 2em;} }
    .promo-unit {
    @include mq($small) {font-size: 1.5em;}
    @include mq($large) {font-size: 2em;}}
    

    View Slide

43. @media and screen and (min-width: 20em) {
    .hero-unit {font-size: 2em;}}
    !
    @media and screen and (min-width: 20em) {
    .promo-unit {font-size: 1.5em;}}
    

    View Slide

44. @media and screen and (min-width: 20em) {
    .hero-unit {font-size: 2em;}}
    !
    @media and screen and (min-width: 20em) {
    .promo-unit {font-size: 1.5em;}}
    

    View Slide

45. “BUT… WHAT ABOUT
    CODE BLOAT?”
    

    View Slide

46. …we hashed out whether there were
    performance implications of combining
    vs scattering Media Queries and came
    to the conclusion that the difference,
    while ugly, is minimal at worst,
    essentially non-existent at best.
    – Sam Richard
    

    View Slide

47. But…
    

    View Slide

48. Sass::MediaQueryCombiner
    

    View Slide

49. .hero-unit {
    @include mq(20em) {font-size: 2em;}
    @include mq(30em) {font-size: 2.5em;}}
    .promo-unit {
    @include mq(20em) {font-size: 1.5em;}
    @include mq(50em) {font-size: 2em;}}
    

    View Slide

50. @media and screen and (min-width: 20em) {
    .hero-unit {font-size: 2em;}
    .promo-unit {font-size: 1.5em;}}
    

    View Slide

51. $ gem install
    sass-media_query_combiner
    

    View Slide

52. The Catch
    

    View Slide

53. Ruby 1.9.2
    Untested on large-scale
    Rearranges CSS
    

    View Slide

54. If your CSS doesn’t look like
    this, you’re doing it wrong.
    

    View Slide

55. “But… What about IE?”
    

    View Slide

56. This is why we can’t have nice things
    

    View Slide

57. $no-mqs: false default!
    $old-ie: false default!
    

    View Slide

58. @mixin old-ie {
    @if $old-ie { @content; }}
    

    View Slide

59. $no-mqs: 48em
    $old-ie: true
    

    View Slide

60. .foobar {
    @include old-ie { ... } }
    

    View Slide

61. Baking it Up
    

    View Slide

62. .promo-unit {
    @include grid-column(4);
    @include mq(20em) {font-size: 2em;}
    @include mq(30em) {font-size: 2.5em;}
    font-size: 1.3em;
    margin-top: 1em;
    float: left;}
    

    View Slide

63. Quick Demo
    

    View Slide

64. Recap
    

    View Slide

65. Mixins FTW!
    Dynamic Content
    Modularize Styles
    

    View Slide

66. Resources
    

    View Slide

67. sass-lang.com
    

    View Slide

68. foundation.zurb.com
    

    View Slide

69. susy.oddbird.net/
    

    View Slide

70. neat.bourbon.io/
    

    View Slide

71. thesassway.com
    

    View Slide

72. sassmeister.com
    

    View Slide

73. View Slide

74. thanks!
    mina.so/sassy-rwd
    @minamarkham
    

    View Slide

75. 7 Habits of Highly Effective Media Queries
    http://bradfrostweb.com/blog/post/7-­‐habits-­‐of-­‐highly-­‐effective-­‐media-­‐queries/  
    Responsive Web Design in Sass: Using Media Queries in Sass 3.2 http://thesassway.com/
    intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32
    Yes, you really can make complex webapps responsive
    http://adioso.com/blog/2013/06/responsifying-adioso/
    Sass & Media Queries | http://sasscast.tumblr.com/post/38673939456/sass-and-media-queries
    Sass Style Guide | http://css-tricks.com/sass-style-guide/
    Sass Globbing | https://github.com/chriseppstein/sass-globbing
    Sass Media Query Combiner |https://github.com/aaronjensen/sass-­‐media_query_combiner
    Media Query Test | http://aaronjensen.github.io/media_query_test/
    Media Query Mixin | https://gist.github.com/Snugug/2490750
    credits & such
    

    View Slide

76. View Slide

77. View Slide

78. View Slide

79. View Slide

80. View Slide

81. View Slide

82. Namespacing
    

    View Slide

83. the almighty ampersand
    

    View Slide

84. .btn {
    &:hover {…}
    }
    

    View Slide

85. .btn:hover {…}
    

    View Slide

86. .btn {
    form & {…}
    }
    

    View Slide

87. form .btn {…}
    

    View Slide

88. &- or &_
    

    View Slide

89. .btn {
    &-secondary {…}
    &_secondary {…}
    }
    .btn
    

    View Slide

90. .btn-secondary {…}
    .btn_secondary {…}
    

    View Slide

91. nesting
    

    View Slide

92. inception rule
    

    View Slide

93. < 3 levels deep
    

    View Slide

94. .btn {
    &-secondary {
    &-icon {…}
    }
    }
    secondary
    .btn
    

    View Slide

95. .btn-secondary {…}
    .btn-secondary-icon {…}
    

    View Slide

96. @media
    

    View Slide

97. @mixin mq($breakpoint, $query:
    'min-width', $type: 'screen') {…}
    

    View Slide

98. .promo-title {
    @include mq(20em) {font-size: 2em;}
    @include mq(30em) {font-size: 2.5em;}
    @include mq(50em) {font-size: 3em;}
    font-size: 1.3em;
    margin-top: 1em;
    float: left;
    }
    

    View Slide

99. .btn {…}
    .btn-large {…}
    !
    
    

    View Slide

100. @extend
     all the things!
     

     View Slide

101. .btn {…}
     .btn-large {@extend .btn;}
     !
     
     

     View Slide

102. %btn {…}
     .btn-large {@extend %btn;}
     !
     
     

     View Slide

103. don’t @extend
     between modules
     

     View Slide

104. mina.so/sassy-starter
     

     View Slide

105. View Slide

106. refactor
     all the things!
     

     View Slide

107. View Slide

108. refactor
     all the things?
     

     View Slide

109. Baby steps
     

     View Slide

110. extract components
     create variables
     apply naming conventions
     nest and @extend
     

     View Slide

111. mina.so/smacss-menu
     

     View Slide

112. Before: 161 lines
     After: 97 lines
     

     View Slide