LA UI Style Guide - Utilities

12. Utilities: utilities.css

Small single-purpose helpers fill gaps between components. Each class does one thing.

Keep utilities small

Each helper should do one thing. If a pattern repeats across several components, promote it to a component. Do not use utilities to recreate component behavior.

Do not chain layout utilities

Stacking .la-grid-3 inside .la-split inside .la-flex-row is a sign that you need a proper component, not more helpers.

Layout grids

CSS grid helpers for common column counts. All collapse to a single column at 720px. Use .la-grid-auto when the item count is unknown. It wraps automatically. Use .la-split for a content area plus a fixed 330px side panel.

.la-grid-2 : two even columns

.la-grid-3 : three even columns

.la-grid-4 : four even columns

.la-grid-auto : wraps at 220px per column

One

Two

Three

Four

Five

.la-split : main content + 330px side panel

Main content area

Side panel (160px in preview)

Stack and flex

Vertical stack and flex row helpers. Use .la-stack for a normal gap-4 column of items and .la-stack-sm for tighter gap-2. Flex helpers: .la-flex-row wraps, .la-flex-col stacks. Use .la-flex-1/2/3 to assign flex-grow shares.

.la-stack : vertical stack, gap 4

Row one

Row two

Row three

.la-stack-sm : vertical stack, gap 2

Row one

Row two

Row three

.la-flex-row + .la-flex-1/2/3 : flex row with share-based widths

flex-1

flex-2 (twice as wide)

flex-1

.la-flex-col : vertical flex, gap 4

Item one

Item two

.la-align-end : push a flex child to the cross-axis end

Normal item

Aligned end

Text helpers

Inline modifiers for text treatment. Use these for one-off overrides, not for styling whole blocks of content.

Class	Example	What it does
`.la-muted`	The quick brown fox	Sets color to `var(--la-muted)`
`.la-small`	The quick brown fox	Sets font-size to `var(--la-text-sm)`
`.la-mono`	const x = records.find(…)	Switches to `var(--la-mono)` font stack
`.la-text-link`	An inline text link	Brand-colored underlined link with hover state
`.la-dash-title`	Section label	Small uppercase label for dashboards and panel headers
`.la-page-subtext`	Short helper text below a page title	Muted small type for page-level descriptions
`.la-back-link`	← Back to records	Lightweight navigation link with brand hover

Spacing and dividers

Margin helpers and horizontal rules. Use these for edge-case adjustments. The number suffix maps directly to the spacing token scale.

Min-width helpers: .la-min-w-120 through .la-min-w-220

120

140

160

190

200

220

Margin helpers: .la-m-0, .la-mt-2/4/6, .la-mb-3/4/5/6

Top margin

base (no class)

.la-mt-2

.la-mt-4

.la-mt-6

Bottom margin

.la-mb-3

.la-mb-4

.la-mb-5

.la-mb-6

following element

Token scale: 2 = 0.5rem · 3 = 0.75rem · 4 = 1rem · 5 = 1.25rem · 6 = 1.5rem

.la-divider : standard horizontal rule

Content above

Content below

.la-section-divider : brand accent rule

Content above

Content below

Code block

Preformatted code snippet with monospace font and a subtle tinted background. Use for short examples and output.

.la-code-block

const result = records.filter(r => r.status === 'approved');
console.log(`${result.length} records ready for export.`);

Tooltip

Add data-tooltip="…" to any element for a hover and keyboard-focus tooltip. The bubble appears above the element and works on buttons, tags, and inline elements.

[data-tooltip] : hover or focus to reveal

Approved

Visibility and accessibility

Helpers for showing, hiding, and controlling how elements participate in layout and assistive technology.

.la-hidden : full hide

First item

Hidden item (not rendered)

Third item

Applies display: none !important. The middle tile above is completely removed from layout and from assistive tech.

.la-sr-only : screen reader only

Visually icon-only; reads "Download CSV" to screen readers

.la-d-inline : force inline display

Sentence continues with

a <div> forced inline

without breaking to its own line.

.la-form-contents : display: contents

Removes the wrapper box from layout so its children participate directly in the parent grid or flex. Use when a grouping element such as a <fieldset> must be invisible to layout.

Component helpers

Utilities tied to specific component contexts. Apply them at the usage site, not inside the component definition.

.la-filter-bar : wrapping flex row for filters and quick actions

.la-input-inline : compact input for tight rows or table cells

Quantity Unit

.la-card-table-footer : footer strip beneath a table card

Name	Status
Record A	Active
Record B	Pending

.la-lucide : Lucide icon baseline

Size with width/height, tint with color. Sets fill: none, stroke: currentColor, rounded caps.

Page header

Standard title block for content pages. Title and optional description sit on the left. Action buttons sit on the right via .la-page-header-actions. The heading removes its default bottom margin inside a page header.

.la-page-header + .la-page-header-actions