CODEWITHSUNDEEP
sassgrid-layoutbourbonsingularitygsneat
amigolargo
amigolargo

Reputation: 830

Multiple column/gutter sizes across Bourbon Neat breakpoints

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?

Upvotes: 0

Views: 2349

Answers (1)

Zuriel
Zuriel

Reputation: 1848

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>

Upvotes: 2

Related Questions