CORE UTILITY FAMILY

Sizing

Set physical or logical dimensions, minimum and maximum constraints, and paired width/height with spacing, container, viewport, intrinsic, custom-property, or arbitrary values.

completeTarget v0.26 verified examplesRegistry JSON ↗

WHEN TO USE IT

Choose the right tool for the layout.

Use size when width and height share a value, inline/block when components must respect writing mode, and min/max constraints when content or viewport changes must not break the component.

QUICK REFERENCE

Classes and generated CSS

These examples are resolved by the compiler when the registry manifest is generated. A broken example fails the test suite.

ClassGenerated declarations and keyframes

co-w-mdwidth: var(--co-container-md);

co-h-dvhheight: 100dvh;

co-size-12width: calc(var(--co-space-unit) * 12); height: calc(var(--co-space-unit) * 12);

co-inline-fullinline-size: 100%;

co-max-inline-lgmax-inline-size: var(--co-container-lg);

co-min-block-24min-block-size: calc(var(--co-space-unit) * 24);

VISUAL EXAMPLE · WIDTH AND HEIGHT

Set explicit dimensions

Width and height utilities use the shared spacing scale. Use size when both dimensions should receive the same value.

16 × 10

24 × 16

size-20

component.coord

<div class="co-flex co-items-end co-gap-4">
  <div class="co-w-16 co-h-10">w-16 h-10</div>
  <div class="co-w-24 co-h-16">w-24 h-16</div>
  <div class="co-size-20">size-20</div>
</div>

VISUAL EXAMPLE · FRACTIONS

Divide available width proportionally

Fractional widths are useful when children should occupy a known portion of the parent. Full width fills the complete available inline space.

co-w-1/3

co-w-2/3

co-w-full

component.coord

<div class="co-flex co-gap-3">
  <aside class="co-w-1/3">Sidebar</aside>
  <main class="co-w-2/3">Content</main>
</div>

<button class="co-w-full">Continue</button>

VISUAL EXAMPLE · MIN AND MAX

Keep content readable as space changes

Combine full width with a maximum constraint for responsive content. Minimum sizes protect controls or panels from becoming unusably small.

co-w-full co-max-w-lg

component.coord

<article class="co-w-full co-max-w-lg co-mx-auto">
  Readable content column
</article>

<button class="co-min-w-32">Save changes</button>

VISUAL EXAMPLE · VIEWPORT

Size a section against the visible screen

Dynamic viewport units follow the currently visible browser area, which is useful for mobile interfaces where browser controls expand and collapse.

co-min-h-dvh
co-place-items-center

component.coord

<main class="co-min-h-dvh co-grid co-place-items-center">
  <section class="co-w-full co-max-w-xl">Centered screen</section>
</main>

VISUAL EXAMPLE · LOGICAL SIZE

Follow the active writing mode

Inline and block size map to the text flow instead of physical width and height, so the same component can adapt to horizontal and vertical writing systems.

inline-64
block-32

縦書き · inline / block

component.coord

<article class="co-inline-64 co-block-32">Horizontal flow</article>
<article class="co-writing-vertical-rl co-inline-64 co-block-32">
  Vertical flow
</article>

BASIC USAGE

Apply a utility directly.

Keep the complete class string in your template so the plain-text scanner can discover it without evaluating application code.

component.coord

<div class="co-w-md co-h-dvh co-size-12 co-inline-full co-max-inline-lg co-min-block-24">
  Your content
</div>

HOW IT WORKS

Core concepts

01
Fraction utilities produce percentages such as co-w-1/2 → 50%.
02
Named 3xs through 7xl container tokens provide reusable inline dimensions.
03
screen, svh/svw, lvh/lvw, and dvh/dvw cover viewport behavior while lh follows the current line height.
04
min, max, fit, and none map to intrinsic or unconstrained sizing keywords.
05
CSS custom properties use parenthesized shorthand such as co-inline-(--panel-size).

CSS PROPERTIES

What this family controls

widthheightmin-widthmin-heightmax-widthmax-heightinline-sizeblock-sizemin-inline-sizemin-block-sizemax-inline-sizemax-block-size

VARIANTS

Responsive and state conditions

Prefix any supported utility with responsive or state variants. Variants compose from left to right and the compiler emits the required selector or at-rule.

component.coord

<div class="co-w-md md:co-h-dvh hover:co-w-md">
  Responsive and state-aware content
</div>

ARBITRARY VALUES

Escape the scale when necessary

Use square brackets for a one-off CSS value. Prefer theme tokens for values repeated across components so an AI agent and human reviewer can recognize design intent.

Arbitrary syntax

co-w-*
co-[content-visibility:auto]

SCOPE BOUNDARIES

Intentional boundaries

This family is implemented, documented, and tested. These notes define where a neighboring family or browser behavior takes over.

Sizing utilities intentionally reject negative values.
Flex basis belongs to the Flexbox and grid family.
Logical sizes depend on the element's writing mode, which is controlled separately.

Previous← Spacing NextTypography →