Layout
Work frame-first: decide who owns global chrome, which regions scroll, and how content reflows before choosing decorative details.
The three composition levels
Primitive
One reusable interaction or visual contract, such as button, field, dialog, or table.
Block
One focused section composed from primitives. It never owns the application viewport.
Page
An ordered content frame. Shell pages are the explicit exception that also own global navigation.
Shell ownership
Your host layout owns document metadata, global navigation, session controls, and the main viewport. A content page owns its page header, local navigation, and content regions. Avoid nested full-height shells and competing scroll containers.
Responsive contracts
- Use grids for collections that reflow; use stacks for fixed-direction forms and toolbars.
- Prefer intrinsic sizing and bounded max-width containers over fixed viewport widths.
- Move global sidebar navigation into a start-side sheet on narrow viewports.
- Keep tabular data readable with deliberate column priority or horizontal overflow.
- Use logical start/end spacing so every frame mirrors in RTL.
terminal
php artisan ui:build "responsive customer support dashboard"
php artisan ui:show pages/app-shell-01 --skeleton --json