Meet Column Setter

ProPublica Design & Production team member Rob Weychert has created a handy tool for building responsive, grid-based layouts in Sass. We’re calling it Column Setter.

There are a couple things that set Column Setter apart. First, you can use any grid proportions you want. Unlike some other tools, it doesn’t rely on a set of predefined grids you have to cram your content into. You get to pick what works best for your design. Even better, it’s not a framework, so you don’t have to junk up your page with lots of krufty markup. Lastly, layouts built with Column Setter work in older browsers. While the future of advanced layout on the web is clearly CSS Grid, Column Setter’s got you covered if you need to support the broadest possible audience without resorting to lots of hacks or workarounds.

We’ve been using Column Setter on the new ProPublica.org for several months. It’s internal code name was “Josef” (as in Josef Müller-Brockmann, naturally). If you’ve browsed our site or read one of our feature stories recently, you’ve already seen Column Setter layouts in action.

Dig into the code on GitHub, and check out Rob’s writeup over on the ProPublica Nerd Blog.