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
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. thanks! mina.so/sassy-rwd @minamarkham
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
82. Namespacing
83. the almighty ampersand
84. .btn { &:hover {…} }
85. .btn:hover {…}
86. .btn { form & {…} }
87. form .btn {…}
88. &- or &_
89. .btn { &-secondary {…} &_secondary {…} } .btn
90. .btn-secondary {…} .btn_secondary {…}
91. nesting
92. inception rule
93. < 3 levels deep
94. .btn { &-secondary { &-icon {…} } } secondary .btn
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