Successfully reported this slideshow.

Sweet and Sassy Responsive Design

0

Share

Upcoming SlideShare
Semantic Microblogging
Semantic Microblogging
Loading in …3
×
1 of 112
1 of 112

Sweet and Sassy Responsive Design

0

Share

Download to read offline

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.

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.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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

×