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.

0

Share

Download to read offline

How Sass Can Simplify Responsive Design

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all
  • 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)

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

Views

Total views

1,038

On Slideshare

0

From embeds

0

Number of embeds

98

Actions

Downloads

6

Shares

0

Comments

0

Likes

0

×