Build Web Layouts Easily with Susy

I've been coming around to the idea of using Susy (a Sass add-on for grids) lately. I like the idea of grids-on-demand, rather than a strict framework (no matter how simple). We even added support to CodePen. Last week I ran into Eric Suzanne, the creator of Susy, and I told him Zell Liew was working on a guest post for this site. He was "Oh, Zell! Yeah he's awesome, he's like the unofficial promoter and trainer for Susy." And so, here's Zell introducing us to Susy!

Susy provides you with the tools to build your own grid layouts that match the needs of your website. It gives you the freedom and flexibility to build any design that you can imagine. It doesn't matter if your design has 5, 14 or 48 columns. Unequal width columns? Susy's got you covered.

Why would you pick Susy over the million other frameworks out there on the internet? You may never even heard of it before. What if it's beauty is only skin deep?

Susy is one of the best things that happened to me in terms of my front-end development workflow over the past few months. It has helped me out so much that I decided to write a book about it to share it's merits with the world. It's an in-depth guide on Susy and how you can use it to easily create any website design you want.

Still not convinced? Well then, all I ask is you give me the opportunity to try and change your mind through this article. We'll see why Susy is so special, and how it can help you out.

As they say, there's no substitute for experience, so I'm going to walk you through the Susy experience of creating a layout. And you can compare it with the experience of creating the same layout by hand (which involves calculating pixels...by yourself).

We'll start off simple, and progress on to more fancy layouts once you've gotten to know Susy a bit better.

Before we start, there are some things you must know about our friend, Susy. You MUST use the Sass preprocessor language for it, which means you have to at least know how to convert Sass into CSS. And no, you can't use LESS. Sorry, LESS folks!

Creating a Very Simple Layout

CSS-Tricks has a pretty straightforward layout, so let's use that for our first example.

Have a look at the blog and you'll find that CSS-Tricks is made up of two content areas: the main content and the sidebar area.

We'll assume CSS-Tricks uses a 12-column layout for the whole site, and it's content area takes up 8 of 12 columns while the sidebar takes up 4 of 12 columns. Quite standard stuff if you've worked with grids before.

If you have used Bootstrap or Foundation before, the markup for this site layout would be:

Simple, yes. But Bootstrap and Foundation also come with a lot of baggage, that a lot of the time, we just don't want to deal with. If you don't need most of the other stuff that comes with Bootstrap and Foundation, Susy would be a much better fit for you.

A stoic developer who hand-codes all his sites from scratch, no frameworks or frills, would probably write his mark-up like so:

To create an 8-column content and 4-column sidebar, you'll have to measure widths of the content, the gutter and the sidebar. One rule of responsive web development is to output these widths in percentages, so you'll have to convert them accordingly.

A quick note before we continue further: I love to set the box-sizing property to border-box for all of my web elements, and I highly recommend you do the same as well. Chris has written extensively about box-sizing here.

Anyway, the hand-coding from scratch method can start to get tedious if you have multiple layouts to work with. Imagine calculating all those percentages every single time!

That's precisely what Susy helps you with. She does the math for you.

Creating the Simple Layout With Susy

When using Susy to create any layout, you'll first have to let it know what settings you want it to use. There are a whole bunch of default settings that Susy uses to kickstart every project.

I'm assuming this is your first experience with Susy, so we'll stick with most of the defaults for now. You do need to change three properties though, and you change them by declaring them on the $susy map.

At the same time, let's also apply the border-box property like we have done above.

It is recommended that you use the container mixin to create the container for the website whenever you use Susy. In our case, this container is .wrap

.wrap {
@include container;
}

This time round, instead of manually calculating the exact pixels and percentages for the layout, we're going to tell Susy to do it for us. To do this, you'll just have to tell Susy that content is 8 columns and sidebar is 4 columns.

We do have to let Susy know that sidebar is the last item on the row so it can make the necessary adjustments.

Did you notice that the CSS output is exactly what we needed to create? Susy sure saved us a lot of time.

We're not done with the CSS-Tricks layout yet though. If you scroll down to the bottom of the site, you'll find the social media area, and you can also see that there are 10 social media items within this area:

If you use a traditional grid framework in your design, you're pretty much in trouble. As far as I know, there's really no simple way to quickly manipulate the number of columns from 12 to 10 using frameworks like Bootstrap or Foundation without affecting the rest of the layout.

Susy doesn't bind you with such rules. You are free to create your own rules. After all, it's your grid.

Your Grid, Your Rules

