Container

Centered, max-width-capped wrapper met responsive inline-padding. Vier varianten: fluid, narrow, default, wide.

What is a container?

Een container heeft drie verantwoordelijkheden: centreren (margin-inline: auto), max-width-capping (zodat content niet uitwaaiert op brede schermen) en responsive inline-padding (16px → 80px afhankelijk van breakpoint). Kies de variant die past bij het content-type — line-length is de primaire driver voor de keuze.

Variants

VariantMax-widthUse for
Fluidno capFull-bleed dashboards, marketing landing-pages that need edge-to-edge content.
Narrow720pxLong-form reading, articles, forms — caps the line-length around the 45–75 chars/line comfort zone.
Default1200pxStandard app-shell. Use this when in doubt — fits typical productive UI.
Wide1600pxData-heavy or multi-column dashboards that need extra horizontal real-estate.

Gebruik

example.scss
@use "@ftp/style-library/scss/mixins/container" as *;

// Standard app shell
.app-shell {
  @include container();          // same as container("default")
}

// Long-form reading
.article {
  @include container("narrow");
}

// Edge-to-edge
.dashboard {
  @include container("fluid");
}

// Data-grid
.report {
  @include container("wide");
}

De max-widths zijn CSS-vars (--container-max-width-narrow / --container-max-width-default / --container-max-width-wide); brand-themes kunnen ze overschrijven via tokens/brand.json zonder de mixin aan te raken.

When to use

  1. Full-bleed (edge-to-edge dashboard, immersive marketing)? → fluid
  2. Long-form reading (article, blog, prose, form)? → narrow
  3. Standard app (productive UI, default choice)? → default
  4. Data-heavy (wide tables, multi-column dashboard)? → wide

Accessibility note

Comfortable reading is roughly 45–75 characters per line (Baymard Institute, NN/g). De narrow variant (720px) is gekalibreerd op die zone met body-text op 16px. Voor bredere varianten is het aan de inner-content om zelf z'n line-length te beperken — bv. via max-width: 65ch op een prose-block binnen een default shell.

Live demos

Iedere demo rendert in z'n eigen variant; resize je viewport om de responsive padding te zien.

Fluid

@include container("fluid");
Content (no max-width)

Narrow — 720px

@include container("narrow");
Content (capped at 720px)

Default — 1200px

@include container();
Content (capped at 1200px)

Wide — 1600px

@include container("wide");
Content (capped at 1600px)