Skip to main
Article

Susy Next, The Second Alpha

Go download & play with it!

We haven’t written full docs yet, and this blog post will be vastly incomplete, but I’ll give you a quick rundown of where we’re going. This is all open to change, of course. There’s a reason we’re still in alpha.

The main difference you will notice from Susy 1.0 is a “natural-language” syntax that allows you to adjust settings more quickly and easily on the fly. You can also go gridless, and we’ll still help you manage your layouts.

The main layout mixin is called span and allows you to span columns on a grid, or span any width you want, and forget about grids entirely.

// span 50%
@include span(50%);

// span 300px;
@include span(300px);

// span 3 columns
@include span(3);

// span 4 of 12 columns
@include span(4 of 12);

// span the last 3 columns in a 5-column row
@include span(last 3 of 5);

// isolate an item in the last 3 columns of a 5-column row
@include span(last 3 of 5 isolate);

// isolate 2-col width, in the 3rd of 12 columns
@include span(2 at 3 of 12);

// anything can be arbitrary: width (30em), gutter (20px), & location (30%)!
@include span(isolate 30em gutter 20px at 30%);

You can also use various keywords to change your output from the defaults. Output static or fluid units; move gutters before, after, split, or inside; isolate or float elements; and so on.

In Susy 2.0, you still can set individual settings, but you can also contain an entire grid in a single argument. That allows us to change grids easily:

$container: 80%;
$columns: 12;
$gutters: 1/4;
$gutter-placement: before;

// or...
@include set-grid(80% 12 1/4 before);

Let’s dissect that.

Here are a few grids:

$susy-1-default: 12 (4em 1em) after;
$960-ish: 12 (60px 20px) inside static;
$asymmetrical: (2 8 2) 1/3 isolate;

// set a grid globally
@include set-grid($susy-1-default);

// use a grid locally
@include use-grid($960-ish) {
/* This code will use the $960-ish grid... */
}

You can use set-grid() to establish new grids anywhere you need, or use-grid() { ... } to use a new grid for one block of code.

As you can see, we’re trying to make the system as flexible as possible, so you can create the layouts that work for you.

Containers are simple with the container mixin, and the grid syntax you already learned.

@include container($grid);

Of course, we’ll default to any grid you already set globally. you can also pass an arbitrary width, or add keywords to justify your container left, right, or center.

// 960 container, justified left
@include container(960px left);

While you’re at it, you can show or hide the grid background for that particular container:

@include container(show);

You can now create a simple gallery layout using either isolation or basic float techniques. The syntax should be familiar already:

@include gallery(2 of 12 isolate);

Media-query handling hasn’t been built in yet. We recommend that you use the brilliant breakpoint plugin by Mason Wendell. We’ll add a bit of integration in before 2.0 stable, but for now you can just add the use-grid() mixin inside any media-queries to change your grids:

// using breakpoint
@include breakpoint(50em) {
@include use-grid($my-grid) {
/* Your Code Here */
}
}

Recent Articles

  1. Article post type

    When Our Tools Hold Us Back

    What happens if the ‘pace layers’ get out of sync?

    Ask not just: How well does it work? But also: How well does it fail? What happens when something goes wrong? —Jeremy Keith

    see all Article posts
  2. Article post type

    Use the Right Container Query Syntax

    Size queries are stable, and shipping in browsers

    Since we got a first look at a Container Queries prototype back in April 2021, the syntax has changed a few times. But now the spec is stable, browsers are getting ready to ship, and it’s time to make sure you’re using the same syntax they are!

    see all Article posts
  3. Article post type

    Not All Zeros are Equal

    And every ‘best practice’ comes with caveats

    There’s a well-established ‘best practice’ that CSS authors (as well as linters and minifiers) should remove units from any 0 value. It’s a fine rule in most cases, but there are a few common situations where it will break your code.

    see all Article posts