Set fixed gutter in Bourbon Neat

Question

By default, Neat uses percentages as the margin-right of each span-columns element, but I'm hoping for a fixed 30px gutter, regardless of the outer-container width.

Humfrid

I have the same problem and till now cannot figure out how to do this using Neat. – Ancestral

Answer 1

One solution would be to create your own mixin that overrides the Neat gutter.

@mixin col-with-gutter( $cols, $gutter ){
    @include span-columns($cols);
    margin-right: $gutter;
}

.half{
    @include col-with-gutter(2, 30px);
}

Obviously you would have to do some additional customization if you need to use some of the other span-columns features. I suggest you look at the _span-columns.scss source to figure out what might work best for you.

Honestly though, I think there is a reason that this functionality isn't built in. In most situations, setting the gutter to 30px would be detrimental to a responsive design (since the total width of the columns will likely not add up to 100%).

You may have a legitimate reason for wanting exactly 30px, but if you are not certain you need an exact value it may be worthwhile to reconsider.

Haricot