Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
sweet & y 
RESPONSIVE DESIGN
@minamarkham
not SASS
Ingredients
Flexible Grids 
Flexible Media 
Media Queries
“WHY SHOULD 
I CARE?”
Presentational 
Classes
Media Queries
Conditional 
Classes
@mixins
Friendly
Mobile First
$ gem install foundation
Flexible Grids
<nav class="col8">
@include grid-column(2);
.hero-unit { @include grid-column(2); } 
.promo-unit { @include grid-column(4); }
<section class="hero-unit"> 
<aside class="promo-unit">
Flexible Media
max-width: 100%
<img class="show-for-small" 
src="small.jpg" />
Interchange
<img data-interchange="[small.jpg, 
(default)], [small.jpg, (small)], 
[medium.jpg, (medium)]">
<noscript> 
<img src="default.jpg"> 
</noscript>
Media Queries
@media
Every time you see 320px, 480px, 
768px, 1024px used as breakpoint 
values, a kitten gets its head bitten off 
by an angel...
device-in
content-out
Start with the small screen first, 
then expand until it looks like shit. 
Time for a breakpoint! 
– Stephen Hay
@mixin mq($breakpoint, $query: 
'min-width', $type: 'screen') {…}
@if $no-mqs { 
@if $no-mqs >= $breakpoint 
{ @content; }}
@else { 
@media #{$type} and (#{$query}: 
#{$breakpoint}) { @content; } }
$small: 20em; 
$medium: 48em; 
$large: 90em;
@include mq($large) {…}
usage
.hero-unit { 
@include mq($small) {font-size: 1.2em;} 
@include mq($large) {font-size: 1.5em;} 
@include mq(30em) {font-si...
@media and screen and (min-width: 20em) { 
.hero-unit {font-size: 2em;}} 
! 
@media and screen and (min-width: 20em) { 
.p...
@media and screen and (min-width: 20em) { 
.hero-unit {font-size: 2em;}} 
! 
@media and screen and (min-width: 20em) { 
.p...
“BUT… WHAT ABOUT 
CODE BLOAT?”
…we hashed out whether there were 
performance implications of combining 
vs scattering Media Queries and came 
to the con...
But…
Sass::MediaQueryCombiner
.hero-unit { 
@include mq(20em) {font-size: 2em;} 
@include mq(30em) {font-size: 2.5em;}} 
.promo-unit { 
@include mq(20em...
@media and screen and (min-width: 20em) { 
.hero-unit {font-size: 2em;} 
.promo-unit {font-size: 1.5em;}}
$ gem install 
sass-media_query_combiner
The Catch
Ruby 1.9.2 
Untested on large-scale 
Rearranges CSS
If your CSS doesn’t look like 
this, you’re doing it wrong.
“But… What about IE?”
This is why we can’t have nice things
$no-mqs: false default! 
$old-ie: false default!
@mixin old-ie { 
@if $old-ie { @content; }}
$no-mqs: 48em 
$old-ie: true
.foobar { 
@include old-ie { ... } }
Baking it Up
.promo-unit { 
@include grid-column(4); 
@include mq(20em) {font-size: 2em;} 
@include mq(30em) {font-size: 2.5em;} 
font-...
Quick Demo
Recap
Mixins FTW! 
Dynamic Content 
Modularize Styles
Resources
sass-lang.com
foundation.zurb.com
susy.oddbird.net/
neat.bourbon.io/
thesassway.com
sassmeister.com
mina.so/sassy-rwd 
thanks! 
@minamarkham
credits & such 
7 Habits of Highly Effective Media Queries 
http://bradfrostweb.com/blog/post/7-­‐habits-­‐of-­‐highly-­‐e...
Namespacing
the almighty ampersand
.btn { 
&:hover {…} 
}
.btn:hover {…}
.btn { 
form & {…} 
}
form .btn {…}
&- or &_
.btn 
{ 
&-secondary {…} 
&_secondary {…} 
}
.btn-secondary {…} 
.btn_secondary {…}
nesting
inception rule
< 3 levels deep
.btn 
{ 
&-secondary 
{ 
&-icon {…} 
} 
}
.btn-secondary {…} 
.btn-secondary-icon {…}
@media
@mixin mq($breakpoint, $query: 
'min-width', $type: 'screen') {…}
.promo-title { 
@include mq(20em) {font-size: 2em;} 
@include mq(30em) {font-size: 2.5em;} 
@include mq(50em) {font-size: ...
.btn {…} 
.btn-large {…} 
! 
<div class=“btn btn-large”>
@extend 
all the things!
.btn {…} 
.btn-large {@extend .btn;} 
! 
<div class=“btn-large”>
%btn {…} 
.btn-large {@extend %btn;} 
! 
<div class=“btn-large”>
don’t @extend 
between modules
mina.so/sassy-starter
refactor 
all the things!
refactor 
all the things?
Baby steps
extract components 
create variables 
apply naming conventions 
nest and @extend
mina.so/smacss-menu
Before: 161 lines 
After: 97 lines
Sweet and Sassy Responsive Design
Sweet and Sassy Responsive Design
Sweet and Sassy Responsive Design
Sweet and Sassy Responsive Design
Sweet and Sassy Responsive Design
Sweet and Sassy Responsive Design
Sweet and Sassy Responsive Design
Sweet and Sassy Responsive Design
Sweet and Sassy Responsive Design
Sweet and Sassy Responsive Design
Sweet and Sassy Responsive Design
Sweet and Sassy Responsive Design
Sweet and Sassy Responsive Design
Sweet and Sassy Responsive Design
Upcoming SlideShare
Loading in …5
×

Sweet and Sassy Responsive Design

489 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Sweet and Sassy Responsive Design

  1. 1. sweet & y RESPONSIVE DESIGN
  2. 2. @minamarkham
  3. 3. not SASS
  4. 4. Ingredients
  5. 5. Flexible Grids Flexible Media Media Queries
  6. 6. “WHY SHOULD I CARE?”
  7. 7. Presentational Classes
  8. 8. Media Queries
  9. 9. Conditional Classes
  10. 10. @mixins
  11. 11. Friendly
  12. 12. Mobile First
  13. 13. $ gem install foundation
  14. 14. Flexible Grids
  15. 15. <nav class="col8">
  16. 16. @include grid-column(2);
  17. 17. .hero-unit { @include grid-column(2); } .promo-unit { @include grid-column(4); }
  18. 18. <section class="hero-unit"> <aside class="promo-unit">
  19. 19. Flexible Media
  20. 20. max-width: 100%
  21. 21. <img class="show-for-small" src="small.jpg" />
  22. 22. Interchange
  23. 23. <img data-interchange="[small.jpg, (default)], [small.jpg, (small)], [medium.jpg, (medium)]">
  24. 24. <noscript> <img src="default.jpg"> </noscript>
  25. 25. Media Queries
  26. 26. @media
  27. 27. 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
  28. 28. device-in
  29. 29. content-out
  30. 30. Start with the small screen first, then expand until it looks like shit. Time for a breakpoint! – Stephen Hay
  31. 31. @mixin mq($breakpoint, $query: 'min-width', $type: 'screen') {…}
  32. 32. @if $no-mqs { @if $no-mqs >= $breakpoint { @content; }}
  33. 33. @else { @media #{$type} and (#{$query}: #{$breakpoint}) { @content; } }
  34. 34. $small: 20em; $medium: 48em; $large: 90em;
  35. 35. @include mq($large) {…}
  36. 36. usage
  37. 37. .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;}}
  38. 38. @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;}}
  39. 39. @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;}}
  40. 40. “BUT… WHAT ABOUT CODE BLOAT?”
  41. 41. …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
  42. 42. But…
  43. 43. Sass::MediaQueryCombiner
  44. 44. .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;}}
  45. 45. @media and screen and (min-width: 20em) { .hero-unit {font-size: 2em;} .promo-unit {font-size: 1.5em;}}
  46. 46. $ gem install sass-media_query_combiner
  47. 47. The Catch
  48. 48. Ruby 1.9.2 Untested on large-scale Rearranges CSS
  49. 49. If your CSS doesn’t look like this, you’re doing it wrong.
  50. 50. “But… What about IE?”
  51. 51. This is why we can’t have nice things
  52. 52. $no-mqs: false default! $old-ie: false default!
  53. 53. @mixin old-ie { @if $old-ie { @content; }}
  54. 54. $no-mqs: 48em $old-ie: true
  55. 55. .foobar { @include old-ie { ... } }
  56. 56. Baking it Up
  57. 57. .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;}
  58. 58. Quick Demo
  59. 59. Recap
  60. 60. Mixins FTW! Dynamic Content Modularize Styles
  61. 61. Resources
  62. 62. sass-lang.com
  63. 63. foundation.zurb.com
  64. 64. susy.oddbird.net/
  65. 65. neat.bourbon.io/
  66. 66. thesassway.com
  67. 67. sassmeister.com
  68. 68. mina.so/sassy-rwd thanks! @minamarkham
  69. 69. credits & such 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
  70. 70. Namespacing
  71. 71. the almighty ampersand
  72. 72. .btn { &:hover {…} }
  73. 73. .btn:hover {…}
  74. 74. .btn { form & {…} }
  75. 75. form .btn {…}
  76. 76. &- or &_
  77. 77. .btn { &-secondary {…} &_secondary {…} }
  78. 78. .btn-secondary {…} .btn_secondary {…}
  79. 79. nesting
  80. 80. inception rule
  81. 81. < 3 levels deep
  82. 82. .btn { &-secondary { &-icon {…} } }
  83. 83. .btn-secondary {…} .btn-secondary-icon {…}
  84. 84. @media
  85. 85. @mixin mq($breakpoint, $query: 'min-width', $type: 'screen') {…}
  86. 86. .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; }
  87. 87. .btn {…} .btn-large {…} ! <div class=“btn btn-large”>
  88. 88. @extend all the things!
  89. 89. .btn {…} .btn-large {@extend .btn;} ! <div class=“btn-large”>
  90. 90. %btn {…} .btn-large {@extend %btn;} ! <div class=“btn-large”>
  91. 91. don’t @extend between modules
  92. 92. mina.so/sassy-starter
  93. 93. refactor all the things!
  94. 94. refactor all the things?
  95. 95. Baby steps
  96. 96. extract components create variables apply naming conventions nest and @extend
  97. 97. mina.so/smacss-menu
  98. 98. Before: 161 lines After: 97 lines

×