Where is the outer-container mixin?

[coffeeneed]

Hi.

I've installed Neat with yarn add bourbon-neat@2.1.0.
When try to use the mixin outer-container with @include outer-container;, I get the following error:

No mixin named outer-container

Has this mixin been removed or do I need to margin: 0 auto; it? Many tutorials about Neat use this mixin, so I find it a little strange.

Cheers.

Technical details:

• Neat Version: 2.1.0
• Build Tool or Environment: webpack
• Browser/OS: Chrome, W10

[whmii]

Hi @coffeeneed,

Neat 2.X has deprecated the outer-container mixin. You can switch to 1.X if that's what a lot of your tutorials and reference materials are using. They work quite differently so your millage may vary depending on your needs.

Many users of 2.X like to roll their own mixin to emulate the behavior. Depending on your needs, this could look something like the following. ⤵

@mixin my-outer-container() {
  @include grid-container;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

Fore more info on which mixins are available check out http://neat.bourbon.io/docs/latest/

[coffeeneed]

Hi @whmii.

Thanks for your kind reply and help.

May I ask why you removed such an important feature in a grid system? Everyone need to center stuff and if it's a fact that people make their own mixin, why not keep it in?

Cheers. Will try out Neat in my next project.

[digisavvy]

Hi @coffeeneed - I had that same question, too: #568 - I don't think that mixin is important at all. You can just assign a max-width to the selector that requires it and you're good.

As noted in that link, it's a good thing to bring up in migration documentation or some other type of guide to help familiar users get up to speed.

[tysongach]

Everyone need to center stuff

Not necessarily. Sometimes layouts simply extend the full-width of the viewport and centering is not required. We felt like the centering feature was not a need of the grid system, but rather a need of the project’s specific desires, therefore didn't make sense to have it always included in the grid container.

The grid never needed to be aware of its maximum width or whether it was centered horizontally, so let's entangle those into grid-specific mixins. It convoluted features and requirements.

You can just assign a max-width to the selector that requires it and you're good.

This is exactly what we realized. So, what we might have in v1.x:

.element {
  @include outer-container(70rem);
}

…would become something like this in v2.x:

.element {
  @include grid-container;
  margin-left: auto;
  margin-right: auto;
  max-width: 70rem;
}