Layout

Overview

PimentCSS layout is intentionally small: a centered container, a flex-based 12-column grid, spacing utilities mapped to --space-* tokens, and a handful of display helpers. Import via the full bundle or pimentcss-design-system/core when you only need tokens + layout.

Prerequisites

• PimentCSS installed, Installation (layout ships with the default CSS).
• Semantic colors, surfaces and text from Colors for readable UI inside columns.
• Typography, heading/body utilities from Typography inside grid regions.

Spacing & layout tokens

Canonical spacing lives in tokens/layout.css. Override Sass variables before @use "pimentcss-design-system", see Customization.

:root {
  --space-1: 0.25rem;  /* 4px */
  --space-3: 1rem;     /* 16px */
  --space-4: 1.5rem;   /* 24px, default grid gutter */
  --space-6: 3rem;     /* 48px */
}

/* Sass (optional) */
$container-max-width: 75rem;
$grid-gutter: $space-4;
$copy-block-max-width: 33rem;

Container

.container centers content, applies horizontal padding ($grid-gutter), and caps width at 75rem. Use .container--fluid for full-bleed sections while keeping gutter padding.

<main class="container">
  <h1 class="heading-h1">Dashboard</h1>
  <p class="body-medium">Content stays centered on wide screens.</p>
</main>

12-column grid

Rows use flexbox with wrap. Columns are width fractions of 12 (.col-1 … .col-12). Gutters come from horizontal padding on columns (half gutter each side).

<div class="container">
  <div class="row">
    <div class="col-8">
      <section aria-labelledby="main-title">…</section>
    </div>
    <div class="col-4">
      <aside aria-label="Related links">…</aside>
    </div>
  </div>
</div>

Responsive columns

From 48rem (min-width), .col-md-* classes apply. Below the breakpoint, stack with .col-12 so mobile users get a single column without horizontal scroll.

<div class="row">
  <div class="col-12 col-md-4">Column A</div>
  <div class="col-12 col-md-4">Column B</div>
  <div class="col-12 col-md-4">Column C</div>
</div>

Spacing utilities

Margin, padding, and gap helpers map to the spacing scale (0–6). Prefer gap-* in flex/grid layouts instead of chaining margins.

Visual scale only, class names follow the token number (.mt-3, .mb-4, .p-3, .gap-4).

<div class="d-flex gap-3 align-center"><button type="button" class="btn btn--outline">Cancel</button><button type="button" class="btn btn--primary">Save</button></div>

Display & flex helpers

Utility classes for common flex layouts and visibility. Combine with spacing utilities; avoid inline styles in production when a utility exists.

Readable line length

Long prose should stay within 33rem (~66 characters). Use the .copy-block component or max-width: 33rem in your own styles.

Page shell pattern

Typical app shell: container → header row → main + aside. Use real landmarks (<header>, <main>, <aside>) so screen readers follow the same order as the visual grid.

Quick integration

1. 01

   Wrap the page

   Place primary content in .container. Add container--fluid only for hero bands or full-width data tables.
   layout.html

   <main class="container">…</main>

2. 02

   Split columns

   Use .row and column classes. On small screens, start with .col-12 and add .col-md-* for tablet/desktop.
   grid.html

   <div class="row">
     <div class="col-12 col-md-8">…</div>
     <div class="col-12 col-md-4">…</div>
   </div>

3. 03

   Space components

   Prefer gap-* inside toolbars and card footers. Use semantic text colors inside each column.
   toolbar.html

   <div class="d-flex gap-3 align-center"><button class="btn btn--primary">OK</button></div>

Class reference

Sass customization

@use "pimentcss-design-system/core" with (
  $container-max-width: 72rem,
  $grid-gutter: 1.25rem,
  $space-5: 2.5rem,
  $copy-block-max-width: 36rem,
);

Accessibility

Next steps