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

904 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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
904
On SlideShare
0
From Embeds
0
Number of Embeds
96
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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)

×