A17 SCSS Utilities

Description

A design grid conforming container class. Makes a centered column that will restrict its width based on the config passed.

Setup

The required $structure map (Setup).

Output

app.css

.container {
  width: calc(var(--container-width, 100%) - 2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0))));
  margin-left: auto;
  margin-right: auto;
}

SCSS Usage

_component.scss

.my-container {
  @include container;
}

Demo

This site uses .container in the main node.