Multiple column/gutter sizes across Bourbon Neat breakpoints

Question

I'd like to create a flexible responsive grid using Bourbon/Neat, that not only varies the number of columns, but also allows me to configure the gutter spacing between columns, across breakpoints.

So in theory, something like this would work:

@import "mixins/neat/neat-helpers";

$visual-grid: true;
$visual-grid-color: yellow;
$visual-grid-index: front;
$visual-grid-opacity: 0.3;

$gutter: 5%;
$column: 5%;
$gridS: new-breakpoint(min-width 0 32);

$gutter: 1.5625%;
$column: 3.515625%;
$gridL: new-breakpoint(min-width 48em 20);

This currently gives me a flexible column count, but the column:gutter proportion remains the same.

I've investigated singularity.gs but would rather not introduce Compass as a dependency.

Does anybody have a fix/workaround?

@lolmaus-AndreyMikhaylov - thanks, that's good to know. The install instructions suggest otherwise but I've now removed and it works fine. Apparently a bower install is also available now too. — amigolargo, Aug 04 '14 at 10:32
Actually, despite not depending on Compass for any Sass logic, it appears the standard install does require Compass to run. — amigolargo, Aug 04 '14 at 11:11

score 2 · Answer 1 · answered Aug 01 '14 at 19:23

if you look at the core of neat, you see

// Flexible gutter
@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
  @return percentage($gutter / $container-width);
}

and if you look at _span-columns.scss you see:

margin-#{$direction}: flex-gutter($container-columns);

so you could take a grid and if you make the columns larger than 12. ie 24 you half the size of that margin. and if you double that to 48 its 1/4 the original. etc.. so you have the ability to size your columns to any total size and get your gutters flexible based on that. you could always reverse the effects or try different column sizes to get various results. would this help any? or at least the theory behind it?

div.container {
@include outer-container()
}

div.small {
background: red;
@include span-columns(3 of 12);
}

div.small-alt {
background: blue;
@include span-columns(6 of 24);
}

div.small-crazy {
background: green;
@include span-columns(36 of 144);
}

<div class="container">
    <div class="small">1</div>
    <div class="small">2</div>
    <div class="small">3</div>
    <div class="small">4</div>
</div>

<div class="container">
    <div class="small-alt">1</div>
    <div class="small-alt">2</div>
    <div class="small-alt">3</div>
    <div class="small-alt">4</div>
</div>

<div class="container">
    <div class="small-crazy">1</div>
    <div class="small-crazy">2</div>
    <div class="small-crazy">3</div>
    <div class="small-crazy">4</div>
</div>

I like your thinking. I think it may prove tricky to communicate this thinking across teams though. Ideally there'd be a cleaner solution, so I've gone with Singularity for now. Would definitely be a useful feature for Neat to implement — amigolargo, Aug 04 '14 at 10:35

Multiple column/gutter sizes across Bourbon Neat breakpoints

1 Answers1