Get In Touch

Exploring Susy: A Lightweight Look

New projects bring up new ideas on how to approach the current project and future projects. While not everything may be apparent at the start of a project, some things begin to manifest as you get deeper into your work. For me it was the grid framework I was using, and how to make it do what I wanted in a more flexible way.

The grid when you want it, how you want it

Enter Susy. What if you could have the grid when you want it, change it to meet your needs, and have something do all the math for you? That’s what Susy does, and Susy does it well.

Susy allows you to create a grid with as many columns as you want, the gutter sizes that you want to use, and even lets you choose whether you want to place the gutter evenly spaced on both sides of your column or place it all on either the left or the right side. On top of that, you aren’t locked into one set way of doing this. Susy comes with a variety of options to help you create the grid you want.

Options, and even more options

I’m not going to go in depth on all these options as many are self explanatory if you’re already familiar with a grid system, but there are a few key options that help create the grid your way.

Columns and gutters

Most of the frameworks I’ve seen have used either 12 or 16 columns. That’s great, but what happens when you want to divide that space between 5 evenly sized items? You’re going to have a bad time. With Susy, you can specify how many columns you want to use, and there’s no limit to how many or how few you have. In the end Susy will give you the width based on a percentage.

Gutters also come in a variety of ways. You can choose to use paddings or margins, have the gutter be on one side or the other, or even have the gutter be split evenly on both sides of your column. The width of the gutter can also vary. To change the gutter you specify the size you want to use based on the width of one column.

Moving the breakpoints back into your CSS

I think one of the main reasons I prefer a grid system like Susy is that it allows me to stop plastering generic classes like ‘col-sm-6′, ‘col-md-4′, and col-lg-3′ all over the place and start working with the breakpoints in my Sass file. Susy builds on the power of Sass with a set up mixins that allow you to declare how many columns your elements will have.

  
    .grid_item {
      @include span(4 of 12);
    }
  

To go even further and include some breakpoints we can do the following:

  
    .grid_item {
      @include breakpoint(sm) {
        @include span(6 of 12);
      }
      @include breakpoint(md) {
        @include span (4 of 12);
      }
      @include breakpoint(lg) {
        @include span(3 of 12);
      }
    }
  

Note: The breakpoints are my own; Susy does provide some breakpoint functionality, but I prefer my own.

What we now have is basically the equivalent of adding three layout classes to your html file, but instead creating it in the CSS file and grouping them together under one class. And because the class can be applied to many different html items, we can easily change all of them by modifying the CSS later.

Only what you need

When using a framework, you tend to get the entire framework. With Sass we can pick and choose what we want, but we can still end up getting more than what we need. With Susy, you only get what you need. Building on some of the above code we would get something like this:

  
    @media (min-width: 960px) {
      .grid_item {
        width: 23.72881%;
        float: left;
        margin-right: 1.69492%;
      }
    }
    @media (min-width: 720px) {
      .grid_item {
        width: 32.20339%;
        float: left;
        margin-right: 1.69492%;
      }
    }
    @media (min-width: 480px) {
      .grid_item {
        width: 49.15254%;
        float: left;
        margin-right: 1.69492%;
      }
    }
  

While it does look like a lot of CSS, it is essential and shows exactly what Susy gives you. This was taken from the default 12 column layout using a gutter size of 1/4 of the column width.

Onward Susy

I’ve only touched the surface of Susy, but I do plan to continue using Susy in my projects. I’ve seen it open up a lot of room for improvements in my work and I no longer have to be stuck using a framework that does things only one way.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Leave a Comment

You Might Like

Subscribe to our Newsletter

Sign up to receive a monthly update from Pop Art, featuring articles, events, and news relevant to our business and the communities we serve. Your information is private and will not be sold to third parties.