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. y sweet & RESPONSIVE DESIGN

  2. @minamarkham

  3. None
  4. None
  5. not SASS

  6. Ingredients

  7. Flexible Grids Flexible Media Media Queries

  8. “WHY SHOULD I CARE?”

  9. Presentational Classes

  10. Media Queries

  11. Conditional Classes

  12. None
  13. @mixins

  14. None
  15. Friendly

  16. Mobile First

  17. $ gem install foundation

  18. Flexible Grids

  19. <nav class="col8">

  20. @include grid-column(2);

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

  22. <section class="hero-unit"> <aside class="promo-unit">

  23. Flexible Media

  24. max-width: 100%

  25. <img class="show-for-small" src="small.jpg" />

  26. Interchange

  27. <img data-interchange="[small.jpg, (default)], [small.jpg, (small)], [medium.jpg, (medium)]">

  28. <noscript> <img src="default.jpg"> </noscript>

  29. Media Queries

  30. @media

  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
  32. device-in

  33. content-out

  34. Start with the small screen first, then expand until it

    looks like shit. Time for a breakpoint! – Stephen Hay
  35. None
  36. @mixin mq($breakpoint, $query: 'min-width', $type: 'screen') {…}

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

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

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

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

  41. usage

  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;}}
  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;}}
  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;}}
  45. “BUT… WHAT ABOUT CODE BLOAT?”

  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
  47. But…

  48. Sass::MediaQueryCombiner

  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;}}
  50. @media and screen and (min-width: 20em) { .hero-unit {font-size: 2em;}

    .promo-unit {font-size: 1.5em;}}
  51. $ gem install sass-media_query_combiner

  52. The Catch

  53. Ruby 1.9.2 Untested on large-scale Rearranges CSS

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

    wrong.
  55. “But… What about IE?”

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

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

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

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

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

  61. Baking it Up

  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;}
  63. Quick Demo

  64. Recap

  65. Mixins FTW! Dynamic Content Modularize Styles

  66. Resources

  67. sass-lang.com

  68. foundation.zurb.com

  69. susy.oddbird.net/

  70. neat.bourbon.io/

  71. thesassway.com

  72. sassmeister.com

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

  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
  76. None
  77. None
  78. None
  79. None
  80. None
  81. None
  82. Namespacing

  83. the almighty ampersand

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

  85. .btn:hover {…}

  86. .btn { form & {…} }

  87. form .btn {…}

  88. &- or &_

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

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

  91. nesting

  92. inception rule

  93. < 3 levels deep

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

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

  96. @media

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

  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; }
  99. .btn {…} .btn-large {…} ! <div class=“btn btn-large”>

  100. @extend all the things!

  101. .btn {…} .btn-large {@extend .btn;} ! <div class=“btn-large”>

  102. %btn {…} .btn-large {@extend %btn;} ! <div class=“btn-large”>

  103. don’t @extend between modules

  104. mina.so/sassy-starter

  105. None
  106. refactor all the things!

  107. None
  108. refactor all the things?

  109. Baby steps

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

  111. mina.so/smacss-menu

  112. Before: 161 lines After: 97 lines