Anything is possible when you're making your own grids. Before we move on to the CSS, let's first get the mark-up correct. It should look something like this:

It's so much simpler if we get Susy to do it for us. You'll just have to tell Susy that there are 10 columns in all (instead of 12), and each social item takes up one column.

.social {
/* Adds a padding of 19px to each side of the .social container */
padding: gutter();
/* Adding a clearfix because all children elements are floated */
@include clearfix;
.social__list-item {
/* Telling Susy that there are 10 items, and each takes up 1 row */
@include span(1 of 10);
/* Another way to tell Susy that this is the last item in the row */
&:last-child {
@include last;
}
}
}

And Susy produces the same exact CSS properties that we need for the grid!

For instance, webkit browsers round these pixels down, and 10.4px will be rounded down to 10px. The larger the number of items in your layout, the larger the occurrence of each rounding error. So our 10-item error is clearly showing up in webkit browsers.

Such errors are unbecoming and we simply cannot have that.

Dealing With Subpixel Rounding Errors

One method is make sure the percentages don't generate subpixels at all. But
that's not a good idea because you're going to be stuck with either a non-responsive website, or one that snaps to different grid widths.

There's another method, which I call the Isolate Technique.

This method is slightly more advanced and requires you to know more about laying out elements with the isolate technique that was developed by Jamie Hill. This technique has been used in the battle-tested zen grids for a long time. If you're familiar with Zen grids, you'll know what I'm talking about here.

If not, let's examine how to use this technique.

The Isolate Technique

The premise of the isolate technique is to reduce the compounding effects of rounding errors by positioning them right where they should be with specific margins.

The requirements of using this technique are:

Each element must have a margin-left property to position itself in the correct position.

Each element must have a margin-right property of -100% to pull the next item to the extreme left edge of the container.

This technique can be quite confusing if you're not familiar with negative margins. Let's go through a full step-by-step explanation on how it works.

Say you need to create a 3-column layout:

We'll go through the positioning of each item one-by-one. Item 1 is quite straightforward.

It has a margin left of 0, so it sits on the start line.

Then it pulls the next item (Item 2) back to the start line with a margin-right of -100%.

Item 2 has been pulled to the start line by Item 1 before it's own CSS properties kick in.

Item 2 then positions itself with a margin-left property that is the percentage value of up 2 columns and 2 gutters, positioning it exactly on the third column.

Item 2 also has a margin-right property, which pulls the next item (Item 3) to the start line.

Item 3, gets pulled to the start line by Item 2 before its own CSS properties kick in.

It is then positioned on the 5th column by its margin-left property that is a percentage value of 4 columns and 4 gutters.

And it pulls the next item to the start line and the pattern repeats itself for the number of items in total.

If any item needs to start on a new line, it has to clear the float from its previous item with the clear: left property.

And to align it to with the first column (positioned on the start line), it has to change its margin-left property back to 0 to place itself there.

That's how the Isolate Technique work. Now that you understand it, we can use it to deal with the subpixel rounding issue.

Solving Subpixel Rounding Errors

We have to position each item manually with the isolate technique, and Susy can help us with that.

Susy has a convenience function that helps you skip ALL the manual stuff. It's called the gallery mixin.

Now that we've built up some momentum, let's take it up a notch and make the layout responsive.

Making the Layout Responsive

Responsive websites have became increasingly important and I'll be selling you short if I didn't talk about how to make responsive layouts with Susy.

The very first step to creating responsive layouts is to make sure that you're familiar with how media queries work. Pay special attention to the Mobile-First media queries in that article as we're going to be using them.

For simplicity's sake, let's only create a layout with two breakpoints - one for the mobile view that begins at 0px and ends at 700px; and another for the desktop view that begins at 700px.

In the mobile view, both the .content and .sidebar sections take up a full 100% of the viewport. After 700px, .content and .sidebar will be split into 8 columns and 4 columns respectively.

You don't need to create any styles for the mobile view because <div> blocks takes up 100% width by default. What you need, however, is to make sure the desktop layout kicks in once the viewport hits 700px.

Coding a responsive layout by hand is the same as coding a responsive layout with Susy, only Susy makes things faster. You use the exact the same technique and media queries.

The next bit is the social media section. This is how it looks like in the mobile view.

Instead of having each item take up 1 of 10 columns, each item now takes up 2 of 10 columns on the mobile view, and you can do this by using span(2 of 10).

Note: You might be wondering why not use 1 of 5 columns instead. There are slight nuances between span(1 of 5) and span(2 of 10), and a picture best explains it:

