Container layouts

Sonce Codebase v5.0.7, container classes work in a different way to containers in other CSS frameworks (e.g. Bootstrap), in that no x-axis padding is used to inset the content away from the viewport (or wrapping block) sides. Instead, container widths are set by a modern CSS min() function, so that they are either 100% - 2rem (default), or the set width (default).

Plus, also unlike other frameworks, Codebase containers have several set width modifiers, for different use cases. For example, use container-xs for modals, container-sm for centered blog layouts, and others as you need for wider and multi-column layouts.

Containers at different max-widths

Codebase’s (max) set widths are set at 256px increments – as is traditionally used in many web design layouts and also in some hardware (e.g. the classic iPad has a screen of 1024px × 768px). Containers are first set to width: 100% and then constrained these max-widths.

The default container behaves the same as container-xxl.

Containers demo (popout)

On medium screens up, you can expand the following demo:

<div class="container-xxl">
  <div>Content ...</div>
</div>

<div class="container-xl">
  <div>Content ...</div>
</div>

<div class="container-lg">
  <div>Content ...</div>
</div>

<div class="container-md">
  <div>Content ...</div>
</div>

<div class="container-sm">
  <div>Content ...</div>
</div>

<div class="container-xs">
  <div>Content ...</div>
</div>