Breakpoints

The theme names the widths where values step; components name the breakpoint, never the pixel width.

Interactive Playground

xs≥ 0px

sm≥ 480px

md≥ 768px

lg≥ 1024px

xl≥ 1280px

Simulate a viewport width

width

flex-direction: xs(column) md(row);

rowfrom md()

gap: xs(space(2)) md(space(4));

space(4)from md()

width: xs(100%) lg(50%) xl(33%);

100%from xs()

The thresholds above are the active theme's breakpoints. They are compiled into every component's media queries, so applyTheme({ breakpoints: { md: 900 } }) is refused with UXD_THEME_STRUCTURE: to move one, change the theme file and rebuild.

Window Width0px

Active in this windowXS

Active at 820pxMD

Resize the browser to see the active token change; move the slider to inspect any width without resizing.

Fluid Layout

Layouts that flow naturally across device sizes.

Adaptive

Styles that change based on the viewport width.

Modular

Component-based design for maximum reusability.

Theme uxdsl.theme.json, merged over the base theme

{
  "breakpoints": {
    "xs": 0,
    "sm": 480,
    "md": 800,
    "lg": 1024,
    "xl": 1280
  }
}

UXDSL you write example.uxdsl

.layout {
  display: flex;
  flex-direction: xs(column) md(row);
  gap: density(3);
}

CSS you get compiled by uxdsl; :root shows only this token

:root { --uxdsl__density__3: var(--uxdsl__space__3); }
@media (min-width: 800px) { :root { --uxdsl__density__3: var(--uxdsl__space__4); } }
@media (min-width: 1280px) { :root { --uxdsl__density__3: var(--uxdsl__space__5); } }
.layout {
  display: flex;
  flex-direction: column;
  gap: var(--uxdsl__density__3);
}
@media (min-width: 800px) { .layout { flex-direction: row; } }

Rules

The base theme’s breakpoints (minimum viewport widths)
Name	From
`xs()`	0px
`sm()`	480px
`md()`	768px
`lg()`	1024px
`xl()`	1280px

The theme is the only place a threshold is set: breakpoints in the theme file. The base (xs) is 0; widths are distinct, non-negative numbers (UXD_BP_INVALID). A new name adds its function.
A name is a width, not a device. Breakpoints are viewport min-width media queries; for a component that responds to its container, write native @container next to UXDSL.
A value applies from its breakpoint up, until a later one overrides it: in xs(column) md(row), lg and xl are still row. It steps; it does not interpolate.
For spacing, prefer a density over a breakpoint in the component: the progression then lives in the theme, shared. Use breakpoint functions for layout changes that belong to the component.
Moving a threshold moves every rule compiled with it, so it is a theme edit and a rebuild: applyTheme refuses it with UXD_THEME_STRUCTURE. inspectResponsiveValue (uxdsl/language) tells an editor what a value resolves to at a width, without a document — that is what the demo above does.

.layout { display: flex; flex-direction: xs(column) md(row); gap: density(3); }
.sidebar { display: xs(none) lg(block); }

The guide for coding agents is on For AI agents.