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 Slide

  2. @minamarkham

    View Slide

  3. View Slide

  4. View Slide

  5. not SASS

    View Slide

  6. Ingredients

    View Slide

  7. Flexible Grids
    Flexible Media
    Media Queries

    View Slide

  8. “WHY SHOULD
    I CARE?”

    View Slide

  9. Presentational
    Classes

    View Slide

  10. Media Queries

    View Slide

  11. Conditional
    Classes

    View Slide

  12. View Slide

  13. @mixins

    View Slide

  14. View Slide

  15. Friendly

    View Slide

  16. Mobile First

    View Slide

  17. $ gem install foundation

    View Slide

  18. Flexible Grids

    View Slide


  19. View Slide

  20. @include grid-column(2);

    View Slide

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

    View Slide



  22. View Slide

  23. Flexible Media

    View Slide

  24. max-width: 100%

    View Slide

  25. src="small.jpg" />

    View Slide

  26. Interchange

    View Slide


  27. View Slide




  28. View Slide

  29. Media Queries

    View Slide

  30. @media

    View Slide

  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

    View Slide

  32. device-in

    View Slide

  33. content-out

    View Slide

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

    View Slide

  35. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  41. usage

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  45. “BUT… WHAT ABOUT
    CODE BLOAT?”

    View Slide

  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

    View Slide

  47. But…

    View Slide

  48. Sass::MediaQueryCombiner

    View Slide

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

    View Slide

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

    View Slide

  51. $ gem install
    sass-media_query_combiner

    View Slide

  52. The Catch

    View Slide

  53. Ruby 1.9.2
    Untested on large-scale
    Rearranges CSS

    View Slide

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

    View Slide

  55. “But… What about IE?”

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  61. Baking it Up

    View Slide

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

    View Slide

  63. Quick Demo

    View Slide

  64. Recap

    View Slide

  65. Mixins FTW!
    Dynamic Content
    Modularize Styles

    View Slide

  66. Resources

    View Slide

  67. sass-lang.com

    View Slide

  68. foundation.zurb.com

    View Slide

  69. susy.oddbird.net/

    View Slide

  70. neat.bourbon.io/

    View Slide

  71. thesassway.com

    View Slide

  72. sassmeister.com

    View Slide

  73. View Slide

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

    View Slide

  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

    View Slide

  76. View Slide

  77. View Slide

  78. View Slide

  79. View Slide

  80. View Slide

  81. View Slide

  82. Namespacing

    View Slide

  83. the almighty ampersand

    View Slide

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

    View Slide

  85. .btn:hover {…}

    View Slide

  86. .btn {
    form & {…}
    }

    View Slide

  87. form .btn {…}

    View Slide

  88. &- or &_

    View Slide

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

    View Slide

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

    View Slide

  91. nesting

    View Slide

  92. inception rule

    View Slide

  93. < 3 levels deep

    View Slide

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

    View Slide

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

    View Slide

  96. @media

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  100. @extend
    all the things!

    View Slide

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

    View Slide

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

    View Slide

  103. don’t @extend
    between modules

    View Slide

  104. mina.so/sassy-starter

    View Slide

  105. View Slide

  106. refactor
    all the things!

    View Slide

  107. View Slide

  108. refactor
    all the things?

    View Slide

  109. Baby steps

    View Slide

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

    View Slide

  111. mina.so/smacss-menu

    View Slide

  112. Before: 161 lines
    After: 97 lines

    View Slide