Bourbon Neat -- Is outer-container necessary?

Question

I am wondering if @include outer-container is necessary?

I've noticed that the behavior ( at the surface ) is the same with or without. However, I realize that there are possible implications to assuming this.

page.html with outer-container

<div class = "container">
    <div class = "box"></div>
</div>

page.scss with outer-container

.container {
    @include outer-container;
    .box {
        @include span-columns(6);
    }
}

page.html without outer-container

<div class = "box"></div>

page.scss without outer-container

.box {
    @include span-columns(6);
}

Both of these result in the same effect of creating a div with the width of half the page. So, is @include outer-container necessary or no?

What are the possible implications of not using this?

score 0 · Answer 1 · answered Dec 01 '15 at 12:25

Referencing the Neat docs:

Although optional, using outer-container is recommended

It clears floats, centers the container in the viewport and sets a max width. The following:

.element {
    @include outer-container(100%);
  }

Would output this:

.element {
    *zoom: 1;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .element:before, .element:after {
    content: " ";
    display: table;
  }

  .element:after {
    clear: both;
  }

Personally I always use them, as you will need some sort of container to place your span-columns in

Bourbon Neat -- Is outer-container necessary?

1 Answers1