Vary outer-container size with Bourbon Neat

Question

I'm learning to work with Bourbon Neat and I always worked with Bootstrap's grid system. I'm trying to recreate this Bootstrap grid page to learn the basics of Bourbon Neat.

The settings I use are:

// Bourbon Neat Grid Settings
$column: 70px;
$gutter: 30px;
$grid-columns: 12;
$max-width: em(1170);
$visual-grid: true;

I determined my breakpoints and set them with the new breakpoint function, in which I can also change the number of columns.

But what I do want to change is the container size. In Bootstrap, the container's max-width varies like this:

@media >1200px: max-width: 1170px;

@media >992px: max-width 970px;

@media >768px: max-width: 750px;

In Bourbon Neat however, the max-width is set once with a variable. I currently have it set to max-width: em(1170); How can I let this container size vary? How can I achieve the same example page with Bourbon Neat instead of Bootstrap 3? I know that in Susy you can set the container width

Answer 1

Something like the following may work:

$large-screen:  new-breakpoint(max-width 1200px 12);
$medium-screen: new-breakpoint(max-width  992px 12);
$small-screen:  new-breakpoint(max-width  768px  6);

@mixin bootstrap-container {
    @include outer-container;
    @include media($large-screen)  { max-width: 1170px; }
    @include media($medium-screen) { max-width:  970px; }
    @include media($small-screen)  { max-width:  750px; }
}

Then just use the mixin as follows:

#foo {
    @include bootstrap-container;
}

I'm interested to hear your feedback.