Sweet and Sassy Responsive Design

How to use Sass and grid frameworks to streamline the responsive design process, focusing on media queries and the power of mixins. I'll share some tips to best optimize your Sass for responsive design and some examples of sites utilizing these techniques.

Transcript

1. Sweet and Sassy Responsive Design (with Foundation 4)
2. Mina Markham Front End Developer, Parago Baker of cupcakes and maker of the interwebs who am i?
3. “SQUEE! CUPCAKES!” *not really me
4. I'm making a few assumptions…
5. You're familiar with Sass
6. You’ve heard of Foundation
7. You design and build your sites mobile first
8. Sass = Sass + Compass
9. Not SASS
10. https://www.codeschool.com/
11. “WHY SHOULD I CARE?”
12. use presentational classes in your markup? do you… group your media queries at the bottom of your stylesheets? use conditional classes for IE?
13. Mixins
14. @mixins mixins allow you to re-use whole chunks of CSS, properties or selectors. You can even give them arguments. – sass-lang.com
15. grid mixins Allow you to layout content without using presentational classes, making your markup much more semantic and meaningful
16. example @mixin grid-row($behavior: false) @mixin grid-column($columns, $last-column:false, $center:false, $offset:false, $push:false, $pull:false, $collapse:false, $float:left)
17. $behavior: nest Use this value if your nesting elements inside other elements
18. $center: true Use this if you want to center an element inside another
19. $offset: [enter number] If you want to offset the element by a certain number of columns, set this value.
20. $push/$pull: [enter number] This value will change the ordering of elements depending on the breakpoint. For example, an element with a push set will be pushed to the end of the column on a larger screen.
21. usage header { @include grid-row; @include mq (72em) { img { @include grid-column(4);} } @include mq (72em) { nav { @include grid-column(4, false, false, false, false, false, false, right);} } }
22. output header { width: 100%; max-width: 62.5em; } @media screen and (min-width: 56.25em) { header img { width: 25%; float: left; } header nav { width: 33.33333%; float: right; } }
23. @media Sass allows you to nest media queries inside a CSS rule, making it easier to add media queries without breaking the flow of the stylesheet
24. 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
25. These types of media queries encourage device-in responsive design, rather than content-out.
26. Start with the small screen first, then expand until it looks like shit. Time for a breakpoint! – Stephen Hay
27. @mixin mq($breakpoint, $query: 'min-width', $type: 'screen') { @if $no-mqs { @if $no-mqs >= $breakpoint { @content; } } @else { @media #{$type} and (#{$query}: #{$breakpoint}){ @content; } } } secret recipe http://jakearchibald.github.io/sass-ie/ $small: 20em; $medium: 48em; $large: 90em;
28. @mixin mq($breakpoint, $query: 'min-width', $type: 'screen') { @if $no-mqs { @if $no-mqs >= $breakpoint { @content; } } @else { @media #{$type} and (#{$query}: #{$breakpoint}){ @content; } } } secret recipe http://jakearchibald.github.io/sass-ie/ $small: 20em; $medium: 48em; $large: 90em;
29. @mixin mq($breakpoint, $query: 'min-width', $type: 'screen') { @if $no-mqs { @if $no-mqs >= $breakpoint { @content; } } @else { @media #{$type} and (#{$query}: #{$breakpoint}){ @content; } } } secret recipe http://jakearchibald.github.io/sass-ie/ $small: 20em; $medium: 48em; $large: 90em;
30. @mixin mq($breakpoint, $query: 'min-width', $type: 'screen') { @if $no-mqs { @if $no-mqs >= $breakpoint { @content; } } @else { @media #{$type} and (#{$query}: #{$breakpoint}){ @content; } } } secret recipe http://jakearchibald.github.io/sass-ie/ $small: 20em; $medium: 48em; $large: 90em;
31. @mixin mq($breakpoint, $query: 'min-width', $type: 'screen') { @if $no-mqs { @if $no-mqs >= $breakpoint { @content; } } @else { @media #{$type} and (#{$query}: #{$breakpoint}){ @content; } } } secret recipe http://jakearchibald.github.io/sass-ie/ $small: 20em; $medium: 48em; $large: 90em;
32. @mixin mq($breakpoint, $query: 'min-width', $type: 'screen') { @if $no-mqs { @if $no-mqs >= $breakpoint { @content; } } @else { @media #{$type} and (#{$query}: #{$breakpoint}){ @content; } } } secret recipe http://jakearchibald.github.io/sass-ie/ $small: 20em; $medium: 48em; $large: 90em;
33. usage .branding-title { @include mq($small) {font-size: 2em;} @include mq(30em) {font-size: 2.5em;} @include mq($medium) {font-size: 3em;} font-size: 1.3em; margin-top: 1em; float: left; }
34. .branding-title { font-size: 1.3em; margin-top: 1em; float: left; } @media screen and (min-width: 20em) { .branding-title {font-size: 2em;} } @media screen and (min-width: 30em) { .branding-title {font-size: 2.5em;} } @media screen and (min-width: 48em) { .branding-title {font-size: 3em;} } css output
35. usage .hero-unit { @include mq($small) { width: 100%; @include mq($medium) { width: 50%; @include mq($large) { width: 33.33%;} } .callout-unit { @include mq($small) { width: 100%; @include mq($large) { width: 25%;} }
36. @media screen and (min-width: 20em) { .hero-unit { width: 100%; } } @media screen and (min-width: 20em) { .callout-unit { width: 100%; } } @media screen and (min-width: 48em) { .hero-unit { width: 50%; } } @media screen and (min-width: 98em) { .hero-unit { width: 33.33333333333%; } } @media screen and (min-width: 98em) { .callout-unit { width: 25%; } } css output
37. @media screen and (min-width: 20em) { .hero-unit { width: 100%; } } @media screen and (min-width: 20em) { .callout-unit { width: 100%; } } @media screen and (min-width: 48em) { .hero-unit { width: 50%; } } @media screen and (min-width: 98em) { .hero-unit { width: 33.33333333333%; } } @media screen and (min-width: 98em) { .callout-unit { width: 25%; } } css output
38. “BUT… WHAT ABOUT CODE BLOAT?”
39. …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
40. But if you insist…
41. Enter Sass::MediaQueryCombiner
42. turns this .hero-unit { @include mq($small) { width: 100%; @include mq($medium) { width: 50%; @include mq($large) { width: 33.33%;} } .callout-unit { @include mq($small) { width: 100%; @include mq($large) { width: 25%;} }
43. @media screen and (min-width: 20em) { .hero-unit { width: 100%; } .feature-unit { width: 100%; } } @media screen and (min-width: 48em) { .hero-unit { width: 50%; } } @media screen and (min-width: 70em) { .hero-unit { width: 33.33333333333%; } .feature-unit { width: 25%; } } into this
44. require ‘sass-media_query_combiner’ $ gem install sass-media_query_combiner install config.rb $ sass --watch –r sass-media_query_combiner sass watch
45. the catch Requires Ruby 1.9.2 Untested on large scale projects Rearranges CSS
46. If your CSS doesn’t look like this, you’re doing it wrong
48. “FUCK!” *also not me
49. app.scss <link rel="stylesheet" href="css/app.css” $no-mqs: false !default; $old-ie: false !default; Then include complied stylesheet in markup
50. ie.scss <!--[if lte IE 8]> <link rel="stylesheet" href="css/ie.css"> <![endif]--> $no-mqs: 48em; // or whatever value you want $old-ie: true; // include styles for <IE7 Then include complied stylesheet in markup
51. the result Everything to do with an element is in one place: base styles, media queries, and IE specific style. No more hunting for style declarations!
52. resources
53. http://sass-lang.com/
54. http://compass-style.org/
55. http://foundation.zurb.com/
56. http://thesassway.com/
57. http://bourbon.io/
58. http://compass.kkbox.com/
59. http://ladiesintech.com/
62. *still not me
64. questions? comments? complaints? @minamarkham | mina.is/here
65. 7 Habits of Highly Effective Media Queries h"p://bradfrostweb.com/blog/post/7-­‐habits-­‐of-­‐highly-­‐effec:ve-­‐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 |h"ps://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