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

Sweet and Sassy Responsive Design

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.

Mina Markham

October 08, 2013
Tweet

More Decks by Mina Markham

Other Decks in Design

Transcript

  1. use presentational classes in your markup? do you… group your

    media queries at the bottom of your stylesheets? use conditional classes for IE?
  2. @mixins mixins allow you to re-use whole chunks of CSS,

    properties or selectors. You can even give them arguments. – sass-lang.com
  3. grid mixins Allow you to layout content without using presentational

    classes, making your markup much more semantic and meaningful
  4. $offset: [enter number] If you want to offset the element

    by a certain number of columns, set this value.
  5. $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.
  6. 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);} } }
  7. 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; } }
  8. @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
  9. 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
  10. Start with the small screen first, then expand until it

    looks like shit. Time for a breakpoint! – Stephen Hay
  11. @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;
  12. @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;
  13. @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;
  14. @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;
  15. @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;
  16. @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;
  17. 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; }
  18. .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
  19. 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%;} }
  20. @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
  21. @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
  22. …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
  23. 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%;} }
  24. @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
  25. 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
  26. 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!
  27. 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