Intrinsic Design Principles

As Rachel Andrew has reminded us, everything in web design is a box, or the absence of a box. Not everything necessarily looks like a box—border-radius, clip-path, and transforms can be deceptive, but everything takes up a box-like space.

The Box Model

The box model comprises content, padding, border, and margin. CSS lets us alter these values to change the overall size and shape of elements' display.

Logical Properties

English speakers find it logical to use "left" and "right". It's when the direction changes that this becomes illogical. Logical properties like margin-inline-end ensure margin is applied where needed, regardless of writing mode.

Composition over inheritance principle: combining simple independent parts (objects; classes; functions) gives you more flexibility and efficiency than connecting everything to a shared origin.

Layout Primitives

The mistake is to think of isolated UI components as unique. Really, they are compositions of smaller, meaningless parts: primitives.

The primitives each have a simple responsibility: space elements vertically, pad elements evenly, separate elements horizontally. They are designed to be used in composition, as parents, children, or siblings.

The Stack

The Problem

Margin is really a property of the relationship between two proximate elements. Styling elements directly (e.g. p { margin-bottom: 1.5rem }) is problematic because it's not context-sensitive.

The Solution

The trick is to style the context. The Stack primitive injects margin between elements via their common parent using the adjacent sibling combinator (+) and the lobotomized owl (* + *).

.stack > * + * {
margin-block-start: 1.5rem;
}

Recursion: By removing the child combinator (>), you can inject margins recursively to affect elements at any nesting level while retaining regularity.

Splitting: By using Flexbox, we can add margin-block-end: auto to a child to group elements to the top and bottom—useful for card components.

Code Generator

.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.stack > * + * {
  margin-block-start: var(--space, 1.5rem);
}

The Sidebar

The Problem

Viewport width based media queries have no bearing on the actual available space. A component might appear in a 300px wide container while the viewport is 1200px. Standard breakpoints fail here.

The Solution

The Sidebar is a quantum layout. It exists in one of two configurations: horizontal or vertical. Which it adopts depends entirely on the space afforded by the parent.

.sidebar { flex-basis: 20rem; flex-grow: 1; }
.main { flex-basis: 0; flex-grow: 999; min-inline-size: 50%; }

Intrinsic Web Design: Jen Simmons coined this to refer to tools that are more befitting of the medium. We allow the browser to size elements according to content, providing suggestions rather than prescriptions.

The Gutter: Using gap ensures consistent spacing between the sidebar and content regardless of orientation without extraneous outer margins.

Code Generator

.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space);
}
.with-sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 50%;
}

The Switcher

The Problem

Flexbox grids often produce asymmetrical final rows when the item count is odd. While functional, you may wish to switch directly from horizontal to vertical layout and bypass intermediary states.

The Solution

The Switcher uses the 'Holy Albatross' calculation. By subtracting the current width from a threshold and multiplying by 999, we force flex-basis to be either a massive positive or invalid negative value.

flex-basis: calc((var(--threshold) - 100%) * 999);

Quantity Threshold: It is possible to style siblings based on their total count. Using a quantity query, we can force the switcher to go vertical if there are too many items, regardless of space.

Managing Proportions: Even in a horizontal config, you can allot more space to specific items using flex-grow overrides.

Code Generator

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((30rem - 100%) * 999);
}
.switcher > :nth-last-child(n+5) {
  flex-basis: 100%;
}

Modular Scale

A musical note is a composition of frequencies. Visual layout should be cohesive too. We treat line-height as a basis for extrapolating white space, creating a harmonic progression using the pow() function.

--ratio: 1.5;

font-size: pow(var(--ratio), 3);

Units

Working with px encourages the false premise of pixel perfection. Relative units like rem, em, and ch are arbitrators context and configuration.

rem em ch vw

Paragraph elements should always be 1rem. Relative units ensure scaling is trivial across devices.

Laboratory

Observing the core primitives in their natural habitat.

Relational Spacing

Gap: 1.5rem

Snap-point Logic

View Width %

Threshold %

Intrinsic

Design

Boxes

The Box Model

Logical Properties

Layout Primitives

Composition

The Stack

The Problem

The Solution

The Sidebar

The Problem

The Solution

The Switcher

The Problem

The Solution

Modular Scale

Units

Laboratory

The Stack Demo

The Sidebar Demo