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
The Mixin · June 28, 2013
Alan Hogan
Topics
Experiences taking a major website responsive
Simple, powerful Sass patterns
Lessons learned
Combining Sass and SMA...
Responsive Redesign
Requirements
Must be functional (not responsive) IE8+
Great experiences required for:
modern desktop b...
1 codebase, 2 builds
Sass

CSS

// fixed-width.css.sass
$responsive: false
@import "everything"

/* fixed-width.css:
light...
The Mixin, 3.2 style
“You can now pass a block of
styles to a mixin for placement
by the @content directive.”
– Chris Epps...
@mixin sometimes {
@if $some-var {
@content
}
}
$some-var: true;
.x {
@include sometimes {
color: red;
}
}

.x {
color: re...
@mixin sometimes {
@if $some-var {
@content
}
}
$some-var: false;
.x {
@include sometimes {
color: red;
}
}

.x { }
@mixin retina {
@media (min-pixelratio: 2) {
@content
}
}
.x {
@include retina {
background-image:
url(foo@2x.png);
}
}

@...
— our goal, again:
Sass

CSS

// fixed-width.css.sass
$responsive: false
@import "everything"

/* fixed-width.css */
(ligh...
@mixin mobile {
@if $responsive {
@media(max-width: 320px) {
@content;
}
}
}
@mixin desktop {
@if $responsive {
@media(min-width: 960px) {
@content;
}
}
@else {
@content;
}
}
.btn-primary {
cursor: pointer;
background-color: $corp-blue;
@include mobile {
width: 100%;
}
@include desktop {
font-siz...
$responsive: true;
.btn-primary {
cursor: pointer;
background-color: #0090f2;
}
@media (max-width: 320px) {
.btn-primary {
width: 100%
}
}
@m...
$responsive: false;
.btn-primary {
cursor: pointer;
background-color: #0090f2;
font-size: 19px;
}
Notes

“Tablet” breakpoint redacted for brevity.
Actually used Susy mixins instead of @media directly.
More Surprises

IE9 cannot size SVG responsively
(width: 100%; height: auto only works on rasters)
IE9 lack of support for...
Failed Approach: Based off class names
.responsive {
@media { ... }
}
.fixed-width {
// ...
Unwanted extra specificity
}
an...
Doing Markup Right
Server-side abstraction + responsive JS lib = easy

<div data-responsive-content=
'{"desktop":"Desktop!...
SMACSS + Sass + Responsive
Tough Calls.
Layouts
SMACSS:
.layout-icon-grid
.layout-two-column

Responsive:
Hey, this layout needs to change at breakpoints!
Approach: Semantic “Layouts”
composited of breakpoint-specific layouts
.layout-with-semantic-name {
@include mobile {
@extend .mobile-layout-x;
}
@include desktop {
@extend .desktop-layout-y;
}...
For our sanity

.l-with-semantic-name {
@include mobile {
@extend .ml-x;
}
@include desktop {
@extend .dl-y;
}
}
Approach: Invent As Needed
.layout-icon-grid {
// A layout that works at all brkpts
}
.mobile-layout-linear {
// Designed only for, and applies
// on...
Thank you!
Feedback welcome:
ajh.us/talk-feedback
Code & shareable notes (soon):
ajh.us/sass-talk
@alanhogan on Twitter, A...
How Sass Can Simplify Responsive Design
Upcoming SlideShare
Loading in …5
×

How Sass Can Simplify Responsive Design

961 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
  • Be the first to comment

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

×