CORE UTILITY FAMILY
Layout and positioning
Control document flow, positioning, logical directions, horizontal or vertical writing systems, overflow, and replaced content.
WHEN TO USE IT
Choose the right tool for the layout.
Choose display first, establish semantic direction in markup, select a writing mode only when the content requires it, then use logical inset, spacing, sizing, and border utilities so the layout follows both inline and block flow.
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.
co-inline-tabledisplay: inline-table;co-stickyposition: sticky;-co-inset-x-4inset-inline: calc(calc(var(--co-space-unit) * 4) * -1);co-inset-bs-4inset-block-start: calc(var(--co-space-unit) * 4);co-direction-rtldirection: rtl;co-writing-vertical-rlwriting-mode: vertical-rl;co-text-orientation-uprighttext-orientation: upright;co-unicode-bidi-isolateunicode-bidi: isolate;co-text-combine-digits-2text-combine-upright: digits 2;co-aspect-3/2aspect-ratio: 3 / 2;co-break-inside-avoidbreak-inside: avoid;-co-z-10z-index: -10;co-object-[25%_75%]object-position: 25% 75%;VISUAL EXAMPLE · DISPLAY
Choose the formatting context
Block elements fill the available inline space, while inline-block elements stay sized to their content. Hide an element responsively by combining display utilities with variants.
<div class="co-block">Block</div>
<div class="co-inline-block">Inline block</div>
<div class="co-hidden md:co-block">Visible from md</div>VISUAL EXAMPLE · POSITION
Anchor an element to its container
Make the parent relative, then place the child with logical end positioning. The badge follows the reading direction when the component switches to RTL.
<article class="co-relative co-min-h-40 co-border">
<span class="co-absolute co-top-4 co-end-4 co-rounded-full">
New
</span>
Card content
</article>VISUAL EXAMPLE · OVERFLOW
Keep wide content inside a narrow surface
Use horizontal overflow on a bounded wrapper when the content must preserve its minimum width, such as a comparison table or timeline.
<div class="co-max-w-full co-overflow-x-auto">
<div class="co-grid co-min-w-2xl co-grid-cols-4 co-gap-3">
<!-- wide content -->
</div>
</div>VISUAL EXAMPLE · LOGICAL EDGES
Let start and end follow direction
The same logical border and padding utilities move automatically between the left and right sides, so one component works in both LTR and RTL documents.
<article dir="ltr" class="co-border-s-4 co-ps-5">English</article>
<article dir="rtl" class="co-border-s-4 co-ps-5">العربية</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.
<div class="co-inline-table co-sticky -co-inset-x-4 co-inset-bs-4 co-direction-rtl co-writing-vertical-rl co-text-orientation-upright co-unicode-bidi-isolate co-text-combine-digits-2 co-aspect-3/2 co-break-inside-avoid -co-z-10 co-object-[25%_75%]">
Your content
</div>HOW IT WORKS
Core concepts
- 01
Display utilities determine the formatting context before flex or grid alignment is applied.
- 02
Sticky positioning needs a scroll container and at least one inset such as co-top-0.
- 03
Direction controls inline order while writing-mode controls block flow; text-orientation controls glyph rotation inside vertical lines.
- 04
Logical inset-s/inset-e and inset-bs/inset-be utilities follow the active inline and block directions; start/end remain compatibility aliases.
- 05
Unicode bidi isolation protects mixed-direction fragments, while override modes should be reserved for semantic bidi markup equivalents.
- 06
Text-combine utilities set short horizontal runs—commonly two to four digits—inside vertical text.
- 07
Aspect ratios accept named tokens, numeric fractions, custom properties, and arbitrary values.
- 08
Page and column break utilities compose with print and responsive variants.
CSS PROPERTIES
What this family controls
aspect-ratiobreak-afterbreak-beforebreak-insidebox-decoration-breakbox-sizingdisplaypositioninsetfloatcleardirectionwriting-modetext-orientationunicode-biditext-combine-uprightoverflowoverscroll-behaviorobject-fitobject-positionvisibilityisolationz-indexVARIANTS
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.
<div class="co-inline-table md:co-sticky hover:co-inline-table">
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.
co-{display}
co-[content-visibility:auto]NEGATIVE VALUES
Reverse supported values
Place the minus sign before the framework prefix. Only properties where negative CSS values are meaningful accept this modifier.
-co-{utility}
-co-inset-x-4SCOPE BOUNDARIES
Intentional boundaries
This family is implemented, documented, and tested. These notes define where a neighboring family or browser behavior takes over.
- For HTML, prefer the dir attribute, bdi, and bdo elements when they express document semantics; CSS direction and unicode-bidi are primarily useful for generated or non-HTML structures.
- Sideways writing modes and digit combination are progressive enhancements whose rendering depends on browser and font support.
- Multi-column count, gap, and rule styling are tracked in the separate Tables and columns family.
- Negative values are intentionally limited to inset, positional offsets, and z-index.