Search code examples
cssfluid-layoutbourbonneat

How do I make neat fluid past max width


I don't feel that neat's grid is truly fluid. A fluid grid would scale well all the way from mobile to a large tv screen such as 1920x1080. However the way that neat and bitters end up working creates a $max-width variable which is default set at 1088. Even if you change this however there is a size that the website will stop being fluid, the max-size. I feel a fluid layout would constantly grow and shrink no matter the size of the screen.

Currently my way around this is by using fill-parent

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

This works but it feels hacky, is there no way using neat to properly create a fully fluid grid? Setting max-width has it's limit.


Solution

  • You don't need to use outer-container on an element that's supposed to fill the entire viewport. The only thing that mixin does is centering an element, clearing its floats and giving it a max-width.

    In CSS, element are width: 100% by default, so there is no need to specify anything if that's the expected result.

    The 'fluid' part of Neat refers to the fact that it does't use fixed widths, but percentages.