SUSY, an alternative to responsive design

During the last couple of years, responsive systems and frameworks running on Sass have proliferated over the Internet almost virally. It seems nowadays we can find a responsive system just by stumbling around on the internet; nonetheless one has stood out consistently: Susy.

So what's all the fuss about Susy and the alternatives? With so many choices out there, it might seem like a simple one to make, and easy to distinguish from the others, but it's not. So in order to maintain focus through the article, I will try to keep it simple and break things down with one goal in mind: to answer the question What kind of project is better suited for Susy?

So, let's get cracking. We'll go through the following elements as we move on: Definition, Pros & Cons, Compatibility and Alternatives.



My literature teacher always told me it was tasteless to define something by comparison or by what that something is not. In this specific case however, the comparison with Bootstrap is unavoidable due to its popularity. Most people hear "responsive" and picture Bootstrap in their minds. So let's get that one out of the way: Susy is NOT like Bootstrap at all.

That said, Bootstrap is a template framework whereas Susy is a Grid Framework; let me elaborate on this a bit more.


Template framework

420x250-2On one hand, Bootstrap was originally born as a template, a non-responsive one by the way; responsiveness came after. Its pre-defined grid can be customized to a certain extent and complemented with ready-to-use jQuery plugins and pre-made components like carousels, accordions, navigation and the like, allowing you to have a website assembled in no time.

Prototyping a website with Bootstrap is a breeze whereas trying to do precisely that with Susy (although they provide a starting point) would take much longer.

With Bootstrap, you customize (or code) both ends: HTML and CSS. These two codes are then associated or paired to shape the solution. Now, from this perspective, Bootstrap is tough to maintain. If you want to change the website grid in the future you will have to edit BOTH ends, change the HTML first and then the CSS.


Grid framework

On the other hand, there's Susy, which provides you with the tools to build a custom grid framework that matches the needs of your website. The grid is NOT predefined for beginners, providing the ground for those trendy asymmetric designs that are impossible to create with traditional rigid frameworks; Susy gives you the flexibility and freedom to play with your design.

As for coding, Susy leaves the HTML alone and most of the magic happens in the Sass file that generates the CSS, therefore Susy is built to evolve with a project for the long run, or update it at any point. Maintainability is the cherry on top of this cake, since the HTML and the CSS are actually not paired.

Again, Susy is only a Grid Framework, and does not include any components, although some third parties are starting to arise as we'll see later on.



Ok, so let’s go through the top Pros & Cons of using Susy as a Grid Framework for any given project:



  • Super flexible
  • No need to add classes to markup, or very few.
  • Maintainable and extendable grids
  • Great examples, documentation and tutorials


  • Doesn't have any preexisting components
  • Doesn’t come with pre-defined breakpoints (you’ll have to create your own so this could be good or bad depending on your deadline).



Susy provides legacy browser support down to IE6 and 7 (which I know, no one should be using anymore, but the support is there), since it recognizes all the Compass Browser Support  features that provide a consistent cross-browser experience; it also allows you to output only the modern code in one file and only the fallbacks in another file. In case you were wondering, Bootstrap provides limited support for IE9 and very limited for IE8; not comparing, just saying.



As I mentioned earlier in the article, there are many responsive frameworks out there. Addressing them by popularity, these two are the closest to Susy and they both run on Sass:

  • Bourbon Neat (Sass with Bourbon ) – It relies entirely on Sass “mix-ins” and doesn’t need Compass.
  • Singularity (Sass with Compass ) – Some say it’s as good as Susy but documentation isn’t great.


450x360The latest version, Susy 2, is now standalone, meaning it doesn’t rely on Compass anymore. Although, if you want to keep using some of Compass’ productivity features then don't cut it loose just yet. In fact, even if slow, some Compass features like images dimensions, sprite builder and vertical rhythms among others, complement Susy’s workflow quite effectively.

The fact that Susy 2 doesn’t require Compass anymore still allows complementation with other Sass libraries such as Bourbon, which does have components and scaffolding that help prototyping and shaping websites faster:

  • Bitters which are Scaffold styles, variables and structure for Bourbon Projects
  • Refills which are Components and patterns
  • Bourbon even has a grid framework similar to Susy, as previously mentioned, called Neat.


That being said, why not just use Neat instead of Susy? Well, that’s a matter of personal preference, and many people do use it. Neat is also popular among Front-end developers. What seem to turn the scale in favor of Susy are its very extensive documentation, community and the important websites that were built with it.

Since Susy is now “just” Sass, one can use all these tools by gathering them in a single toolbox mix and have the best of both worlds.

I’m not implying Susy is dragging its heels on components, it's more like it first grew strong on the grid capabilities and now it seems to be moving forward by borrowing from other frameworks, like Singularity, and including pre-defined layouts from Salsa and Zen Grids. Therefore, Susy may surprise us at some point with “official” scaffolding and components in an upcoming release as Bourbon has, or maybe the community will contribute this on the go, we’ll see.



420x250Now don’t get me wrong here, Bootstrap is a powerful framework and it’s far from gone, I use it myself when delivery times are tight, so think twice before breaking away from it. Besides, we can actually use Bootstrap with Susy, as some authors suggest, by taking advantage of Bootstrap components and unrivaled prototyping capabilities (to date at least), and then gradually readjust the grid with Susy.

Although, if the idea is moving further away from standard grids and the usual stacking flow, then Susy is perfect for this from the start, but then we’ll need to find our own specific plugins and components and develop our own grids and behaviors. This, indeed, takes longer when done from scratch.



Finally, to answer the original question, projects best suited for Susy, first and foremost Susy fits better with projects where you’re aiming to go the extra mile on graphic design. If you want to get on the web designer’s good side to please the client, with Susy you can get as design-crazy as you want, no holds barred. Secondly, since your Susy website boasts amazing maintainability you can totally redesign at any point without having to change the HTML or the content.

I know, it sounds too good to be true, but it is and it’s worth the effort, as long as you (and the web designer) don’t have sensitive time constraints. That said, Susy is not for speed, unless you have your asymmetrical grids already sketched and figured out.