Page layout

Summary

How content sits inside the shell: width modes on the content container (fluid by default, fixed or narrow by class), a centred focused-card mode for login and wizard flows, the 12-column grid that places widgets, the page footer, and a few small utilities. Everything here is CSS-only.

When to use

ModeUse it for
Fluid (default)Dashboards and data-heavy pages: content uses the full width, no class needed.
.soma-page-fixedGeneral pages that shouldn't stretch on wide monitors; centred, max 1200px.
.soma-page-narrowReading, settings, single-column forms — centred, max 760px.
.soma-page-focusedOne centred card for login, signup and short wizards. 400px by default, or -medium 600 / -large 800 / -xlarge 980. Size the card to the task.

Examples

Width modes (live)

Applies the class to this page's own content container:

Content container:

Grid

12 columns · token gap · collapses to one column under 900px:

soma-col-12
soma-col-6
soma-col-6
soma-col-4
soma-col-4
soma-col-4
soma-col-8
soma-col-4

Focused card

soma-page-focused on the page tint, shown here inside a demo container:

Sign in

In an app the card sits directly inside .soma-shell-content; wider tasks use -medium / -large / -xlarge.

Footer & utilities

A consumer-built floating surface with soma-box-shadow — the same elevation as Soma's own dropdowns and dialogs.

Also here but invisible by design: soma-hidden (display none) and soma-assistive (visually hidden, read by assistive technology).

HTML

<!-- width mode on the content container (fluid needs no class) -->
<main class="soma-shell-content soma-page-fixed">…</main>

<!-- focused-task page: one centred card -->
<main class="soma-shell-content">
  <div class="soma-page-focused">
    <h1>Sign in</h1>
    …
  </div>
</main>

<!-- 12-col grid placing widgets -->
<div class="soma-grid">
  <section class="soma-widget soma-col-8">…</section>
  <section class="soma-widget soma-col-4">…</section>
</div>

<!-- page footer -->
<footer class="soma-footer">
  <div class="soma-footer-body">
    <ul><li><a href="…">Docs</a></li><li>v0.1.0</li></ul>
  </div>
</footer>

CSS classes

ClassEffect
.soma-page-fixedCentres the content container at max 1200px.
.soma-page-narrowCentres it at max 760px.
.soma-page-focusedOne centred card (surface, border, shadow) at 400px, for login/wizard flows.
.soma-page-focused-medium / -large / -xlargeWider focused cards: 600 / 800 / 980px.
.soma-grid12-column CSS grid with the token gap.
.soma-col-1 … .soma-col-12Column spans. Under 900px every cell runs full width.
.soma-footer / .soma-footer-bodyMuted centred small print; the ul li list renders middot-separated.
.soma-box-shadowStandard floating-surface elevation for consumer-built popups.
.soma-numericMono-accent for data: the mono stack + tabular figures, so metrics, IDs and timestamps align and don't jitter when they tick (what stat values, meter readouts, log timestamps and diff gutters use built-in).
.soma-hiddendisplay: none.
.soma-assistiveVisually hidden but readable by assistive technology.

JavaScript

None. All layout is CSS. (The live width-mode demo above is three lines of page script toggling the classes.)