Minimal Responsive Web Design with SASS

Sun, Jul 21, 2013

I wrote a while ago about my adventures with Twitter Bootstrap and SASS, trying to discover a way of getting the same effect of Bootstrap’s presentational classes (like .row, .span6, etc.) without actually including them in my HTML. The conclusion, at least when it came to media queries, left me with mixed feelings. It wasn’t effortless to pull off, and not very flexible.

With one of my ongoing projects, grunt-express-workfow — a scaffold for new web applications — I needed a way to easily incorporate Responsive Web Design (RWD), and I wanted to do it in pure SASS. With a little bit of ingenuity and a little bit of reverse engineering Bootstrap, I created a SASS partial that can do just that.

I call it, rather uninspiringly, responsive-sass-grid. It’s a small, tight module that gives you nothing but SASS mixins and optional CSS classes so that you can define your rows, columns, and breakpoints without putting anything extra in your HTML. You can alter how many columns fit in a row and the spacing of each by declaring a couple of variables, and even define different breakpoints for different elements, just by including one of a few mixins with a couple of arguments. Check out grunt-express-workflow to see an example, or read the documentation and try it out for yourself!