A Complete Tutorial to Susy 2 Zell Liew

1 of 14

A Complete Tutorial to Susy 2

April 14, 2014

Coding, CSS, Intermediate

Compass, Sass, Susy

Susy is a helper tool that lets you created ultra customizable grids on the y easily.
Its been a while since Susy 2 is ocially released. If you loved Susy 1, you will denitely love to use
Susy 2 because it oers so much more exibility.
This is a two part tutorial for Susy 2, and in this tutorial, I will be sharing with you how to create the
Complex AG Grid with Susy 2.

Why Susy?
As I mentioned, Susy is a helper tool that lets you create any kind of grids easily without the need
do a ton of math. The beauty about Susy is that it separates presentational CSS from the HTML.
If you have used traditional grid frameworks like Foundation and Bootstrap before, you already
know that the grids that come with these frameworks already have xed widths and breakpoints.
Furthermore, classes have to be added to the HTML if you decide to change your layout.
Susy removes this layer altogether. You can immediately target any css class and apply a grid to it.
Yeah I know this is totally abstract and its dicult to grasp. Instead of only talking about theory,
we are going to use Susy 2 to help us build a complicated grid system devised by Arnaud Guera
(AG) that uses 10 columns. This grid looks like this

http://www.zell-weekeat.com/susy2-tutorial/

8/18/2014 12:58 AM

A Complete Tutorial to Susy 2 Zell Liew

2 of 14

Installing Susy 2
If You Dont Already Have Susy Installed
Susy requires you to have both Sass installed. If you dont have them installed, you can install
them with the following commands

$ sudo gem install sass

$ sudo gem install susy

If You Already Have Susy Installed

If you already have Susy installed and have Ruby RVM on your system, you can update the gems.

$ sudo gem update

If this doesnt work, it means you need to try the next method , or install Ruby RVM rst.
http://www.zell-weekeat.com/susy2-tutorial/

8/18/2014 12:58 AM

A Complete Tutorial to Susy 2 Zell Liew

3 of 14

The second method to installing Susy 2 is a little more manual. Its to uninstall the two gems
mentioned above and reinstall them. Its the best way to avoid any errors if you didnt go by the
update route.

$ sudo gem install susy

$ sudo gem install sass

$ sudo gem install sass

$ sudo gem install susy

Now that youre done installing Susy 2, we can now begin setting Susy 2 up.

Setting Up Susy 2
Likewise to the previous version, you need to require susy in the cong.rb le if you were to use
Susy 2.

# config.rb
require 'susy'

You now need to import and use Susy in your stylesheets.

// Importing Susy
@import 'susy';

Susy 2 has list of global defaults that are built into it. You can change the defaults with the code

// Configuring Susy 2 Global Defaults

$susy: (
key : value
);

Youll want to play around with the defaults and try them out depending on how you want to work
http://www.zell-weekeat.com/susy2-tutorial/

8/18/2014 12:58 AM

A Complete Tutorial to Susy 2 Zell Liew

4 of 14

with Susy. Ill go a little deeper regarding these defaults in another tutorial. You can use Susy with
the defaults immediately now, but since I love working with border-box and rem units, Im going to
change some defaults.

$susy: (
global-box-sizing: border-box,
use-custom: (rem: true
)
);

Note that Susy uses a uid layout by default. This means that width of the outer containing
element will be 100%.
If you like to use Susy with xed widths at certain breakpoints instead, change the
static

math

key to

. The major dierence between these two modes come in when responsifying your styles,

which will be covered in another tutorial.

Also note that youll have to include normalize and compass into the project as well. In all, the
initial conguration up to this part should be this.

@import "normalize";
@import "compass";
@import "susy";

// Configuring Susy Defaults

$susy: (
global-box-sizing: border-box,
use-custom: (rem: true
)
);

@include border-box-sizing;

HTML And CSS For The AG Grid

Since were going to create the same AG Grid as with the Susy 1 Tutorial , the html will remain
http://www.zell-weekeat.com/susy2-tutorial/

8/18/2014 12:58 AM

A Complete Tutorial to Susy 2 Zell Liew

5 of 14

exactly the same as before.

