How to apply a given width/margin in singularity.gs?

Issue

I am using singularity.gs (Drupal 7/Omega 4), and I want to stack my content in columns.

In 960gs, you just add grid-4 to the element, and it spans 4 columns with appropriate margins (more or less).

To make a 12-column grid with sigularity.gs I've written this:

.grid-4 {
    width: column-span(4, 6);
    margin-left: gutter-span();
    float: left;
}

.grid-4:first-child {
    margin-left: 0;
}

Is there a simpler or more idiomatic way to do it?

Solution

I'm not sure if this is a question per se, but I think I can answer it.

Singularity allows different output styles to provide their own span mixins to better adhere to that output style's mental model. 960gs works on the float output style, allowing you to to change what you have to the following:

.grid-4 {
    @include float-span(4);

    &:nth-of-type(3n) {
        @include float-span(4, 'last');
    }
}

A working SassMeister with this should give you a clear idea of what's going on.

Answered By - Snugug