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.

Answer 2

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 3

You can do this with some CSS/SCSS overrides in your setup.

Lets assume you have this in your SCSS file, as is standard in Bourbon Neat:

$max-width: 1000px;

@import "bourbon/bourbon";
@import "neat/neat";

.outer-container{
   @include outer-container;
}

Currently anything you wrap with outer container will have a max width 1000px (or 1170em in your example).

To change the max-width of the container at different screen sizes/media queries, you can include media queries after these lines that supersede your original declaration e.g.

.outer-container{
   max-width: 800px;
   @media all and (min-width: 750px){
    max-width:1500px;
  }
}

In this example the max-width will end up being 800px wide, unless the screen size is bigger then 749px in which case the max-width will be 1500px.

This is a simplistic over ride which feels a little hackish, but should get the job done and you don't worry about it once setup. If Bourbon Neat has a proper way to do this I haven't noticed it.

Answer 4

I think this will answer your question:

You can change the $max-width variable value in _grid-settings.scss and then import that style sheet into the base bitters stylesheet, which is _bitters.scss.

If you change the value of $max-width without importing _grid-settings.scss you will see no change in the outer-container width.

Answer 5

If you need the visual-grid to also display properly (like I did) you can add your media queries to the visual-grid mixin in the `neat/grid/_visual-grid.scss file. It's obviously not ideal to edit the core neat files, but I couldn't think of another way to do this.

        @mixin grid-column-gradient($values...) {
      background-image: -webkit-linear-gradient(left, $values);
      background-image: -moz-linear-gradient(left, $values);
      background-image: -ms-linear-gradient(left, $values);
      background-image: -o-linear-gradient(left, $values);
      background-image: unquote("linear-gradient(to left, #{$values})");
    }

    @if $visual-grid == true or $visual-grid == yes {
      body:before {
        content: '';
        display: inline-block;
        @include grid-column-gradient(gradient-stops($grid-columns));
        height: 100%;
        left: 0;
        margin: 0 auto;
        max-width: $max-width;
        opacity: $visual-grid-opacity;
        position: fixed;
        right: 0;
        width: 100%;
        pointer-events: none;

        @if $visual-grid-index == back {
          z-index: -1;
        }

        @else if $visual-grid-index == front {
          z-index: 9999;
        }

        @each $breakpoint in $visual-grid-breakpoints {
          @if $breakpoint {
            @include media($breakpoint) {
              @include grid-column-gradient(gradient-stops($grid-columns));
            }
          }
        }

        // HACK to get visual grid to display our max-width at our media queries
        @include media($large-screen)  { max-width: 1170px; }
        @include media($medium-screen) { max-width:  970px; }
        @include media($small-screen)  { max-width:  750px; }
      }

    }

Curious to hear anyone else's solution

Answer 6

Since I cannot comment I'd like to build off of Andrew Hacking's answer that uses a mixin called bootstrap-container. Voodoocode's comment says that this doesn't work for the visual-grid as it doesn't touch the $max-width variable. In order for that to work you'd need a piece of code to set the max-width for body:before. It'd work as such:

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

Once you do that then outer-container width settings take effect on the grid.