Build
Honest.

A compositional layout protocol for the intrinsic web. No magic. Just physics.

00. Schematics

This is not a framework. It is a set of verifiable rules (schematics) that govern how elements interact with space.

Rule 1: Intrinsic

We define constraints (min/max), not fixed coordinates. The content dictates the shape. The browser calculates the geometry.

Rule 2: Composition

Complexity is managed by combining simple primitives. Do not write unique CSS for every page.

Rule 3: Semantic

HTML tags have meaning. Accessibility is not a feature; it is the baseline of the system.

01. The Toolset

A small standard library of Layout Primitives.

CUBE CSS Pattern

All primitives now support data attribute variants for common configurations. This follows the CUBE CSS methodology:

Base primitive: Pure, simple, follows Every Layout patterns
Data attributes: Semantic variants without touching base CSS
Composition: Combine primitives and variants freely
Explicit intent: HTML clearly shows configuration choices

See section "02. Data Variants" for examples.

Primitive: Flow .flow

Behavior: Vertical Rhythm.

Uses the "Lobotomized Owl" selector (* + *) to inject space between elements.

Why Use Flow?

Flow is the foundation of consistent vertical spacing. Unlike manual margins or gap properties, Flow provides:

Automatic spacing: No need to add margin to individual elements
Consistent rhythm: Space is injected only between elements, never before the first or after the last
Nested support: Each Flow container can have its own spacing via --flow-space
Works with prose: Preserves collapsing margins for text content

Why not Flex Gap?

Flex gap is excellent, but * + * preserves native collapsing margins in document flow. It is the most robust way to handle prose content without trapping margins.

Why use Flow over manual margins?

Manual margins are inconsistent and repetitive. With Flow, you declare the spacing once at the container level, and all direct children receive consistent vertical rhythm. If you need to adjust spacing, change --flow-space in one place rather than editing multiple margin values.

Primitive: Switcher .switcher

Behavior: Threshold Switching.

Automatically switches from horizontal to vertical layout based on container width.

Interactive: Drag handle to Crush

Card A

Card B

Card C

The Math

flex-basis: calc((threshold - 100%) * 999). If the container is wider than the threshold, the result is negative (0 basis). If narrower, it is positive and huge (forces wrap).

Primitive: Outlier .outlier

Behavior: Absolute Positioning.

Overlays content positioned relative to a container.

Overlay

Base Content

Primitive: Cluster .cluster

Behavior: Flexible Wrapping.

Groups items with consistent spacing and alignment options.

Item 1 Item 2 Item 3 Item 4

Primitive: Grid .grid

Behavior: Responsive Columns.

Auto-fitting columns that respond to container width.

Primitive: Center .center

Behavior: Horizontal Centering.

Constrained width with auto margins for centering.

Constrained content centered horizontally

Primitive: Box .box

Behavior: Intrinsic Styling.

Padding, borders, and color inheritance for individual elements.

Default Box

Standard styling with padding and border.

Inverted Box

Flipped color scheme using data-box="invert"

Primitives Showcase

Real-world examples using placeholder images from Picsum Photos.

Reel: Horizontal Image Gallery

Horizontal scrolling with margin-based spacing and custom scrollbar styling.

Frame: Aspect Ratio Containers

Different aspect ratios demonstrating the Frame primitive.

Reel: Vertical Scrolling

Vertical reel with snap behavior and margin spacing.

Icon: Inline SVG Icons

Icons sized to match text with baseline alignment.

Layers

Circle

Square

Cover: Vertical Centering

Full viewport height with centered content using the Cover primitive.

Vertically Centered

Content centered vertically with auto margins pushing it away from header/footer.

Sidebar: Two-Column Layout

Flexible sidebar with fluid content area. Resize to see behavior.

Composition: Primitives Working Together

Multiple primitives composed to create complex layouts.

Article Title

Grid + Frame + Box + Flow working together in harmony.

Another Article

Same composition, different content. No additional CSS needed.

02. Data Attribute Variants

Semantic configuration through data attributes. No inline styles needed.

Flow Spacing Variants

Tight Flow

Compact vertical rhythm using data-flow="tight"

Default Flow

Standard spacing using the base .flow class

Loose Flow

Spacious rhythm using data-flow="loose"

Cluster Alignment Variants

Center

Items centered both axes

Spread

Items spread to edges

Start

Items aligned to start

Switcher Threshold Variants

Resize browser to see different wrap points:

Mobile (20rem)

Tablet (40rem)

Wide (60rem)

Grid Column Variants

Compact (8rem)

Tiles (12rem)

Cards (16rem)

Frame Aspect Ratio Variants

Square (1:1) 1:1

Video (16:9) 16:9

Photo (4:3) 4:3

Reel Variants

Horizontal with snap:

Snap 1

Snap 2

Snap 3

Snap 4

Vertical with snap:

Vertical Snap 1

Vertical Snap 2

Vertical Snap 3

Center Variants

Default

Horizontal centering

Both Axes

Centered horizontally and vertically using data-center="both"

03. Methodology

The web is not a printer. It is a fluid medium. Attempts to control pixel-perfect placement (absolute positioning, fixed widths) are hostile to the medium.

The Promise

By using Compositional Layout, we surrender control of the pixels to gain control of the system. The layout heals itself. It works on a Nokia, an iPhone, and a 4K monitor without manual intervention.

The Integration

Copy the core CSS to your project. There are no build steps. No npm install. Just HTML and CSS. You are free to break the rules, but only after you understand them.

04. Materials

Typography (Fluid)

Text size scales fluidly with the viewport using clamp(). No media queries required.

Step-5

Aa

Step-4

Step-3

Step-2

Step-1

Step-0

Forms

Inputs are safeguarded. We target text-like inputs specifically to avoid breaking checkboxes and radios.

Text Input

Selection

Option A Option B

Input Sync: Waiting for input...

Data Contrast

The system enforces accessible contrast ratios automatically based on the theme.

Light Theme

#2933D3

Ratio: ~7.1:1 (Pass)

Dark Theme

#6E79FC

Ratio: ~5.8:1 (Pass)

05. Playground

Inject primitives to test composition.

Container

Injected elements appear here.

06. Source Code

Self-Documenting. The code below is the live kernel rendering this page.

View Source Code (click to expand)

Loading...