Containers

Weavr uses container classes to constrain content to a maximum width. The container classes are named .contained-[1..12], where the container’s width is expressed as a number of columns in a grid-12 system with a max-width of 1260px. For example, .contained-12 constrains the width to a maximum of 1260px, while .contained-9 constrains the width to a maximum of 945px. Container classes set the max-width property, so the width of the containers is fluid below their maximum width.

See the demonstration below. Note that because of the width of the content section of this documentation, we’re not bothering to demonstrate .contained-12 through .contained-10, and you won’t see the .contained-9 element at its full-width even if you’re viewing this documentation on a larger screen. Resize your browser window to see how the containers become fluid below their respective maximum widths. The Weavr Kitchen Sink demonstrates all 12 container classes if your screen is wide enough.

Centering containers

Containers can be centered by adding the .centered modifier class. This sets the left and right margin to auto, so it only works on elements with a fixed width or max-width (like container classes). This modifier class is not to be confused with .align-center, which centers content within an element and uses the text-align property.

<div class="contained-9 centered brand-purple-bg padding-1x margin-bottom-2x"></div>
<div class="contained-6 centered brand-purple-bg padding-1x margin-bottom-2x"></div>
<div class="contained-4 centered brand-purple-bg padding-1x"></div>