Shells before ornament

Page structure decides the rhythm.

WebBlocks treats layout as a first-class layer. A dashboard shell should not feel like a content shell with extra pieces bolted on. An auth page should not inherit the density of an admin index. Different jobs deserve different structures.

Primitives

Container, section, stack, cluster, split, grid.

These are the base composition tools. They solve width, vertical rhythm, horizontal grouping, and repeatable distribution without inventing a second utility language.

`wb-container`

Constrains the measure of the page and keeps side padding consistent.

`wb-section`

Defines vertical spacing for major page bands.

`wb-stack`, `wb-cluster`, `wb-split`

Handle common content relationships without bespoke layout CSS in every file.

`wb-grid`

Provides fixed and auto-fill grid patterns when repetition is actually needed.

Navigation shell

Navbar and sidebar are structural, not decorative.

Navigation components set the frame of an application. The navbar manages top-level movement and actions. The sidebar manages persistent hierarchy.

Application frame

navbar + sidebar

Full-page shells

Different shells for different page types.

A dashboard wants persistent navigation. An auth page wants focus and centering. A settings page wants long-form form structure. A content page wants readable measure. These are different problems and WebBlocks keeps them separate.

Dashboard

wb-dashboard-shell

For application back offices, with persistent navigation and a scrollable main area.

Auth

wb-auth

For login, register, and narrow entry flows that need visual quiet.

Settings

wb-settings-shell

For preference-heavy pages with a local nav and stacked settings sections.

Content

wb-content-shell

For docs, articles, legal pages, and text-first views with better prose defaults.

Settings and content

Two calmer shells for slower pages.

These two layouts show the difference between task-oriented settings work and text-oriented reading work.

Settings shell

nav plus stacked sections

Notifications

Long-form preference pages are easier to scan in blocks.

Content shell

narrow reading measure

Documentation should feel like reading, not dashboard admin.

Content shells keep long text comfortable while preserving the same token system and class vocabulary.

Public-site primitives

Marketing pages now have their own calm structure.

Use these primitives when the page is editorial, promotional, or content-led rather than application-heavy. They keep hero sections, reading columns, footer navigation, and public-site nav markup explicit.

Hero plus navigation

wb-hero, wb-navbar-nav

Built for public-facing product pages

Give campaigns and docs a layout that reads like a page.

`wb-hero` handles the opening rhythm, while the navbar helpers keep public-site links and brand notes legible.

Start with the shell Inspect example

Reading and footer structure

wb-content-columns, wb-content-stack, wb-footer-grid

Use wb-content-columns for paired editorial blocks like positioning plus detail, summary plus proof, or introduction plus supporting copy.

Use wb-content-stack when the section should read in one measured column without becoming a narrow prose shell.

These primitives are intentionally plain. They are there to replace throwaway page-specific layout CSS in website and content surfaces.

The goal is the same as the rest of WebBlocks: named structure, visible intent, and reusable page rhythm.

Skeleton

A page shell can stay explicit in the markup.

The layout layer is there so you do not have to improvise wrappers every time. This is the level of visibility the project tries to preserve.

<header class="wb-navbar wb-navbar--static">
  <a href="#" class="wb-navbar-brand">
    <span>Northstar</span>
    <span class="wb-navbar-brand-note">Editorial system</span>
  </a>
  <span class="wb-navbar-spacer"></span>
  <ul class="wb-navbar-nav">
    <li class="wb-navbar-nav-item"><a href="#" class="wb-navbar-link is-active">Overview</a></li>
  </ul>
</header>

<section class="wb-hero">
  <div class="wb-hero-content">...</div>
</section>

<div class="wb-content-columns">
  <p>...</p>
  <p>...</p>
</div>