Singularity: Grids without limits

My past couple blog posts have been on why designing to content is so important, and the evils of using Twitter Bootstrap. But the question that still remains, is how to truly implement this. The answer is simple, and it is a project by Scott Kellum and Sam Richard called Singularity. Singularity gives designers the power of creating their own grids, 100% custom, for each project’s needs. It makes no assumptions about your design, but instead truly removes the limits of your web project.

For anybody who is used to the Susy grid framework (or similar product), Singularity looks very frightening. It almost gives the designer too much, and seemingly works in mysterious ways. While in part this is true, the perceived complexity is removed the moment it is realized that it is no harder to work with than the grid frameworks we are familiar with. It merely has to be used in a different fashion than we are used to.

Installing

First off, make sure you install the gem with:

gem install singularitygs

Alternatively, if you are using bundler, you can add to your Gemfile

gem 'singularitygs', '~>1.0'

then add to your config.rb file:

require 'singularitygs'

and to your sass file:

@import "singularitygs";

Creating your first grid

Singularity uses two main global variables to create your grid, $grids and $gutters. Setting these will create you starting grid for you:

$grids: 12;
$gutters: 1/3;

This will create a 12 column layout, with each gutter being 1/3 the width of a single column. Simple as that Singularity is setup and ready to go. Using your grid is just as simple, it just takes one command.

#foo {
  @include grid-span(3, 1);
}

Grid-span is your primary mixin to create your layout. The one above will span 3 columns, starting at column 1. If you want to span the rest of the columns, you would then want 9 columns starting at column 4:

#bar {
  @include grid-span(9,4);
}

Responsive grids

A grid is great an all, but this is for the web, and needs to be responsive. Luckily, along with the powerful Breakpoint Compass extension, Singularity will do that for us as well. A simple layout, with a more complex layout at a larger breakpoint can be made with the add-grid mixin.

$grids: 2;
$grids: add-grid(6 at 600px);

Now, anytime you use grid-span within a breakpoint at 600px or later (Singularity, by default, uses min-width), Singularity will automatically use the 6 column grid system. For example, the following will use one column at the smallest breakpoint, then at 650px will use 2 columns.

#foo {
  @include grid-span(1, 1);

  @include breakpoint(650px) {
    @include grid-span(2, 1);
  }
}

It is important to note that Singularity never assumes what you want in your design. Just because at 600px the grid definition changes to a 6 column grid, does not mean Singularity will automatically change your layout for you. Instead, you have the option of changing your layout when you want to. In the example above, that happened at 650px. You can add as many grids as you want to a page, each corresponding to a different breakpoint. Also, you can use the add-gutters function to change the gutter width at different breakpoints as well.

Asymmetric grids

But a 12 column grid system is what we already have, we need more than just that. We want style, we want complexity. In comes asymmetric grids, Singularity’s ability to have grids that are not perfectly symmetric. This can be a simple as a grid with three columns, with a ratio of 2:4:3, respectively. Alternatively, it could be a grid based upon the golden ratio, or a similar ratio. Setting one up is very easy, and requirers the same functions we used before.

$grids: 2 4 3;
$gutters: 1/4;

#foo {
  @include grid-span(1, 1);
}

#bar {
  @include grid-span(1, 2);
}

In this example, there is a grid that has three columns. The first is 2 units wide, the second is 4, and last is 3. #foo then is placed in the first column, and #bar in the second. The gutters then, will be 1/4 the width of a single unit. Therefore if the first column is 2 units wide, then it will be 1/4 the width of 1/2 of the first column. On the Singularity wiki page, there are even more ways of using grids Very commonly, we will use a symmetric grid for small breakpoints, and for larger layouts we use asymmetric grids.

Isolation vs Float

The most mind-blowing pieces about Singularity is its ability to do visual source order changes. This means that you can change the visual order of elements on the page without having to change the underlying markup. This is done with a little bit of magic, placing each element where it needs to be on the page. This is VERY different from traditional grid systems that float: left every one of your elements, and each one bumps up against the next. By default, Singularity will utilize the isolation output, but you can change that easily by changing the $output variable.

// $output: 'isolation';
$output: 'float';

When you are using isolation output method, every other mixin still works exactly as before. The only difference is that the second variable in grid-span will determine the exact position horizontally to place the content. You will have to selectively clear your floats to have content still act in the way expected sometimes.

Overrides

The $grids, $gutters, and $output variables are all considered global variables to Singularity. You can also override these variables for a portion of your code, if need be. For example, the site has a global grid layout with 10 columns, but the header bar should be in a 2 4 2 layout, this can be done with the layout mixin.

@include layout(2 4 2) {
  #foo {
    @include grid-span(1, 1);
  }

  #bar {
    @include grid-span(1, 2);
  }
}

You can also override the grid within the grid-span mixin as well. A similar version to the code above would be:

#foo {
  @include grid-span(1, 1, (4 2 4));
}

#bar {
  @include grid-span(1, 2, (4 2 4));
}

You can override not just the grid layout, but also the gutters and output style.

#foo {
  @include grid-span(1, 1, $gutter: .25);
}

#bar {
  @include grid-span(1, 2, $output-style: 'float');
}

Just touching the surface

Singularity’s power is vast, and truly opens up the way that grids are made for a design. It allows full control to the site builders and designers to have the grid they need for design. It removes the idea of a 12 column layout, and everything in your layout must submit to those columns. It gives you the freedom to have your grid, your design and override that design when it is necessary. Most importantly, it allows you to create your site without having to use a grid framework like Twitter Bootstrap or Foundation. Your site will play by your rules, and with your design, not theirs.