Utility classes

Ooko provides a curated set of utility classes for common layout and presentation work. They use the same public tokens as Ooko components and keep prototypes and small application layouts consistent without introducing a complete utility framework.

Every class starts with o-. Utilities live in the final ooko.utilities cascade layer, so they can adjust component defaults while a consumer's unlayered CSS can still override them.

<section class="o-grid xs:o-grid-cols-2 sm:o-grid-cols-3 o-gap-4 o-p-6 o-rounded-surface">
  <h2 class="o-typo-h3">Account</h2>
  <p class="o-text-ellipsis">A potentially long account description</p>
</section>

Layout

Purpose	Classes
Display	o-block, o-inline-block, o-hidden
Flex	o-flex, o-inline-flex, o-flex-row, o-flex-column
Flex wrapping	o-flex-wrap, o-flex-nowrap
Flex sizing	o-flex-1, o-shrink-0
Alignment	o-items-start, o-items-center, o-items-end, o-items-stretch
Justification	o-justify-start, o-justify-center, o-justify-end, o-justify-between
Grid	o-grid, o-inline-grid, o-grid-cols-1 through o-grid-cols-12
Inline sizing	o-w-full

Grid layout has two deliberately separate modes.

Parent-managed columns

Add o-grid-cols-{1..12} to the grid when every direct child should occupy one equal column. The parent owns the layout, so o-col-* classes on its children are ignored while that parent helper is active.

<div class="o-grid sm:o-grid-cols-3 o-gap-4">
  <article>Full width on mobile, one of three columns from sm</article>
  <article>Full width on mobile, one of three columns from sm</article>
  <article>Full width on mobile, one of three columns from sm</article>
</div>

Use this mode for regular lists, card collections, and form controls. Unprefixed helpers apply at every viewport size; responsive variants use a mobile-first cascade:

Prefix	Starts at	Intended range
xs:	0	Mobile
sm:	48rem	Tablet
md:	64rem	Desktop
lg:	80rem	Wide desktop

<!-- Two columns on mobile, six on tablet, twelve on desktop. -->
<div class="o-grid xs:o-grid-cols-2 sm:o-grid-cols-6 md:o-grid-cols-12"></div>

Each prefix supports o-grid-cols-1 through o-grid-cols-12. A responsive variant continues to apply above its breakpoint until a later variant overrides it.

Child-managed columns

Use o-grid without any active o-grid-cols-* helper when children need individual widths. The grid provides twelve internal tracks. A direct child without o-col-* occupies the full width; use o-col-{1..12} to set a specific width.

<div class="o-grid o-gap-4">
  <header>Full width</header>
  <aside class="sm:o-col-4 md:o-col-3">Sidebar</aside>
  <main class="sm:o-col-8 md:o-col-9">Content</main>
</div>

Children naturally stack at full width on mobile. From sm, the example becomes a 4/8 layout; from md, it becomes 3/9. Column and row helpers share the same responsive prefixes as parent column helpers.

Pattern	Effect
o-col-{1..12}	Occupies the requested column count
o-row-{1..12}	Occupies the requested row count

Row helpers remain usable in either mode because the parent helpers only own column sizing:

<div class="o-grid sm:o-grid-cols-2 o-gap-2">
  <article class="sm:o-row-2">Tall card</article>
  <article>Card</article>
  <article>Card</article>
</div>

More complex grid placement belongs in consumer CSS.

Spacing

Spacing helpers are available for steps 0, 1, 2, 3, 4, 6, and 8 from the Ooko spacing scale.

Pattern	Property
o-gap-{step}	gap
o-p-{step}	padding
o-px-{step}	padding-inline
o-py-{step}	padding-block
o-m-{step}	margin
o-mx-{step}	margin-inline
o-my-{step}	margin-block
o-mx-auto	Centers a constrained inline-size box

x maps to the logical inline axis and y maps to the logical block axis, so the utilities remain compatible with different writing directions. Individual-side and negative spacing helpers are deliberately omitted.

Colors

Use o-bg-default, o-bg-inverted, o-text-default, and o-text-inverted for the base theme colors.

Color families support a small set of semantic emphasis levels:

o-bg-{color}-{subtle|default|deep}
o-text-{color}-{default|deep|deepest}

color accepts primary, secondary, info, success, warning, danger, or neutral. Utilities set only background-color or color; they do not choose a contrasting foreground automatically.

Radius and typography

Purpose	Classes
Radius	o-rounded-none, o-rounded-compact, o-rounded-control, o-rounded-surface, o-rounded-overlay, o-rounded-full
Typography	o-typo-display, o-typo-h1 through o-typo-h6, o-typo-lead, o-typo-body, o-typo-small, o-typo-label, o-typo-hint
Alignment	o-text-start, o-text-center, o-text-end
Truncation	o-text-ellipsis

Typography helpers apply the complete role: font size, line height, and weight. They change only visual treatment; use semantic HTML elements for document structure.

o-text-ellipsis truncates one line and includes min-inline-size: 0 so it works on flex and grid children when the surrounding layout provides a constrained inline size.

Accessibility

o-sr-only visually hides content while keeping it available to assistive technologies. Use o-hidden only when content should be removed from both the visual and accessibility trees.

Scope

Responsive variants are limited to grid column counts. The utilities intentionally omit responsive versions of every other helper, hover and focus variants, positioning, z-index, arbitrary values, transforms, animations, borders, shadows, and exhaustive sizing. Write component or application CSS when a layout needs those capabilities.