StableLayout · since 0.1.0
Centers page content horizontally with a max width and side gutters.
Pick this part
Pick l-container for
- The outermost wrapper of each page region: header, main content, footer.
Pick another part for
- Narrowing text inside a region: use
l-center. - Inside another container.
Build it
- Start with an element and add
class="l-container". - Pick at most one width modifier:
--narrow. - Put the parts inside. The layout sets the space between them, so they need no margins.
Acme
Show markup 5 lines
<header>
<div class="l-container">
<p class="u-margin-0">Acme</p>
</div>
</header>Check your build
Each piece that doesn't fit was run through mcss-lite validate when this page was built. The output below is real.
Fits
Use one container per region.
Acme
Show markup 5 lines
<header>
<div class="l-container">
<p class="u-margin-0">Acme</p>
</div>
</header>validate: 0 issues
Doesn't fit
Don't invent width modifiers.
<div class="l-container l-container--wide">
<p class="u-margin-0">Acme</p>
</div>validate
- error Unknown class "l-container--wide". Valid modifiers of l-container: --narrow. Only classes from the MCSS-Lite contracts exist.
[unknown-class]
Spec sheet
| Class | Group | What it does |
|---|---|---|
l-container--narrow | width (pick one) | Reading width (48rem) for articles and forms. |