Getting started with Susy

3 min read
Watb Team
The Susy Logo

Disclaimer: This post documents my first steps with Susy – please excuse any errors!

Susy is effectively a bunch of sassy-math that allows you to get rid of all that bloated grid mark up once and for all, and move away from rigid column based layouts. I’ve never used Susy before having become accustomed to building out projects with Foundation.

But we all need to try something new sometimes and figure out methods that solve our problems with development. I’ve always hated grid mark up so this should hopefully be a fun and rewarding journey. To start off with, I created my project folder and a new repository on Bitbucket.

Next, we need to install Susy. I’ve used Bower but there are other methods – depending on your environment and preferred method of working.

<!-- HTML generated using hilite.me --><div style="background: #f8f8f8; overflow:auto;width:auto;padding:.8em .6em;"><pre style="margin: 0; line-height: 125%">bower install susy --save
</pre></div>

We then need to import Susy into our SASS.

<!-- HTML generated using hilite.me --><div style="background: #f8f8f8; overflow:auto;width:auto;padding:.8em .6em;"><pre style="margin: 0; line-height: 125%">@import &quot;../bower_components/susy/sass/susy&quot;;
</pre></div>

Basic Susy Usage

As a fan of Foundation, I’ve gotten used to working with its rem-calc function. So after grabbing the function from Foundation and pasting into my _functions.scss file, I created a container.

<!-- HTML generated using hilite.me --><div style="background: #f8f8f8; overflow:auto;width:auto;padding:.8em .6em;"><pre style="margin: 0; line-height: 125%">.container {
@include container(rem-calc(1440));
}
</pre></div>

This will spit out the following CSS. You can also use percentages with Susy if you’d prefer a percentage based layout.

<!-- HTML generated using hilite.me --><div style="background: #f8f8f8; overflow:auto;width:auto;padding:.8em .6em;"><pre style="margin: 0; line-height: 125%">.container {
 max-width:90rem;
 margin-left:auto;
 margin-right:auto
}
.container:after {
 content:&quot; &quot;;
 display:block;
 clear:both
}
</pre></div>

Now we want to start laying out our page elements within our container. Previously, with Foundation/Bootstrap or other grids, we.d have mark up like this.

<!-- HTML generated using hilite.me --><div style="background: #f8f8f8; overflow:auto;width:auto;padding:.8em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #008000; font-weight: bold">&lt;div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">&quot;container&quot;</span><span style="color: #008000; font-weight: bold">&gt;</span> <span style="color: #008000; font-weight: bold">&lt;div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">&quot;small-12 medium-6 columns&quot;</span><span style="color: #008000; font-weight: bold">&gt;</span>
<span style="color: #008000; font-weight: bold">&lt;a</span> <span style="color: #7D9029">href=</span><span style="color: #BA2121">&quot;#&quot;</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">&quot;logo&quot;</span><span style="color: #008000; font-weight: bold">&gt;</span>
<span style="color: #008000; font-weight: bold">&lt;h1&gt;</span>Glad Solutions<span style="color: #008000; font-weight: bold">&lt;/h1&gt;</span>
<span style="color: #008000; font-weight: bold">&lt;/a&gt;</span>
<span style="color: #008000; font-weight: bold">&lt;/div&gt;</span><span style="color: #008000; font-weight: bold">&lt;/div&gt;</span>
</pre></div>

With Susy, we can do away with out grid mark up.

<!-- HTML generated using hilite.me --><div style="background: #f8f8f8; overflow:auto;width:auto;padding:.8em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #008000; font-weight: bold">&lt;div</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">&quot;container&quot;</span><span style="color: #008000; font-weight: bold">&gt;</span>
<span style="color: #008000; font-weight: bold">&lt;a</span> <span style="color: #7D9029">href=</span><span style="color: #BA2121">&quot;#&quot;</span> <span style="color: #7D9029">class=</span><span style="color: #BA2121">&quot;logo&quot;</span><span style="color: #008000; font-weight: bold">&gt;</span>
<span style="color: #008000; font-weight: bold">&lt;h1&gt;</span>Glad Solutions<span style="color: #008000; font-weight: bold">&lt;/h1&gt;</span>
<span style="color: #008000; font-weight: bold">&lt;/a&gt;</span><span style="color: #008000; font-weight: bold">&lt;/div&gt;</span>
</pre></div>

Then in our CSS, we’ll use a Susy span.

<!-- HTML generated using hilite.me --><div style="background: #f8f8f8; overflow:auto;width:auto;padding:.8em .6em;"><pre style="margin: 0; line-height: 125%">.logo {
@include span(3 of 12);
}
</pre></div>

Media Queries

Susy allows us to be much more complex with how we lay out elements on the page on different screen sizes. With Foundation, you’re limited to three break points – small, medium and large. With Susy, we can give our elements different column widths at whatever break point we want.

<!-- HTML generated using hilite.me --><div style="background: #f8f8f8; overflow:auto;width:auto;padding:.8em .6em;"><pre style="margin: 0; line-height: 125%">.logo {
@include span(12 of 12);
}
@media screen and (min-width:800px){
 .logo {
 @include span(8 of 12);
 }
}
@media screen and (min-width:1440px){
 .logo {
 @include span(6 of 12);
 }
}
</pre></div>

We’re not limited to a 12 column grid either. We can use as many columns in our grid as we need.

<!-- HTML generated using hilite.me --><div style="background: #f8f8f8; overflow:auto;width:auto;padding:.8em .6em;"><pre style="margin: 0; line-height: 125%">.logo {
@include span(7 of 25);
}
</pre></div>

You’ll know enough now to get up and running with Susy and beginning to lay out your pages using basic grids – with out grid mark up and without grid CSS. You’re already developer leaner, more efficient code.

But that’s not all Susy can do. Susy has a raft of other tricks up her sleeve that can prove extremely useful. For example, we can use layout to create a grid out of the box.

<!-- HTML generated using hilite.me --><div style="background: #f8f8f8; overflow:auto;width:auto;padding:.8em .6em;"><pre style="margin: 0; line-height: 125%">@include layout(12 (60px 20px) split static);
</pre></div>

More Susy Fun

So there we have a basic introduction to Susy. As you can see, getting started with basic grids is pretty easy but we’ve saved a lot of time we’d have spent writing grid mark up. We also save file size in our CSS and HTML, so our web projects will be faster and easier to work with. It’s tools like Susy that justify why CSS Pre-Processors such as SASS can be so incredibly useful. Without Susy, we’d either depend on a grid CSS system or we’d have to manually size up each component.

For more advanced Susy tutorials, check out their page: http://susy.oddbird.net/demos/

Please share any Susy tips or tricks you have in the comments below.

Susy is effectively a bunch of sassy-math that allows you to get rid of all that bloated grid mark up once and for all, and move away from rigid column based layouts

Related Posts

Posts you may also like