<div class="container">
<h1>The 10 column complex nested grid AG test</h1>

<div class="ag ag1">

<h2>AG 1</h2>
</div>
<!-- /ag1 -->

<!-- ag4 to ag7 are nested within ag2.-->

<div class="ag ag2">
<h2>AG 2</h2>
<div class="ag ag4">
<h2>AG 4</h2>
</div>
<div class="ag ag5">
<h2>AG 5</h2>
</div>
<div class="ag ag6">
<h2>AG 6</h2>
</div>

<!-- ag8, ag9 and ag10 are nested within ag7 -->
<div class="ag ag7">
<h2>AG 7</h2>
<div class="ag ag8">
<h2>AG 8</h2>
</div>
<div class="ag ag9">
<h2>AG 9</h2>
</div>
<div class="ag ag10">
<h2>AG 10</h2>
</div>
</div>
<!-- /ag7 -->
</div>
<!-- /ag2 -->

<div class="ag ag3">

<h2>AG 3</h2>
</div>
<!-- /ag3 -->

http://www.zell-weekeat.com/susy2-tutorial/

8/18/2014 12:58 AM

A Complete Tutorial to Susy 2 Zell Liew

6 of 14

</div>
<!-- /container -->

Simply speaking, whenever something is found within another div, you should nest it within the
previous div.
In this case, AG 4 to AG 7 will be nested under AG 2 while AG 8, AG 9 and AG 10 are nested under AG
7.
The CSS for the grid backgrounds will remain the same as well.

/**
* Styles for AG grids & Container
*/

.container {
background-color: #fbeecb;
}

.ag1, .ag3 {
background-color: #71dad2;
}

.ag2 {
background-color: #fae7b3;
}

.ag4,.ag5,.ag8,.ag9 {
background-color: #ee9e9c;
}

.ag6 {
background-color: #f09671;
}

.ag7 {
background-color: #f6d784;
}

.ag10 {
background-color: #ea9fc3;
}

http://www.zell-weekeat.com/susy2-tutorial/

8/18/2014 12:58 AM

A Complete Tutorial to Susy 2 Zell Liew

7 of 14

/**
* Text Styles
*/
h2 {
text-align: center;
font-size: 1rem;
font-weight: normal;
padding-top: 1.8rem;
padding-bottom: 1.8rem;
}

Now that were all prepped up, we can dive into the some more Susy details.

Important Susy 2 Mixins and Functions

Before diving straight into using Susy 2 for the grid, lets go through three very important mixins
and functions used in Susy. If you understood these things, you can do anything with Susy.

The Container Mixin

The rst thing you need to do is to dene a container for Susy to do its magical calulations.

// The Container Mixin

@include container( [<length>] );

// Note: Optional arguments are enclosed in []

The container mixin has an optional length argument, with allows you to set a max width to the
container. If this number is not found, Susy will default to

max-width: 100%;

instead.

If you are using static grids, Susy advises that you should make it auto instead and let Susy
calculate the max width for you.
To keep it auto, you can omit the length argument.

http://www.zell-weekeat.com/susy2-tutorial/

8/18/2014 12:58 AM

A Complete Tutorial to Susy 2 Zell Liew

8 of 14

@include container;

Span (Mixin)
The span mixin is the heart of Susy layouts. Susy made it extremely exible.
I generally follow the Susy way for writing my layouts.

