Responsive Containers

The Codebase has two kinds of containers: a traditional .container and a modern .container-grid system that uses a CSS grid with 5 columns.

Traditional Containers

The Codebase .container class works the same way as in other CSS frameworks (e.g. Bootstrap).

The following demo shows you the max-width extent of the content within traditional Codebase containers. Notice that to either side there is some padding – this is there so that your text content has some “white space” to the right and left – improving readability on small screens.

Visitors using large screens can dismiss the sidebar so that they can see these containers expand to their fullest extent – or, as far as their screen width allows.

That’s all you need to know about containers.

Modern Container Grids

Visitors using large screens can dismiss the sidebar so that they can see these containers expand to their fullest extent – or, as far as their screen width allows.

Direct child elements in container-grids are placed in the middle column using a direct child combinator selector: > * {grid-column: 3;}. The maximum width of column 3 is constrained using min(). Columns 2 and 4 are used to add 3% width “white space” on the right and left sides, whereas columns 1 and 5 expand equally to take up the remaining viewport width each using 1fr, thereby pushing columns 2-4 toward the center.

So, the max-width of the middle column (column 3) of the container grids is the same as the “max-width minus side padding” of the traditional “auto margin centering” containers above.

See also Codebase bleeds.

Notes:

1. The modifier container classes .container-sm, .container-md and .container-lg only constrain the width of column 3. (You need to pair these modifiers with .container on the same HTML element.)

2. Codebase .flex and .grid layouts cannot be used on the same element as the Codebase .container class, because .container uses CSS grid, and this affects its immediate child elements.

   You can’t do do this:

   <div class="container grid">...</div>
   
   <div class="container flex">...</div>

   You need to do this:

   <div class="container">
     <div class="grid">...</div>
   </div>
   
   <div class="container">
     <div class="flex">...</div>
   </div>

Width Utilities

Codebase has another way of controlling the width of elements, by using width utilities. These may also may be useful to you in some situations.

You can also push a width-constrained element horizontally to the center of its wrapper, using the .mx-auto margin-utility. You will also want to set side paddings using padding utilities, so that any text in your element is moved in from the edges of smaller device screens.

Here’s how you would set up a md i.e. medium width wrapper (default width of md is 1024px), with the “auto margin centering” technique, and side padding:

<div class="w-md mx-auto px-3">
  Lorem ipsum dolor sit amet...
</div>

<!-- This above will render the same as the md container, below -->

<div class="container container-md">
  Lorem ipsum dolor sit amet...
</div>

For more information margins and paddings, see spacing utilities.