A Collection of Online Digital Marketplaces
“Designing an online experience for mobile before designing it for the desktop Web — or any other device”uxmatters.com
Control which pages should be responsive at the flip of a switch
def show
@responsive = true
end
Serve up different CSS files depending if the page
has the responsive switch enabled or not
<%= if @responsive %>
<link href="application-responsive.css" rel="stylesheet" />
<% else %>
<link href="application.css" rel="stylesheet" />
<% end %>
$responsive: true
@import 'application.sass'
Compile both the desktop stylesheets (no media-queries)
and the responsive stylesheets (with media-queries)
from the same Sass files
“Susy provides the power-tools,
what you build is up to you.”
Sass mixin to handle all our media-queries
Allows us to remove any media-query applied with the`at-breakpoint` mixin if the <html> has a certain class
<!--[if lte IE 8]>
<html class="lt-ie9 fixed-layout">
<![endif]-->
<!--[if gt IE 8]><!-->
<html class="<%= 'fixed-layout' unless @responsive %>">
<!--<![endif]-->
// Susy
// ------------------------
// Grid settings
$container-style: fluid
$total-columns: 4
$column-width: 65px
$gutter-width: 20px
$grid-padding: 10px
// Breakpoints
$phone-only: 4 568px
$tablet-and-above: 569px 8
$tablet-only: 569px 8 1024px
$tablet-and-below: 8 1024px
$desktop-and-above: 1025px 12 fixed-layout
// Breakpoint output
$breakpoint-media-output: $responsive and not $lt-ie9
$breakpoint-ie-output: $lt-ie9 or not $responsive
.module
// Mobile default
background-color: red
// Tablet
+at-breakpoint($tablet-only)
background-color: green
// Desktop
+at-breakpoint($desktop-and-above)
background-color: blue
.module { background-color: red; }
@media (min-width: 569px) and (max-width: 1024px) {
.module { background-color: green; }
}
@media (min-width: 1025px) {
.module { background-color: blue; }
}
.module { background-color: red; }
.fixed-layout .module { background-color: green; }
.fixed-layout .module { background-color: blue; }
// With breakpoints removed the desktop style (background-color: blue) will take precedence
Coded to work anywhere and don’t care about or inherit
styles from their parent container.
At most, the parent container controls the position and
dimensions of where the module will be used.