@include span(

If you used Susy 1, you would have noticed that this is very similar to the

span-column

mixin, with

very subtle dierences.

Let me break this down and full explain whats happening here.
<width>

refers to the number of columns the element going to take up.

[<wide / wider>]

is a optional argument lets you expand the width of the column to include 1 or 2

more gutters respectively

of

is a keyword to let Susy know that the layout is coming up.

<layout>

is the context of the container, along with other optionals that dene the layout.

(Context refers to the number of columns the parent container is made up of).
[<last>]

is an optional argument that tells Susy that this element is supposed to be the last item

in the row.
An example of this at work is

// This has a width of 3 columns + 1 gutter, out of 9 columns and is supposed to be the last item within the context.
.some-selector {
@include span(3 wide of 9 last);
}

Span (Function)
The Span function is similar to the span mixin, with the exception that it only returns the width of
the element. You will only need the

http://www.zell-weekeat.com/susy2-tutorial/

<width>

<wide/ wider>

and

<layout>

here.

8/18/2014 12:58 AM

A Complete Tutorial to Susy 2 Zell Liew

9 of 14

// This has a width of 3 columns out of 9 columns

.some-selector {
width: span(3 of 9);
}

This span function makes life a ton easier by not having the need to remember any margins or
padding mixins that susy previously uses. Now, you can just use the span function to get the
correct width to pad.

// This has a padding of 1 column out of 9 columns

.some-selector {
padding-left: span(1 of 9);
}

Gutter Function
The gutter function takes only one argument, the context.

// This outputs margin that equals to 1 gutter width in a 9 column layout

.some-selector {
margin-right: gutter(9);
}

These are all the important functions you need to know when using Susy 2.

Building The AG Grid With Susy 2

The rst the to do when using Susy is to establish the container. Our container in this case is
.container

.container {
@include container;
}

http://www.zell-weekeat.com/susy2-tutorial/

8/18/2014 12:58 AM

A Complete Tutorial to Susy 2 Zell Liew

10 of 14

Since we also know that the container is going to hold oated elements, were gonna give it a
clearx.

.container {
// This is the default clearfix from Compass. You can opt to use other clearfix methods
@include clearfix;
}

We rst need to create the layouts on AG1, AG2 and AG3. Upon inspection, the whole container is
supposed to take up 10 columns, where AG1 and 3 are to take up 2 columns each and the rest is
taken up by AG2. AG2 needs a clearx as well since its going to be a container for AG 4 to AG 10.

.ag1 {
@include span(2 of 10);
}

.ag2 {
@include span(6 of 10);
@include clearfix;
}

.ag3 {
@include span(2 of 10 last);
}

If you take a look at the output now, you should see this

http://www.zell-weekeat.com/susy2-tutorial/

8/18/2014 12:58 AM

A Complete Tutorial to Susy 2 Zell Liew

11 of 14

AG4 and AG5 are nested within AG2 and they each hold a width of 3 columns each

.ag4 {
@include span(3 of 6);
}

.ag5 {
@include span(3 of 6 last);
}

Alternatively, you can make use of the last mixin and write it this way. The last mixin just changes that element to

.ag4,.ag5 {
@include span(3 of 6);
}
.ag5 {
@include last;
}

http://www.zell-weekeat.com/susy2-tutorial/

8/18/2014 12:58 AM

A Complete Tutorial to Susy 2 Zell Liew

12 of 14

AG4 and AG5 should now fall nicely in place.

AG6 holds 2 columns and AG 7 holds 4 columns, and AG 7 is the last item in the row. You should
probably know the drill by now.

.ag6 {
@include span(2 of 6);
}

.ag7 {
@include span(4 of 6 last);
@include clearfix;
}

http://www.zell-weekeat.com/susy2-tutorial/

8/18/2014 12:58 AM

A Complete Tutorial to Susy 2 Zell Liew

13 of 14

And lets nish up the last few items for the AG Grid

.ag8 {
@include span(2 of 4);
}

.ag9 {
@include span(2 of 4 last);
}

.ag10 {
clear: both;
// Alternatively, you can now use the span mixin with the full keyword to tell Susy this should be a 100% width
// @include span(full);
}

http://www.zell-weekeat.com/susy2-tutorial/

8/18/2014 12:58 AM

A Complete Tutorial to Susy 2 Zell Liew

14 of 14

That was how you could use Susy 2 in the nutshell.

In the next article, we will go through how to build a responsive template with Susy 2 using the AG
Grid as an example as well.
I hope this was helpful for you. If you have any comments or questions, leave them down and Ill
reply as soon as I can.

Get 4 chapters of Learning Susy for free!

Did you nd this article helpful? You'll nd even more hidden gems about Susy and how to
completely master it in my book "Learning Susy". Whats more, you can now get 4 chapters of the
book for free! Grab it now! :)

http://www.zell-weekeat.com/susy2-tutorial/

8/18/2014 12:58 AM