StylePlayground ↬ Wrapper Utility Class Reference

Wrapper classes can be used to wrap (duh!) content into a confined width. By default, the site will have styles associated with the main section of the site which provides a wrapper (padding-inline: var(--space-s-3xl)) to make appropraite space between the content and the edge of the browser/screen.

If you are using a full-width section, this breaks the default spacing. This will needed to be added back in as a child div using the main wrapper class — for example:

<div class="full-width">
  <div class="wrapper | flow">
    … content …
  </div> 
</div>

Three other wrapper classes have been added that reduce the size of the container and center the container inside of its own container. These classes are tied to rem values.

• wrapper-45 (45rem ~ 720px)
• wrapper-50 (50rem ~ 800px)
• wrapper-60 (60rem ~ 960px)
• wrapper-70 (70rem ~ 1120px)
• wrapper-80 (80rem ~ 1280px)
• wrapper-90 (90rem ~ 14400px)