From Foundation to Susy

Download on Github

We’ve been using the Sass and Ruby version of Foundation over the past two years as a framework for dozens of web sites and web applications. It’s been a key part of our front end stack and has seen us through some pretty substantial projects from prototype to production.

The UI designs and UX requirements for some of our more recent projects have become quite complex. As a result we’ve gradually moved away from tweaking the standard components that come bundled with Foundation to rolling our own. For most of our recent projects the only Foundation component we were using was the grid.

It was time to take a step back, look at the big picture and do some serious research. Changing our stack isn’t something we take lightly – we have ongoing projects that need maintaining, but our future projects need more flexibility – ideally without significantly increasing development time. Do we start from scratch, or is there something else out there?

We looked into other grid systems as light-weight replacements for Foundation, but our developers are already used to using Foundation’s grid classes for setting out layouts (the pros and cons of littering your markup with row and column divs is a topic for another article). However a significant change means an investment in training, and additional development time. Bootstrap was too close in its approach to Foundation and would leave us with the same issues. Neat looked promising but still didn’t provide the flexibility we needed. Then I stumbled across Susy.

Susy looked like a game changer. It had all the flexibility we needed with none of the bloat. The only caveat was that Susy is a grid framework, not a grid system as such, so no Foundation-style grid classes are included and this was important in maintaining older projects. We needed something to bridge the gap and the solution seemed obvious: grab the SCSS function that Foundation uses to generate the grid classes and add some Susy settings – surely someone else has done that, right? A lot of Googling turned up nothing so it was time to roll our own version, “Fusy". It currently supports the extra -centered and -push/-pull classes.

Download on Github

The up shots:

  • We end up with all the flexibility that Susy offers (and that’s a lot) but when our developers need to put a layout of pre-styled components together they have a familiar class-based grid system to work with.
  • Existing projects can be upgraded and (with a few small tweaks) use the same core code base as future projects.

Something to say?