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. A gallery of numbered images in four columns
    Article post type

    Choosing a Masonry Syntax in CSS

    What makes something a ‘grid’, and what’s at stake?

    Back in 2020, Firefox released a prototype for doing ‘masonry’ layout in CSS. Now all the browsers are eager to ship something, but there’s a hot debate about the best syntax to use.

    see all Article posts
  2. see all Article posts
  3. Article post type

    Partial Feature Queries, Relaxed Layout Containment, and More

    CSS Working Group updates from July

    Over the last month, the CSS Working Group has determined we can loosen containment restrictions for query containers, and agreed on a syntax for special-case support queries (like support for the gap property in a flex context, or support for align-content in a block flow context).

    see all Article posts