Layout

Where layouts switch, and what they are built from

Breakpoints are the widths a layout changes at. The page shell is the frame every doc page sits in: a navigation rail, the content column and a details rail. Both are measured in values with one home each, so a page never invents its own.

Breakpoints

The library’s steps ship in rift-ds/tokens/breakpoints, where JavaScript builds its media queries from them; the site’s own steps belong to its templates and stages. A stylesheet can’t read a variable inside a media query, so CSS writes the number, and the build fails on any width outside the set unless the rule says why it breaks somewhere else. Each bar below is the viewport’s width (its height, for a height step), from nothing to 1600px, and the filled part is where the step’s rules apply.

  • Sheet(max-width: 480px)Library

    Modal overlays drop their floating margin and run near edge to edge.

  • Phone(max-width: 600px)Library

    Body gutters tighten, and dense grids scroll inside their own blocks.

  • Chat takeover(max-width: 719px)Library

    The chat panel fills the viewport.

  • Template narrow(max-width: 760px)Site

    Template screens hand their app sidebar to its mobile drawer.

  • Mobile(max-width: 768px)Library

    The token layer’s only step: display type and section spacing collapse, and app shells fold into a drawer.

  • Tablet(max-width: 959px)Library

    The site’s left nav moves into the header drawer, and pages fall to one column.

  • Template compact(max-width: 1080px)Site

    Template screens tighten their content padding, and multi-column boards fall to one column.

  • Stage compact(max-width: 1099px)Site

    The playground’s floating control panel gives way to a bottom drawer, and inspect mode stands down.

  • Stack(max-width: 1151px)Library

    The site’s right details rail stacks below the main content.

  • Mid(max-width: 1279px)Library

    The site’s rails narrow and the column gap tightens, keeping the centre column at a readable measure.

  • Chat dock(min-width: 1440px)Library

    The chat panel docks beside the page instead of covering it.

  • Chat short height(max-height: 619px)Library

    The chat panel gives up its vertical insets on a short viewport.

Page shell

The site’s doc pages share one frame, sized by three custom properties in its global stylesheet. At the mid step both rails narrow and the gap tightens, so the content column keeps a readable measure; at the tablet step the navigation rail moves into the header drawer. These belong to the site, not the package.

Wider than 1279px--layout-sidebar-width 291px--layout-column-gap 60px (--gap-1500)--layout-rail-width 320px
Mid, 960 to 1279px--layout-sidebar-width 240px--layout-column-gap 40px (--primitive-gap-1000)--layout-rail-width 280px

Stacking

The order surfaces rise in when they leave their component: a menu over the page, a dialog over the menu, a toast over the dialog. The library’s layers are tokens anyone using the package can read; the site adds its own above them. Ordering inside a single component stays a small local number. Highest first.

  1. 1200--layer-site-overlayWhat must cover the chat panel: the command palette, an expanded diagram, toasts.Site
  2. 1100--layer-chat-panelThe chat panel itself.Library
  3. 1090--layer-chat-scrimThe scrim behind the chat panel.Library
  4. 1080--layer-chat-launcherThe chat button.Library
  5. 1040--layer-site-inspectInspect mode's section boxes; its hover box and popover step up from here.Site
  6. 1000--layer-site-chromeThe sticky header, its mobile menu, and the skip link onto it.Site
  7. 200--layer-toastTransient feedback, above every modal.Library
  8. 110--layer-commandThe command palette, above an open modal.Library
  9. 100--layer-modalDialogs, drawers and viewers.Library
  10. 100--layer-nav-railThe app rail and its open mobile drawer.Library
  11. 90--layer-nav-scrimThe scrim behind the mobile nav drawer.Library
  12. 80--layer-navFixed mobile navigation and its trigger.Library
  13. 50--layer-floatingTooltips, hover cards, context menus.Library
  14. 10--layer-stickyBars pinned to an edge while the page scrolls.Library
  15. 10--layer-dropdownMenus and panels anchored to a control.Library

Other layout properties

The rest of the shell’s measurements: clearances, heights and the chat panel’s seat. Values are as the stylesheet declares them.

PropertyValueWhat it sizes
--layout-toolbar-height
56px
The immersive stages’ slim toolbar height, shared by the bar and the pages that reserve room beneath it.
--layout-stage-clearance
calc(var(--layout-toolbar-height) + var(--layout-chat-inset) * 2)
The room a stage keeps clear under its floating toolbar.
--layout-stage-bottom-clearance
calc(var(--layout-chat-inset) * 2 + 48px)
The room a stage keeps clear above its bottom control bar.
--layout-anchor-clearance
128px
How far below the viewport top an anchor target comes to rest, clear of the sticky header and its blur.
--layout-viewport-height
100svh
What one viewport tall means to a page, so a section that fills the first screen behaves inside an embedding frame too.
--layout-chat-width
420px (--ds-chat-width)
The docked chat panel’s resting width, which its widen grip can grow.
--layout-chat-float-height
640px (--ds-chat-float-height)
The floating chat card’s resting height.
--layout-chat-inset
20px (--ds-chat-inset)
The gap the chat panel and its button keep from the viewport edges.