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.

1. sweet & y
RESPONSIVE DESIGN

2. @minamarkham

5. not SASS

6. Ingredients

7. Flexible Grids
Flexible Media
Media Queries

8. “WHY SHOULD
I CARE?”

9. Presentational
Classes

10. Media Queries

11. Conditional
Classes

13. @mixins

15. Friendly

16. Mobile First

17. $ gem install foundation

18. Flexible Grids

19. <nav class="col8">

20. @include grid-column(2);

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

22. <section class="hero-unit">
<aside class="promo-unit">

23. Flexible Media

24. max-width: 100%

25. <img class="show-for-small"
src="small.jpg" />

26. Interchange

27. <img data-interchange="[small.jpg,
(default)], [small.jpg, (small)],
[medium.jpg, (medium)]">

28. <noscript>
<img src="default.jpg">
</noscript>

29. Media Queries

30. @media

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

32. device-in

33. content-out

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

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

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

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

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

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

41. usage

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;}}

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;}}

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;}}

45. “BUT… WHAT ABOUT
CODE BLOAT?”

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

47. But…

48. Sass::MediaQueryCombiner

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;}}

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

51. $ gem install
sass-media_query_combiner

52. The Catch

53. Ruby 1.9.2
Untested on large-scale
Rearranges CSS

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

55. “But… What about IE?”

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

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

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

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

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

61. Baking it Up

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;}

63. Quick Demo

64. Recap

65. Mixins FTW!
Dynamic Content
Modularize Styles

66. Resources

67. sass-lang.com

68. foundation.zurb.com

69. susy.oddbird.net/

70. neat.bourbon.io/

71. thesassway.com

72. sassmeister.com

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

75. credits & such
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

82. Namespacing

83. the almighty ampersand

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

85. .btn:hover {…}

86. .btn {
form & {…}
}

87. form .btn {…}

88. &- or &_

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

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

91. nesting

92. inception rule

93. < 3 levels deep

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

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

96. @media

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

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;
}

99. .btn {…}
.btn-large {…}
!
<div class=“btn btn-large”>

100. @extend
all the things!

101. .btn {…}
.btn-large {@extend .btn;}
!
<div class=“btn-large”>

102. %btn {…}
.btn-large {@extend %btn;}
!
<div class=“btn-large”>

103. don’t @extend
between modules

104. mina.so/sassy-starter

106. refactor
all the things!

108. refactor
all the things?

109. Baby steps

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

111. mina.so/smacss-menu

112. Before: 161 lines
After: 97 lines