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?
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)
}