mm

August 11, 2015 WATB Team
Follow me on Twitter

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.

bower install susy --save

We then need to import Susy into our SASS.

@import "../bower_components/susy/sass/susy";

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.

.container {
	@include container(rem-calc(1440));
}

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

.container {
  max-width:90rem;
  margin-left:auto;
  margin-right:auto
}
.container:after {
  content:" ";
  display:block;
  clear:both
}

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.

<div class="container">

	<div class="small-12 medium-6 columns">
		<a href="#" class="logo">
			<h1>Glad Solutions</h1>
		</a>
	</div>

</div>

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

<div class="container">

	<a href="#" class="logo">
		<h1>Glad Solutions</h1>
	</a>

</div>

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

.logo {
	@include span(3 of 12);
}

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.

.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);
  }

}

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

.logo {
	@include span(7 of 25);
}

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.

@include layout(12 (60px 20px) split static);

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.

Looking for more tips?

Jump on our mailing list & get digital goodness straight to your inbox; including helpful tips, tricks and the latest articles surrounding marketing, web design and branding.

Sign up →