Spang

‹ Back

spang is a series of scss mixins for making grids.

At the very basic implementation it requires a single wrapper element that uses the row mixin, and any number of columns that use the spang mixin.

Here is a very basic example to create two equal-width 50/50 columns:

Column 1
Column 2
<div class="row">
  <div class="column">
    <div class="panel__passive">Column 1</div>
  </div>
  <div class="column">
    <div class="panel__passive">Column 2</div>
  </div>
</div>
.row {
  @include row;
}
.column {
  @include spang(1,2);
}

The spang mixin requires two arguments. The first is the number of columns that the element should take up, the second argument is the total number of columns that the grid contains.

Think of it like "1 of 4" is spang(1,4), "3 of 12" is spang(3,12).

So the above example made 50/50 columns by saying it wanted "1 of 2", spang(1,2).

You can also mix and match the widths, here you can see six columns at 1 of 4, and one column at 1 of 2:

Column 1
Column 2
Column 3
Column 4
Column 5
Column 6
Column 7
<div class="row">
  <div class="column-small">
    <div class="panel__passive">Column 1</div>
  </div>
  <div class="column-small">
    <div class="panel__passive">Column 2</div>
  </div>
  <div class="column-small">
    <div class="panel__passive">Column 3</div>
  </div>
  <div class="column-small">
    <div class="panel__passive">Column 4</div>
  </div>
  <div class="column">
    <div class="panel__passive">Column 5</div>
  </div>
  <div class="column-small">
    <div class="panel__passive">Column 6</div>
  </div>
  <div class="column-small">
    <div class="panel__passive">Column 7</div>
  </div>
</div>
.row {
  @include row;
}
.column {
  @include spang(1,2); // one of two
}
.column-small {
  @include spang(1,4); // one of four
}

Here is another example using a three column grid:

Column 1
Column 2
<div class="row">
  <div class="column-1-3">
    <div class="panel__passive">Column 1</div>
  </div>
  <div class="column-2-3">
    <div class="panel__passive">Column 2</div>
  </div>
</div>
.row {
  @include row;
}
.column-1-3 {
  @include spang(1,3); // one of three
}
.column-2-3 {
  @include spang(2,3); // two of three
}

Responsive sizing of columns

You can pass a third option in to spang, which is the media-query that spang should be set at.

To clear our spangs back to 100%, you can use spanc, with a media-query argument. It's essentialy the same as calling spang(1,1)

This example defaults to 1 of 4, then at 800px wide it changes to 1 of 2, then clear to 100% at 600px.

Column 1
Column 2
Column 3
Column 4
<div class="row">
  <div class="column-responsive">
    <div class="panel__passive">Column 1</div>
  </div>
  <div class="column-responsive">
    <div class="panel__passive">Column 2</div>
  </div>
  <div class="column-responsive">
    <div class="panel__passive">Column 3</div>
  </div>
  <div class="column-responsive">
    <div class="panel__passive">Column 4</div>
  </div>
</div>
.row {
  @include row;
}
.column-responsive {
  @include spang(1,4); // one of four by default
  @include spang(1,2,800px); // one of two, when the browser reaches 800px wide
  @include spanc(600px); // one of one (cleared) when the browser reaches 600px wide
}

Spacers

You can use spacer-right and spacer-left to set spacer columns, and you can use spacer-right-clear and spacer-left-clear to clear them.

Here we've got a twelve column grid. The sidebar is set to 3 of 12, and the main area is set to 8 of 12. But that doesn't add up to 12. So we've set a spacer column on the sidebar to push it a single column away from the main area, to fill out our twelve column grid.

We don't always want that spacer to be there though, so we're removing it at 900px wide and increasing the sidebar width to 4 of 12.

Then we're clearing the whole thing at 750px.

Resize your browser window to see how it behaves.

Main
Sidebar
<div class="row">
  <div class="spang-main">
    <div class="panel__passive">Main</div>
  </div>
  <div class="spang-aside">
    <div class="panel__passive">Sidebar</div>
  </div>
</div>
.spang-main {
  @include spang(8,12);
  @include spanc(750px);
  float: right;
}
.spang-aside {
  @include spang(3,12);
  @include spacer-right(1,12);
  @include spacer-right-clear(900px);
  @include spang(4,12,900px);
  @include spanc(750px);
}

Custom gutters

Finally, here is an example of passing in custom gutters.

First pass in the gutter size to the row as the only argument.

Then pass in the same gutter size to the spang mixins as the fourth argument.

Column with custom gutters
Column with custom gutters
<div class="spang-gutters-row">
  <div class="spang-gutters-column">
    <div class="panel__passive">Column with custom gutters</div>
  </div>
  <div class="spang-gutters-column">
    <div class="panel__passive">Column with custom gutters</div>
  </div>
</div>
.spang-gutters-row {
  @include row(2px);
}
.spang-gutters-column {
  @include spang(1,2,false,2px);
}

Responsive gutters

This option is disabled by default, but can be enabled by making some configuration changes in your settings.scss file.

First you need some breakpoint variables and some gutter variables. Of course you don't need these as variables, but it certainly helps in building a system in case these same breakpoints need to affect things like panel padding and such.

Once you have those two groups of variables set up, take a look at the $site-gutters variable and update that with your breakpoints and gutter variables, like below:

$breakpoint-large: 1200px;
$breakpoint-medium: 800px;
$breakpoint-small: 600px;
$breakpoint-tiny: 400px;

$large-gutter:    $large-unit;
$medium-gutter:   $large-unit;
$small-gutter:    $large-unit;
$tiny-gutter:     $default-unit;

$site-gutters:
  ($breakpoint-large,  $large-gutter),
  ($breakpoint-medium, $medium-gutter),
  ($breakpoint-small,  $small-gutter),
  ($breakpoint-tiny,   $tiny-gutter),
  false
;

Once it's all configured you should start seeing your spang gutters respond as you scale down your browser.