How to use Susy grids to create a 'bootstrap' style grid?

Question

I like the way Bootstrap uses paddings and then negatively margins the 'row' to bring everything into line. It removed the need for :nth-child selectors when trying to remove gutters on certain things.

But I like the ability to specify the gutters in a map and they're set as a percentage. I've kind of managed to do it, but it feels clunky and wonder if there's a better way.

Config:

$split-gutter: (
  columns: 12,
  gutters: .8
);

Get half the gutter value:

$susy-split-gutter-width: (span(1) * map-get($split-gutter, gutters)) / 2;

Row styles:

.row {
  @include clear;
  margin-left: -$susy-split-gutter-width;
  margin-right: -$susy-split-gutter-width;
}

Set the base column styles:

[class^="col-"] {
  float: left;
  padding-left: $susy-split-gutter-width;
  padding-right: $susy-split-gutter-width;
}

Set the width on columns:

.col-1 {
  width: span(1);
}

.col-2 {
    width: span(2);
}

...etc

That's ok. But feels like I'm hacking into susy values and I'm not sure that's great. Is there a better way?

Answer 1

Susy has a gutter-position setting that already allows you to choose split (half-gutter margins) or inside (half-gutter padding) as options — so you don't have to do that math yourself. Set gutter-position to inside, and the gutter() function will return a half-gutter width. Here it is in sassmeister with split gutters:

$susy: (
  columns: 12,
  gutters: 0.8,
  gutter-position: split,
);

@include border-box-sizing;

.container {
  @include container();
}

.row {
  margin-left: 0 - gutter();
  margin-right: 0 - gutter();
}

.column {
  @include span(2)
}