Components

Browser viewport

A real document in an iframe. A responsive preview is framed as a small browser: window dots, no address, and the live width beside the range; presets, the range and the edge handle change the actual viewport width. Other previews omit the chrome.

Responsive presets

Responsive button

The presets cross the sm breakpoint inside the iframe. The padding readout comes from the real computed style.

A reference specimen

Reference demos compile their own isolated document with the system roles and the preset tokens they use.

Set a fixed or fluid width

The dashed outline is the authored containing block. Read the actual blue border-box width alongside its parent.

Used on the Responsive Design guide.

Usage and interface

DemoViewport hosts a complete site-authored document (document) or a site URL (src) in a real iframe inside div.ui-browser. Browser chrome appears only where the viewport itself is the lesson: responsive (or chrome) adds a bar of window dots, with no address; the tray head names the document, and the live width reads beside the range. Every other preview is data-variant="plain", a stage without chrome that a tray sets apart by tone. responsive also adds presets (widthPresets), a ui-range and Fit; theme, motion and print add only the controls a lesson needs, and inspect reads computed properties from the [data-target] element.

<Demo title="Responsive specimen" frame="none" caption="Cross sm inside the iframe.">  <DemoViewport    title="Responsive specimen"    document={html}    responsive    widthPresets={[{ label: 'Below sm', width: 833 }, { label: 'At sm', width: 835 }]}    height={180}  /></Demo>
<div class="ui-browser">  <div class="ui-browser-bar" aria-hidden="true"><span class="ui-browser-dots">…</span></div>  <div class="ui-browser-body"><div class="ui-browser-viewport"><iframe …></iframe><span class="ui-resize"></span></div></div>  <div class="ui-browser-tools" role="group">… <output class="ui-browser-size">835 px</output> …</div></div>

Derive breakpoint widths from the active preset; the numbers above illustrate the current sm boundary. A preset wider than the page scrolls inside the browser body. The edge handle is a pointer shortcut; the range input stays the keyboard control.