FrameworksUI

Why using Susy for grids?

Posted on by

Why using Susy over Bootstrap/Foundation?

Grid frameworks became very popular in the last years. And that is for a good reason. They simplified the way we develop HTML applications. We don't have to think about layout and understand browser twirks in detail. You can just follow a specific HTML structure, enrich those with "row" and "column" style classes and you are ready to go. Even responsive design was simplified to a minimum of cognitive load for developers.

But what are the pitfalls of using such frameworks? Why should I something like Susy, which is not even a framework with predefined classes?

First of all, frameworks like Bootstrap and Foundation depend on predefined style classes. You can modify them but you place those classes all over in your HTML. Let's try a simple example: You had a brainstorm meeting with your dev team. 80% of your team voted to use Bootstrap over Foundation. Fine! Decision is made, let's code.

Time goes by and we produced a bunch of HTML templates with classes like ".col-xs-12 .col-sm-6 .col-lg-8". We have a huge application, the business is successful. Meanwhile some developers left your company, new developers replaced them. Now you groom again. The team is so excited about the new version of Foundation and convinced your CTO to switch to Foundation. What now? You go through ALL your templates. And by all I mean ALL. You don't want to keep bootstrap.min.js in your head, right?

What changes do you have to perform? HTML? Yes! Style classes? Double Yes! JavaScript? Oh, of course, all custom modules depend on it. Let's assume you managed to go through this whole nightmare without any damage to your company (by damage I mean increasing your TTM). You end up with a new framework and new style classes like "small-6 large-2 columns". And again you coupled up the way you present your HTML to your framework.

A simple question: How do the following samples differ?

<div class="row">
    <div class="small-6 large-2 columns yellow"></div>
</div>
<div style="width: 1024px;">
    <div style="background-color: yellow !important;"></div>
</div>

Right, if you use the second sample, chances are high someone in your organization will punch you right in your face. Besides this funny fact the framework classes are reusable. Let's have a look at one more example, have you ever seen PHP code like this?

<?php

if ($showUsername) {
    echo "<div>You are logged in as ${userName}</div>";
}

Yes? What feels so wrong about it? Using HTML right in your PHP code? I'm sure we all learned to separate view and logic.

Why is using very specific CSS classes in your HTML something different? You directly influence the structure of your HTML by using framework classes.

And this is exactly the point where I suggest to use Susy. Susy is not a framework. It's a toolkit to (easily) build your own grid and view. It's harder to learn but it's easier to maintain. You can define the content as it is with classes only describing what is shown, not how it is shown:

<!-- Bootstrap example -->
<div class="row">
    <div class="col-xs-12 col-lg-6">
        <ul class="list-group">
            <li class="list-group-item">Germany</li>
            <li class="list-group-item">Switzerland</li>
        </ul>
    </div>
</div>
<!-- Susy example -->
<div class="countries">
    <ul>
        <li>Germany</li>
        <li>Switzerland</li>
    </ul>
</div>

In your SASS definition you can decide how those elements should be displayed. Your HTML is not aware of how it will be rendered.

.countries > ul > li {
    @include span(1 of 2);
}

By using breakpoints you can split this into a mobile, tablet and web view (or more views if you want). The good part is, you can split your code into components and do a fine-grained definition of styles for each device.

Why is this the better way?

  • You can change the presentation of your HTML without touching HTML.
  • You can change smaller components without touching the whole framework.
  • You can easily exchange representations for selected devices.
  • You write less CSS

Sounds good, what should I be aware of?

Susy has no eco system for custom datepickers, dropdowns, buttons, ... Chances are high that you will have to develop those components yourself. But in many cases this is a very good practise where you can learn a lot (implied you have the time to do so).