21.03.2015

I love Susy

There, I've said it.
Actually, it's been going on for a while now.
I first met Susy a couple of months ago and watched her from a distance, but there was no chemistry. Mind you, I did like her, but as I was seeing others, that's all there was, nothing more.

Who the h*ll is Susy?

Ok, ok. Susy isn't a person at all.
Susy is a Sass extension, a set of mixins, that allow you to create your own (flexible) Grid system, or as they describe it: A custom layout engine for Sass.
I'm pretty sure I lost a few of my readers now, so here is a little basic stuff: All the items you see on a website need some sort of lay-out framework to make sure that they are positioned as intended.
'Back-in-the-days' people abused tags like <table> to accomplish this. Now-a-days it's a big no-no to do that. If you are in doubt whether to use tables or not, then here's a great article to help you make a decision: tables for layout.

Other elements, like <div> and <span> combined with CSS were more suitable for the job as they gave more freedom and flexibility in dealing with different resolutions, browsers and devices.
Somewhere around 2011 the first CSS Frameworks appeared and made things easier for web developers because they could implement an out-of-the-box grid system that contained all the calculations, necessary for the default layouts.
As always good things come with a downside. Frameworks often contain a lot of stuff you don't need and they tend to require you to adjust your workflow, methods or code.

Susy takes it to the next level. She (I know I should use 'it', but...) enables you to create your own grid system by providing mixins that will do the math for you, calculating column widths, spans, gutters, padding, margins, etc.
Some existing grid system will also take the burden of the math from you, but Susy is so lean and flexible that she will provide you with a freedom in your work that may only be exceeded by doing the math yourself (and I suck in math).

Semantic HTML

I am a huge fan of keeping HTML as clean and semantically (neutral) as possible. HTML 'carries' the content and that's the only thing it should do. Presentation, design if you like, should be provided by the stylesheets.
Logical right? Well... HTML still has some presentational tags that can (but should not) be used.
A great example is the <i> tag. It's used to make a piece of text appear italic.
If you want to emphasize a text, the <em> tag would be more accurate, as it gives meaning to the encapsulated content. Making it appear italic, or bold, or flashing in red and green, is presentation, therefor it should be defined in the CSS.

One of the downside of some existing frameworks is that they require you to add presentational classes to your HTML in order to apply their grid system. Take a look at this piece of HTML:

<div class="news-item col-span-4">
 <h2>Hot news</h2>
 <p>Donec id elit non mi metus.</p>
</div>

Apparently this shows the HTML structure of a news item and according to the class '.col-span-4' it is 4 columns wide.
The class '.news-item' is semantically correct, the '.col-span-4' however is a presentational class and semantically doesn't belong in here.
The best practice is to solve this in the CSS, which would require a lot of math. And that's where Susy kicks in.

Sass

You can't apply Susy directly into your stylesheets. It requires Sass (Scss).
Sass is a preprocessor. It enables you to structure your CSS, use variables, nesting and mixins (a sort of functions).
Imagine a big 'classic' stylesheet, or probably a set of stylesheets, for a big website that has been running for a while now. And now imagine that you are asked to change color and font-size for some generic elements throughout the entire website. With Sass you can do such by changing two variables (assuming you stuck to good Sass coding practices).

As said before, Susy is a set of mixins that will take the math out of your hands. The HTML I used above would look like:

<div class="news-item">
 <h2>Hot news</h2>
 <p>Donec id elit non mi metus.</p>
</div>

The presentational class has been removed. Now, in order to apply the four column layout of our grid system we should hook it up to the '.news-item' class:

.news-item {
  @include span(4);
}

Susy will translate this to CSS that could look like this, depending on your layout definitions:

.item {
  float: left;
  width: 42.16234%;
  margin-right: 5.08%;
}

And there's more

Most frameworks will limit your options. Maybe you can only use 'px' as a unit, or 'em'. Maybe you can only use a set of 4 pre-defined breakpoints for your responsive designs.
Susy allows a lot more, because it's not a grid system, it's a toolset to create your own grid system. Like it says on their website: "Your markup, your design, your opinions | our math."

I intend to post some more articles on Susy, explaining how to start a project, how to set up a basic grid, etcetera, so keep checking my site.
The last paragraph of this post contains a collection of links to all kind of related resources, in case you don't want to wait.
If you have a link to some valuable Susy resources then please contact me. I will add it to the list.

So, is it better to use Susy than grid system XYZ?

NO! Susy will become obsolete eventually, just like the current grid systems will and like the old table-for-layout has.
You need to understand WHY you use Susy or grid systems instead of just learning HOW to apply them. If you manage to do that, you will have no problem adapting future web-tech.

What's out there?

Author:
Date:
21.03.2015
Categories:
Susy, UX, Sass
Share on LinkedIn