Wrapper Utility

Our wrapper utility is constructed as follows:

.wrapper {
  width: 100%;
  margin: 0 auto;
  max-width: var(--wrapper-max-width, 80rem);
  padding: 0 var(--wrapper-padding, 1rem);
}

Purpose

The wrapper utility is a common utility used for container a site to a max width. Quite often certain designs contain multiple widths, so multiple wrappers may be needed.

Example

<div class="wrapper wrapper--short"></div>

.wrapper--short {
  --wrapper-max-width: 48rem;
  --wrapper-padding: 2rem;
}