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.

How Sass Can Simplify Responsive Design

1,022 views

Published on

NOTE! Please read my notes, which are roughly equivalent to the things I said verbally while presenting these slides.
http://alanhogan.com/how-sass-can-simplify-responsive-web-design

Published in: Technology, Education
  • Login to see the comments

  • Be the first to like this

How Sass Can Simplify Responsive Design

  1. 1. How Sass Can Simplify Responsive Design The Mixin · June 28, 2013 Alan Hogan
  2. 2. Topics Experiences taking a major website responsive Simple, powerful Sass patterns Lessons learned Combining Sass and SMACSS in a responsive context
  3. 3. Responsive Redesign Requirements Must be functional (not responsive) IE8+ Great experiences required for: modern desktop browsers iOS, Android
  4. 4. 1 codebase, 2 builds Sass CSS // fixed-width.css.sass $responsive: false @import "everything" /* fixed-width.css: lighter-weight, non-responsive CSS. */ // responsive.css.sass $responsive: true @import "everything" /* responsive.css: at-media-this, responsive-that. */
  5. 5. The Mixin, 3.2 style “You can now pass a block of styles to a mixin for placement by the @content directive.” – Chris Eppstein announcing Sass 3.2
  6. 6. @mixin sometimes { @if $some-var { @content } } $some-var: true; .x { @include sometimes { color: red; } } .x { color: red; }
  7. 7. @mixin sometimes { @if $some-var { @content } } $some-var: false; .x { @include sometimes { color: red; } } .x { }
  8. 8. @mixin retina { @media (min-pixelratio: 2) { @content } } .x { @include retina { background-image: url(foo@2x.png); } } @media (min-pixelratio: 2) { .x { background-image: url(foo@2x.png); } }
  9. 9. — our goal, again: Sass CSS // fixed-width.css.sass $responsive: false @import "everything" /* fixed-width.css */ (lighter-weight, nonresponsive CSS) // responsive.css.sass $responsive: true @import "everything" /* responsive.css */ (at-media-this, responsive-that.)
  10. 10. @mixin mobile { @if $responsive { @media(max-width: 320px) { @content; } } }
  11. 11. @mixin desktop { @if $responsive { @media(min-width: 960px) { @content; } } @else { @content; } }
  12. 12. .btn-primary { cursor: pointer; background-color: $corp-blue; @include mobile { width: 100%; } @include desktop { font-size: 1.2 * $font-size; } }
  13. 13. $responsive: true;
  14. 14. .btn-primary { cursor: pointer; background-color: #0090f2; } @media (max-width: 320px) { .btn-primary { width: 100% } } @media (min-width: 960px) { .btn-primary { font-size: 19px; } }
  15. 15. $responsive: false;
  16. 16. .btn-primary { cursor: pointer; background-color: #0090f2; font-size: 19px; }
  17. 17. Notes “Tablet” breakpoint redacted for brevity. Actually used Susy mixins instead of @media directly.
  18. 18. More Surprises IE9 cannot size SVG responsively (width: 100%; height: auto only works on rasters) IE9 lack of support for input placeholder="..." led to bugs
  19. 19. Failed Approach: Based off class names .responsive { @media { ... } } .fixed-width { // ... Unwanted extra specificity } and IE8 temper tantrums
  20. 20. Doing Markup Right Server-side abstraction + responsive JS lib = easy <div data-responsive-content= '{"desktop":"Desktop!"}'> Mobile first! </div>
  21. 21. SMACSS + Sass + Responsive Tough Calls.
  22. 22. Layouts SMACSS: .layout-icon-grid .layout-two-column Responsive: Hey, this layout needs to change at breakpoints!
  23. 23. Approach: Semantic “Layouts” composited of breakpoint-specific layouts
  24. 24. .layout-with-semantic-name { @include mobile { @extend .mobile-layout-x; } @include desktop { @extend .desktop-layout-y; } }
  25. 25. For our sanity .l-with-semantic-name { @include mobile { @extend .ml-x; } @include desktop { @extend .dl-y; } }
  26. 26. Approach: Invent As Needed
  27. 27. .layout-icon-grid { // A layout that works at all brkpts } .mobile-layout-linear { // Designed only for, and applies // only for, mobile screen sizes @include mobile { ... } } .desktop-layout-columns { // No effect on mobile @include desktop { ... } }
  28. 28. Thank you! Feedback welcome: ajh.us/talk-feedback Code & shareable notes (soon): ajh.us/sass-talk @alanhogan on Twitter, ADN, Instagram Work: NoRedInk (grammar education)

×