Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sweet and Sassy Responsive Design

6e7b68aa52dc1244b3dfd3db19e06af2?s=47 Mina Markham
October 08, 2013

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.

6e7b68aa52dc1244b3dfd3db19e06af2?s=128

Mina Markham

October 08, 2013
Tweet

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
  47. None
  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/

  60. None
  61. None
  62. *still not me

  63. None
  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