Ever since I read the blog article by Ethan Marcotte and heard people at conferences start murmuring about this new idea called ‘Responsive Design’ I have been hooked. This interest went deep enough to warrant a number of papers throughout my graduate school career devoted to analyzing the recent trends surrounding responsive and adaptive design. Needless to say I was thrilled when I found out that my new co-workers shared every bit of my enthusiasm. They had styled their very own site, http://littlelines.com in a mobile-first, responsive manner and it looked great on every device I could find to play with at home (I’m a self-titled professional geek so that gadget list is not inconsequential).
Upon checking out some of their source code I stumbled across a snippet that I thought was worthy of its very own blog post. During the initial development of their new site, they had setup their own custom SASS mixin to handle device detection. A mixin in SASS is a chunk of CSS that is reusable similar to a reusable method in Object Oriented Programming.
=respond-to($device) @if $device == handheld @media only screen and (min-width : 320px) @content @if $device == tablet @media only screen and (min-width : 600px) @content @if $device == tablet-landscape @media only screen and (min-width : 600px) and (orientation : landscape) @content @if $device == tablet-portrait @media only screen and (min-width : 600px) and (orientation : portrait) @content @if $device == tablet-large @media only screen and (min-width : 768px) @content @if $device == desktop @media only screen and (min-width : 1024px) @content @if $device == desktop-large @media only screen and (min-width : 1824px) @content @if $device == retina-display @media only screen and (-webkit-min-device-pixel-ratio: 2) @content
This mixin not only handled all device detection (via media queries), but did so in a mobile-first approach. This approach involves tackling the challenges of styling the mobile version of a site first and increasing in size from there (e-book, tablet, desktop, etc). Traditionally, when using media queries in CSS to handle device detection, all of the styles for a particular device are chunked together in the same part of the stylesheet. With the custom mixin, you are able to append a responsive style (using +respond_to(device_type)) within any specific style rule in SASS. This makes it quicker and easier to find and read any styles for a given site or application as all rules for a particular element are in the same place regardless of device. Ultimately, this makes adjusting a design to fit a myriad of devices second nature when tackling front-end development. This ensures continued focus on making sure site and applications give users an enjoyable experience regardless of their context or device of choice.
Below is a short example of the custom SASS mixin we use. Feel free to use/modify these snippets on your own projects - your mobile users will thank you!
h2 color: #523611 font-weight: bold margin-bottom: 1.0em +respond-to(handheld) font-size: 1.0em text-align: center +respond-to(tablet) font-size: 1.2em text-align: left +respond-to(desktop) font-size: 1.5em