Stack Layout

The stack layout utility groups items in a flex row or column with consistent gap, alignment, and wrapping. It is the primary layout primitive in Ringover UIs.

Basic Stack

Use .ro-stack (or .ro-u-stack) for a horizontal flex row with default gap and center alignment.

<div class="ro-stack">
<div class="ro-demo-box">Item 1</div>
<div class="ro-demo-box">Item 2</div>
<div class="ro-demo-box">Item 3</div>
</div>

Preview

Item 1

Item 2

Item 3

Direction

Add .ro-dir-vertical or data-ro-dir="vertical" for a column layout.

<div class="ro-stack ro-dir-vertical ro-items-start">
<div class="ro-demo-box">Item 1</div>
<div class="ro-demo-box">Item 2</div>
</div>

Preview

Item 1

Item 2

Gap

Control spacing with gap classes ro-gap-0 through ro-gap-6, ro-gap-1/2, or data-ro-gap attributes.

<div class="ro-stack ro-gap-4">…</div>
<div class="ro-stack" data-ro-gap="2">…</div>

Justify and Align

Class / attribute	Maps to
.ro-justify-start, [data-ro-justify="start"]	flex-start
.ro-justify-center, [data-ro-justify="center"]	center
.ro-justify-end, [data-ro-justify="end"]	flex-end
.ro-justify-between, [data-ro-justify="between"]	space-between
.ro-justify-around, [data-ro-justify="around"]	space-around
.ro-align-start, [data-ro-align="start"]	start
.ro-align-center, [data-ro-align="center"]	center
.ro-align-end, [data-ro-align="end"]	end
.ro-align-baseline, [data-ro-align="baseline"]	baseline
.ro-align-stretch, [data-ro-align="stretch"]	stretch

Other Modifiers

Class / attribute	Description
.ro-inline, [data-ro-inline]	inline-flex display.
.ro-wrap-no, [data-ro-wrap="no"]	Disables wrapping.
.ro-fill, [data-ro-fill]	Children grow to fill space (flex: 1).
.ro-u-flex-1	Makes a single child flex-grow.

Overflow Utilities

Class	Description
.ro-u-overflow-x-scroll	Horizontal scroll.
.ro-u-overflow-x-hidden	Hide horizontal overflow.
.ro-u-overflow-y-scroll	Vertical scroll.
.ro-u-overflow-y-hidden	Hide vertical overflow.

The same modifiers can be expressed with data-ro-* attributes on .ro-stack when class names are not convenient (for example in templating systems).