Sweet and Sassy Responsive Design - Distill 2014

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.

6e7b68aa52dc1244b3dfd3db19e06af2?s=128

Mina Markham

August 08, 2014
Tweet

Transcript

  1. 3.
  2. 4.
  3. 12.
  4. 13.
  5. 14.
  6. 15.
  7. 30.
  8. 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
  9. 32.
  10. 34.

    Start with the small screen first, then expand until it

    looks like shit. Time for a breakpoint! – Stephen Hay
  11. 35.
  12. 41.
  13. 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;}}
  14. 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;}}
  15. 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;}}
  16. 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
  17. 47.
  18. 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;}}
  19. 52.
  20. 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;}
  21. 64.
  22. 66.
  23. 73.
  24. 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
  25. 76.
  26. 77.
  27. 78.
  28. 79.
  29. 80.
  30. 81.
  31. 88.
  32. 91.
  33. 96.
  34. 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; }
  35. 105.
  36. 107.
  37. 109.