These are fundamentally different layouts because of the number of gutters involved. You can always use the 1 of 5 option but I'll stick with 10 because the size of the gutters are then much closer to 12.

We'll call the gallery mixin again, and add one gutter below each item to provide some separation between the rows.

Working with Susy is just like working with vanilla CSS. The key difference is that Susy is a math-whiz.

Susy is so good at math that it can allow you to create wacky asymmetric grids that have columns of different sizes.

Let's try creating the layout for CSS-Tricks using an asymmetric grid.

Making The Layout With Asymmetric Grids

Declaring columns is a tiny bit different when working with asymmetric grids. You tell Susy the number of columns and the ratio of their sizes with a Sass list. Since CSS-Tricks has content that is twice the width of the sidebar, the columns can be represented by a 2 1 list. This means that there are two columns, one of them is twice the width of the other.

You'll also have to set the output mode to isolate on Susy's global settings:

$susy : (
columns: 2 1,
output: isolate,
)

Instead of saying content has 8 columns now, we say that content has 1 column. Susy is smart enough to know the size of the column if you tell her its location. In this case, content is the first item.

.content {
@include span(1 first);
}

Likewise, you'll have to let Susy know how many columns sidebar takes up and where it is located. In this case, sidebar takes up the second column, which coincidentally is also the last item on the row.

.sidebar {
@include span(1 last);
}

This is how it will look:

There is a lot more to asymmetric grids and it would take a whole new article to show you how to build them with Susy. I've have created a simple design that explains the concepts of asymmetric grids on my blog that uses the following as an example.

In addition, I wrote about creating an asymmetric layout comprehensively in Learning Susy with a more realistic example that was based on Nathan Ford's design. You may want to grab the book if you want to find out more about it.

Conclusion

Well, we've reached the end of this introduction to Susy, as well as some peripheral (but important) matters like subpixel rounding errors. I hope you are at least a little bit convinced to give Susy a try.

In fact, there is so much more to Susy than what I could cover here. So I'm going to refer you to 5 sample chapters of my book on Learning Susy. Have a read through and you'll learn how you can use Susy to do so much more. Also, if you have any questions about Susy, or just front-end development in general, feel free to contact me.

Depends on your compatibility needs.http://caniuse.com/#search=flexbox
Short answer, poor IE support and dodgy in other places. If you don’t care about these things, though, then flexbox is pretty awesome.

Susy is more about traditional web design processes, where the designer uses real columns and ratios (rather than the slightly more fluid approach of flexbox).

Flexbox is great, though theres one issue that I remembered I read, but can’t seem to find the link.

I read that flex box displays the content first before flexing it down, so in the case of a website that loads slightly slower, the layout can be messed up initially, then suddenly snaps back when its done running.

Not sure whether it only happens with the old flex box though, a further research is probably needed for that. Otherwise, flex box is great as well.

And I completely agree with Jonathan, with Flexbox, its difficult to do the column, and gutter ratio thing, which is part and parcel of traditional web design processes, and that makes it difficult for me to use it

Can Suzy handle a layout of columns that are changing in number depending on browser width fluidly? For example, in the social icons, imagine there were a gallery of 100 of those, and they started 10 per row, and steadily dropped down to 9, 8, 7 … all the way down to four towards at the low end resolutions?

Would you manually have to do a media query breakpoint for each time the number of columns per row changed?

Interesting.
I usually just containers at a set pixel or percentage width with percentages for the grid, whether that’s bootstrap or another grid system.
The grid sits in its own CSS file. Then custom elements that differ from the grid are hand coded. In general I don’t find this to be too tedious. In most cases, I don’t have to stray from the grid.

There are a couple of ways to work with Susy. In the method I chose above, you’ll have to work out which item is the very last at every breakpoint. In other methods, like with a gutter-position of inside or split, that’s not necessary.

I chose to use float because its just easier. Inline-block introduces these weird little spaces on the side and bottom of the content and its pretty difficult (imo) to make it perfect without hacks like margin-right: -3px. I personally would prefer no hacks on my CSS :)

We have to position each item manually with the isolate technique, and Susy can help us with that.
Susy has a convenience function that helps you skip ALL the manual stuff. It’s called the gallery mixin.
And the CSS it outputs uses the isolate technique mentioned above.

Just pointing out that this output CSS can still be improved immensely by grouping the common properties in the .social__list-item class, like so:

This reduces the output code and works great if you only need to worry about one layout. If your layout changes at different breakpoints, you’ll want to make sure the clear: none is able to override the clear:both at each of these breakpoints.

This can be difficult to do because :nth-child adds specificity to the CSS. And it takes a lot more effort to make sure the code is correct.

If you use the SASS version you can use the grid-row and grid-column mixins combined with media queries to really fine tune a lot of stuff and not have to rely on the html.

But the grids in Susy appear to be definitely more powerful, especially the gutter positions. You can collapse a gutter in foundation, removing the margins and padding, but then you can run into other issues. Looks like Susy handles this a lot better, among other things.

Good article. I used Susy already and really like it so far. The only thing I don’t like is, that the code which Susy outputs is far away from DRY. Every time you use the span() mixin (or any other mixin of course) the same code is produced (of course). It would really be great if Susy would “know” that and use extends instead as often as possible.

While I’m really no fan of frameworks, I think it’s handled better by them because simple classes are used, which keeps things much DRYer. But the downside of course is that you can’t change an element with “grid_4” to “grid_2” in a responsive website. That’s a huge downside I think.

Yeah I agree that Susy could potentially be much DRYer, and there’s probably lots of ways to do so. Maybe we should dig into the code and submit an improvement :)

Its really kinda hard to think of all the possible @extend scenarios though.

The downside is a deal breaker to me. Just having to imagine putting all these classes in HTML and changing them afterwards makes me dread! To top it off, I find that it’s quite likely that the layout will change considerably while prototyping, and Susy just makes things easier.

There’s one real downside to Susy I think. It’s that you’ll really have to know CSS to be able to use it well. And that’s going to be a deal breaker for many other people out there.

To be DRY or not, is more a matter of preference and how you do your own work. So if you have a basic layout that doesn’t have lots of different layouts, then you’ll be fairly DRY anyway, but more importantly you won’t have style sheets littered with unused rules.

Frameworks, by their very nature have a huge amount of (in general, Bootstrap and Foundation) unused grid classes.

As for not changing an element on a responsive site, you’re slightly off. Bootstrap for example uses 4 possible combinations of screensize/layout on a block. col-lg-*, col-md-* and so on, allowing you to go from x cols to whatever you want at whatever breakpoint you want.

I’ll definitely be giving Susy a run though. I much prefer coding an .blog-article opposed to .col-lg* blah blah. It makes your sass so much clearer to use and give you absolute control, as opposed to someone else’s perception.

Interesting stuff indeed, but like Christian Krammer said, it’s not very DRY. Then again, when you come to think of the a system, how much declarations do we really need? From what I see, you can simply create couple of classes for articles, galleries, header, footer, global layout etc., and then (re)use it in your whole project.

Frankly, when it comes to DRY vs possibility to change a crucial part of the design while in development, I always go with the latter. It’s like the problem I am facing in my day job now – we had a field with six blocks, but now the designer deciced, that we need seven blocks. And, since we use bootstrap, we have a problem. Looking at Susy, this would be a question of changing one line.

I don’t mind Susy not being super DRY. The number of lines of code Susy creates for possibly all your layouts will likely pale in comparison to the number of lines of codes for the rest of the CSS anyway.

I believe you should restrict the number of different layouts to a minimum no matter what site you’re trying to create. The larger the amount of different layout patterns, the larger the chance of your website design being incongruent. If you use the same layouts, then there really isn’t a problem at all.

I think there are way to many variations and technologies out there and its to the point now where it is just making the water muddy … not actually improving anything … and since nobody can actually know all of them … we will soon run into a re-run scenario … where people were just doing their own thing because they didnt know any better … but this time around we will have seen the past and refused to learn from it and this time we will have hundreds of different ways to produce a site(app) and a designer who was handed the code and ORDERED to FIX THIS or IMPROVE THAT … and the only thing they will be doing is scratching their head simply because they are human …

Have you had a look to Scout? it is a tool just like winLess but for SCSS: you launch it and it monitors all SCCS files on a selected folder, compiling them when saved, so no Ruby, gem and so on.
or you can use the Bracket editor, where you can install a plugin to compile LESS and/or SCSS files
regards

Thought I’d give this a go but I seem to have fallen at the first hurdle.
under Creating the Simple Layout With Susy
my code does not compile to match your css file – it is missing all references to .wrap but I can’t see why it should.
The following is missing

We have a pretty good* newsletter.

Email Address

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans Pro and Source Code Pro. It is made possible through sponsorships from products and services we like.