How Sass Can Simplify Responsive Design

  • View
    340

  • Download
    0

Embed Size (px)

DESCRIPTION

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

Text of How Sass Can Simplify Responsive Design

  • 1. How Sass Can Simplify Responsive Design The Mixin June 28, 2013 Alan Hogan

2. Topics Experiences taking a major website responsive Simple, powerful Sass patterns Lessons learned Combining Sass and SMACSS in a responsive context 3. Responsive Redesign Requirements Must be functional (not responsive) IE8+ Great experiences required for: modern desktop browsers iOS, Android 4. 1 codebase, 2 builds SassCSS// 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. 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. @mixin sometimes { @if $some-var { @content } } $some-var: true; .x { @include sometimes { color: red; } }.x { color: red; } 7. @mixin sometimes { @if $some-var { @content } } $some-var: false; .x { @include sometimes { color: red; } }.x { } 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. our goal, again: SassCSS// 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. @mixin mobile { @if $responsive { @media(max-width: 320px) { @content; } } } 11. @mixin desktop { @if $responsive { @media(min-width: 960px) { @content; } } @else { @content; } } 12. .btn-primary { cursor: pointer; background-color: $corp-blue; @include mobile { width: 100%; } @include desktop { font-size: 1.2 * $font-size; } } 13. $responsive: true; 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. $responsive: false; 16. .btn-primary { cursor: pointer; background-color: #0090f2; font-size: 19px; } 17. NotesTablet breakpoint redacted for brevity. Actually used Susy mixins instead of @media directly. 18. More SurprisesIE9 cannot size SVG responsively (width: 100%; height: auto only works on rasters) IE9 lack of support for input placeholder="..." led to bugs 19. Failed Approach: Based o class names .responsive { @media { ... } } .fixed-width { // ... Unwanted extra specificity } and IE8 temper tantrums 20. Doing Markup Right Server-side abstraction + responsive JS lib = easy

Mobile first!

21. SMACSS + Sass + Responsive Tough Calls. 22. Layouts SMACSS: .layout-icon-grid .layout-two-columnResponsive: Hey, this layout needs to change at breakpoints! 23. Approach: Semantic Layouts composited of breakpoint-specific layouts 24. .layout-with-semantic-name { @include mobile { @extend .mobile-layout-x; } @include desktop { @extend .desktop-layout-y; } } 25. For our sanity.l-with-semantic-name { @include mobile { @extend .ml-x; } @include desktop { @extend .dl-y; } } 26. Approach: Invent As Needed 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. 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)