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)
   

   View Slide

2. Mina Markham
   Front End Developer, Parago
   Baker of cupcakes and maker of the interwebs
   who am i?
   

   View Slide

3. “SQUEE!
   CUPCAKES!”
   *not really me
   

   View Slide

4. I'm making a few assumptions…
   

   View Slide

5. You're familiar with Sass
   

   View Slide

6. You’ve heard of Foundation
   

   View Slide

7. You design and build your sites
   mobile first
   

   View Slide

8. Sass = Sass + Compass
   

   View Slide

9. Not SASS
   

   View Slide

10. https://www.codeschool.com/
    

    View Slide

11. “WHY SHOULD
    I CARE?”
    

    View Slide

12. use presentational classes
    in your markup?
    do you…
    group your media queries
    at the bottom of your stylesheets?
    use conditional classes for IE?
    

    View Slide

13. Mixins
    

    View Slide

14. @mixins
    mixins allow you to re-use whole
    chunks of CSS, properties or
    selectors. You can even give
    them arguments.
    – sass-lang.com
    

    View Slide

15. grid mixins
    Allow you to layout content without
    using presentational classes, making
    your markup much more semantic
    and meaningful
    

    View Slide

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)
    

    View Slide

17. $behavior: nest
    Use this value if your nesting elements
    inside other elements
    

    View Slide

18. $center: true
    Use this if you want to center an
    element inside another
    

    View Slide

19. $offset: [enter number]
    If you want to offset the element by a
    certain number of columns, set this value.
    

    View Slide

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.
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

25. These types of media queries
    encourage device-in responsive
    design, rather than content-out.
    

    View Slide

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

    View Slide

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;
    

    View Slide

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;
    

    View Slide

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;
    

    View Slide

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;
    

    View Slide

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;
    

    View Slide

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;
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

38. “BUT… WHAT ABOUT
    CODE BLOAT?”
    

    View Slide

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
    

    View Slide

40. But if you insist…
    

    View Slide

41. Enter Sass::MediaQueryCombiner
    

    View Slide

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

    View Slide

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
    

    View Slide

44. require ‘sass-media_query_combiner’
    $ gem install sass-media_query_combiner
    install
    config.rb
    $ sass --watch –r sass-media_query_combiner
    sass watch
    

    View Slide

45. the catch
    Requires Ruby 1.9.2
    Untested on large scale projects
    Rearranges CSS
    

    View Slide

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

    View Slide

47. View Slide

48. “FUCK!”
    *also not me
    

    View Slide

49. app.scss
    

    View Slide

50. ie.scss
    
    $no-mqs: 48em; // or whatever value you want
    $old-ie: true; // include styles for Then include complied stylesheet in markup
    

    View Slide

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!
    

    View Slide

52. resources
    

    View Slide

53. http://sass-lang.com/
    

    View Slide

54. http://compass-style.org/
    

    View Slide

55. http://foundation.zurb.com/
    

    View Slide

56. http://thesassway.com/
    

    View Slide

57. http://bourbon.io/
    

    View Slide

58. http://compass.kkbox.com/
    

    View Slide

59. http://ladiesintech.com/
    

    View Slide

60. View Slide

61. View Slide

62. *still not me
    

    View Slide

63. View Slide

64. questions?
    comments?
    complaints?
    @minamarkham | mina.is/here
    

    View Slide

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
    

    View Slide