Tier 3: article regions

Grid Identity System

Last updated: January 2025 · 8 min read

Three Tiers Active

Tier 1: data-page-layout="sidebar-left" on body — page header, nav, main, footer auto-placed.
Tier 2: data-layout="sidebar-right" on main — article and aside (TOC) auto-placed via main-* areas.
Tier 3: data-layout="regions" on article — header, section, footer auto-placed.

The Concept

The grid identity system implements the CSS Zen Garden principle: HTML declares structure, CSS assigns layout. Semantic elements auto-register to grid areas based on their type, with no classes or explicit placement needed.

This creates a clean separation of concerns across three tiers:

Page tier — data-page-layout controls the overall page structure
Main tier — main[data-layout] creates nested layouts within the content area
Component tier — data-layout="regions" structures individual components

How Identity Works

When you add data-page-layout="sidebar-left" to the body, VB's CSS automatically assigns grid areas to direct children based on their element type:

<header> → body-header
<nav> → body-nav
<main> → body-main
<footer> → body-footer

The same principle applies at the main level. When main[data-layout="sidebar-right"] is set, its children register as:

<article> → main-article
<aside> → main-aside
<nav> → main-nav

Content-Aware Adaptation

Layouts automatically adapt when elements are absent. If you remove the <aside> from this page's main area, the article would expand to fill the full width — no JavaScript needed. CSS :has() selectors make this possible.