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

Wow. What a confusing topic this was. But thanks to dasginganinja for interpreting it correctly. The question wasn't about how to change a max-width property, but how to change Neat's $max-width variable for correctly displaying Neat's visual grid. To reiterate what dasginganinja is saying, you can't exactly manipulate the variable but you can target body:beforeand set a max-width property that matches your outer-container() width. MandsAtWork was on the right track, but you can do this without the need for editing the core files. For example:

@import "bourbon";
@import "neat-helpers"; //IMPORTANT: ADD BEFORE GRID SETTINGS

// Visual Grid
$visual-grid: true;
$visual-grid-color: #d4d4d4;
$visual-grid-opacity: 0.3;

// Initial Grid Settings
$max-width: 100%;
$grid-columns: 4;

// Breakpoints
$sm_val:  480px;
$md_val:  640px;
$lg_val:  800px;
$xl_val:  1000px;
$xxl_val: 1400px;

$sm:  new-breakpoint(min-width $sm_val 6);
$md:  new-breakpoint(min-width $md_val 7);
$lg:  new-breakpoint(min-width $lg_val 8);
$xl:  new-breakpoint(min-width $xl_val 9);
$xxl: new-breakpoint(min-width $xxl_val 10);

@import "neat"; //IMPORTANT: ADD AFTER GRID SETTINGS

// Container
@mixin container {
    @include outer-container(100%);

    @include media($sm) {
        @include outer-container($sm_val);
    }

    @include media($md) {
        @include outer-container($md_val);
    }

    @include media($lg) {
        @include outer-container($lg_val);
    }

    @include media($xl) {
        @include outer-container($xl_val);
    }

    @include media($xxl) {
        @include outer-container($xxl_val);
    }
}

@if ($visual-grid) {
    body:before {
        @include container;
    }
}

Answer 2

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.