On this page
Options
Four window classes
envUI names four widths of window, so you and an agent can say where a layout changes. Each is measured on the window around the app, not on the screen.
- Compact
A phone held upright, or a narrow pane.
- Medium
A tablet held upright, or a narrow window.
- Expanded
A tablet held sideways, or a laptop window.
- Large
A desktop window.
Behaviour
Components follow their space
An envUI component lays itself out for the space it sits in, not for the screen.
- In a narrow pane it looks as it would on a phone.
- Where there is room it spreads out, with nothing for an app to adjust.
Popups fit the window
Menus, dialogs and sheets size themselves to the window they open in, not to the pane they open from, so they always have room.
Larger text, narrower class
The window classes follow the reader's text size: with larger text, a window counts as a narrower class, so its layout never gets cramped.
Rules
Start from the phone: a screen is laid out for the compact class first, and spreads out from a class up. A list shows its details beside it from Expanded up, and above it below.
Words to use
Ask an agent for a layout that adapts in these words; envUI turns each into a window class or a layout that follows its space.
- On a phone
The compact window class: the narrowest layout, which every screen starts from.
- In a narrow pane
The same layout as on a phone, wherever the pane is.
- Side by side from expanded
Two parts next to each other in a laptop or desktop window, one above the other below it.
- Stack on a phone
Puts parts one above the other in the compact window class.
- Wrap
Lets a row of buttons or tags run onto the next line instead of squeezing.