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

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.

Mina Markham

August 08, 2014
Tweet

More Decks by Mina Markham

Other Decks in Technology

Transcript

  1. y
    sweet &
    RESPONSIVE DESIGN

    View full-size slide

  2. @minamarkham

    View full-size slide

  3. Flexible Grids
    Flexible Media
    Media Queries

    View full-size slide

  4. “WHY SHOULD
    I CARE?”

    View full-size slide

  5. Presentational
    Classes

    View full-size slide

  6. Media Queries

    View full-size slide

  7. Conditional
    Classes

    View full-size slide

  8. Mobile First

    View full-size slide

  9. $ gem install foundation

    View full-size slide

  10. Flexible Grids

    View full-size slide

  11. @include grid-column(2);

    View full-size slide

  12. .hero-unit { @include grid-column(2); }
    .promo-unit { @include grid-column(4); }

    View full-size slide

  13. Flexible Media

    View full-size slide

  14. max-width: 100%

    View full-size slide

  15. src="small.jpg" />

    View full-size slide

  16. Media Queries

    View full-size slide

  17. 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 full-size slide

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

    View full-size slide

  19. @mixin mq($breakpoint, $query:
    'min-width', $type: 'screen') {…}

    View full-size slide

  20. @if $no-mqs {
    @if $no-mqs >= $breakpoint
    { @content; }}

    View full-size slide

  21. @else {
    @media #{$type} and (#{$query}:
    #{$breakpoint}) { @content; } }

    View full-size slide

  22. $small: 20em;
    $medium: 48em;
    $large: 90em;

    View full-size slide

  23. @include mq($large) {…}

    View full-size slide

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

    View full-size slide

  25. @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;}}

    View full-size slide

  26. @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;}}

    View full-size slide

  27. “BUT… WHAT ABOUT
    CODE BLOAT?”

    View full-size slide

  28. …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 full-size slide

  29. Sass::MediaQueryCombiner

    View full-size slide

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

    View full-size slide

  31. @media and screen and (min-width: 20em) {
    .hero-unit {font-size: 2em;}
    .promo-unit {font-size: 1.5em;}}

    View full-size slide

  32. $ gem install
    sass-media_query_combiner

    View full-size slide

  33. Ruby 1.9.2
    Untested on large-scale
    Rearranges CSS

    View full-size slide

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

    View full-size slide

  35. “But… What about IE?”

    View full-size slide

  36. This is why we can’t have nice things

    View full-size slide

  37. $no-mqs: false default!
    $old-ie: false default!

    View full-size slide

  38. @mixin old-ie {
    @if $old-ie { @content; }}

    View full-size slide

  39. $no-mqs: 48em
    $old-ie: true

    View full-size slide

  40. .foobar {
    @include old-ie { ... } }

    View full-size slide

  41. Baking it Up

    View full-size slide

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

    View full-size slide

  43. Mixins FTW!
    Dynamic Content
    Modularize Styles

    View full-size slide

  44. sass-lang.com

    View full-size slide

  45. foundation.zurb.com

    View full-size slide

  46. susy.oddbird.net/

    View full-size slide

  47. neat.bourbon.io/

    View full-size slide

  48. thesassway.com

    View full-size slide

  49. sassmeister.com

    View full-size slide

  50. thanks!
    mina.so/sassy-rwd
    @minamarkham

    View full-size slide

  51. 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

    View full-size slide

  52. the almighty ampersand

    View full-size slide

  53. .btn {
    &:hover {…}
    }

    View full-size slide

  54. .btn:hover {…}

    View full-size slide

  55. .btn {
    form & {…}
    }

    View full-size slide

  56. form .btn {…}

    View full-size slide

  57. .btn {
    &-secondary {…}
    &_secondary {…}
    }
    .btn

    View full-size slide

  58. .btn-secondary {…}
    .btn_secondary {…}

    View full-size slide

  59. inception rule

    View full-size slide

  60. < 3 levels deep

    View full-size slide

  61. .btn {
    &-secondary {
    &-icon {…}
    }
    }
    secondary
    .btn

    View full-size slide

  62. .btn-secondary {…}
    .btn-secondary-icon {…}

    View full-size slide

  63. @mixin mq($breakpoint, $query:
    'min-width', $type: 'screen') {…}

    View full-size slide

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

    View full-size slide

  65. .btn {…}
    .btn-large {…}
    !

    View full-size slide

  66. @extend
    all the things!

    View full-size slide

  67. .btn {…}
    .btn-large {@extend .btn;}
    !

    View full-size slide

  68. %btn {…}
    .btn-large {@extend %btn;}
    !

    View full-size slide

  69. don’t @extend
    between modules

    View full-size slide

  70. mina.so/sassy-starter

    View full-size slide

  71. refactor
    all the things!

    View full-size slide

  72. refactor
    all the things?

    View full-size slide

  73. extract components
    create variables
    apply naming conventions
    nest and @extend

    View full-size slide

  74. mina.so/smacss-menu

    View full-size slide

  75. Before: 161 lines
    After: 97 lines

    View full-size slide