Keeping RWD Simple & Sassy

There’s no going back now: responsive web design is the new normal. Content parity across devices is the best way to serve our users and all of us who build the web build with for multiple screen sizes.

Responsive design comes with a lot of complications, however: managing consistent breakpoints across a project, tracking all the styles that need to change across those breakpoints, and keeping all the responsive code clean and organized, to name a few.

Using Sass (or a similar preprocessor), we can standardize our breakpoints, automate much of the repetitive code, and organize individual styles well. Over the next several posts, we’ll look at several Sass techniques and tools for managing responsive CSS.

Note: I’m a big fan of Sass, but I know some of you use Less or Stylus (or your own home-brewed or PostCSS-based preprocessor), so I’m going to emphasize techniques over specific tools.

Outline:

  1. Organization
    • Single Source of Truth
    • Name Things Well
    • Make Big Things Small
  2. Responsive Sass Techniques

Links to individual posts are in the outline above. Enjoy!