Dimensions

Dimension utility classes let you quickly set width, height, min/max constraints, and responsive sizing for any element.

How It Works

Dimension utilities use CSS properties and your design system tokens:

.ro-u-w-large-4 {
  width: var(--ro-size-large-4);
}
.ro-u-h-large-2 {
  height: var(--ro-size-large-2);
}
.ro-u-w-50-prc {
  width: 50%;
}
.ro-u-h-25-vh {
  height: 25vh;
}
.ro-u-w-max-content {
  width: max-content;
}

---

Combine dimension utilities with grid, flex, and gutter utilities for layouts.

Use Cases

Fixed Width from Tokens

<div class="ro-card ro-border ro-u-w-large-4">Width: var(--ro-size-large-4)</div>

Preview

Width: var(—ro-size-large-4)

Responsive Percent Width

<div class="ro-card ro-border ro-u-w-50-prc">50% width</div>

Preview

50% width

Viewport Width & Height

<div class="ro-card ro-border ro-u-w-100-vw ro-u-h-25-vh">Full viewport width, 25% viewport height</div>

Preview

Full viewport width, 25% viewport height

Min/Max Constraints

<div class="ro-card ro-border ro-u-max-w-large-8 ro-u-min-h-large-2">Max width large-8, min height large-2</div>

Preview

Max width large-8, min height large-2

Content-Based Sizing

<div class="ro-card ro-border ro-u-w-max-content">Width fits content</div>

Preview

Width fits content

Properties

Width

Class	Description
.ro-u-w-{n}	Width from standard $sizes token (0-14)
.ro-u-w-large-{n}	Width from $large-sizes token (1-10)
.ro-u-w-{percentage}-prc	Width as % (25, 50, 75, 100)
.ro-u-w-{percentage}-vw	Width as viewport % (vw) (25, 50, 75, 100)
.ro-u-w-max-content	Width: max-content

Max Width

Class	Description
.ro-u-max-w-{n}	Max-width from standard $sizes (0-14)
.ro-u-max-w-large-{n}	Max-width from $large-sizes (1-10)
.ro-u-max-w-{percentage}-prc	Max-width as % (25, 50, 75, 100)
.ro-u-max-w-{percentage}-vw	Max-width as viewport % (25, 50, 75, 100)

Min Width

Class	Description
.ro-u-min-w-{n}	Min-width from standard $sizes (0-14)
.ro-u-min-w-large-{n}	Min-width from $large-sizes (1-10)
.ro-u-min-w-{percentage}-prc	Min-width as % (25, 50, 75, 100)
.ro-u-min-w-{percentage}-vw	Min-width as viewport % (25, 50, 75, 100)

Height

Class	Description
.ro-u-h-{n}	Height from standard $sizes (0-14)
.ro-u-h-large-{n}	Height from $large-sizes token (1-10)
.ro-u-h-{percentage}-prc	Height as % (25, 50, 75, 100)
.ro-u-h-{percentage}-vh	Height as viewport % (vh) (25, 50, 75, 100)

Max Height

Class	Description
.ro-u-max-h-{n}	Max-height from standard $sizes (0-14)
.ro-u-max-h-large-{n}	Max-height from $large-sizes (1-10)
.ro-u-max-h-{percentage}-prc	Max-height as % (25, 50, 75, 100)
.ro-u-max-h-{percentage}-vh	Max-height as viewport % (25, 50, 75, 100)

Min Height

Class	Description
.ro-u-min-h-{n}	Min-height from standard $sizes (0-14)
.ro-u-min-h-large-{n}	Min-height from $large-sizes (1-10)
.ro-u-min-h-{percentage}-prc	Min-height as % (25, 50, 75, 100)
.ro-u-min-h-{percentage}-vh	Min-height as viewport % (25, 50, 75, 100)

Size Tokens Reference

$sizes (Small to Medium)

Token	CSS Variable	Value
0	--ro-size-0	0px
1	--ro-size-1	4px
2	--ro-size-2	8px
3	--ro-size-3	12px
4	--ro-size-4	16px
5	--ro-size-5	20px
6	--ro-size-6	24px
7	--ro-size-7	32px
8	--ro-size-8	40px
9	--ro-size-9	48px
10	--ro-size-10	64px
11	--ro-size-11	80px
12	--ro-size-12	96px
13	--ro-size-13	120px
14	--ro-size-14	160px

$large-sizes (Large)

Token	CSS Variable	Value
large-1	--ro-size-large-1	192px
large-2	--ro-size-large-2	256px
large-3	--ro-size-large-3	288px
large-4	--ro-size-large-4	320px
large-5	--ro-size-large-5	384px
large-6	--ro-size-large-6	448px
large-7	--ro-size-large-7	512px
large-8	--ro-size-large-8	576px
large-9	--ro-size-large-9	672px
large-10	--ro-size-large-10	768px

Use these tokens with dimension utilities for consistent sizing across your UI.