LAYOUT

Scaffold

Scaffold composes the complete application shell from explicit bar, side, main, and overlay regions.

MENTAL MODEL

One owner for the application shell

Use one Scaffold in a nested layout chain. boxed:true centers only the start, main, and end body at 96rem on web or 1536 logical units on Android and iOS. AppBar, BottomBar, and overlays remain full width.

dowe
layout DocsLayout
  signal openDrawer value:false
  Scaffold boxed:true
    appBar
      AppBar variant:"soft" position:"fixed" bordered:true
        start
          IconButton label:"Open navigation" variant:"ghost" show:{ xs:true md:false } onClick:{ set:openDrawer value:!openDrawer } icon:"menu-dots"
          Text weight:"bold"
            "Dowe"
    start
      Sidebar show:{ xs:false md:true } variant:"soft" scheme:"surface"
        body
          SideNav size:"sm" wide:true
            item label:"Overview" href:"/docs"
    main
      children
    bottomBar
      BottomBar variant:"soft" scheme:"surface" bordered:true
        tab href:"/docs" label:"Overview"
          Icon name:"home"
        tab href:"/docs/views/layout/scaffold" label:"Scaffold"
          Icon name:"layers"
    overlays
      Drawer open:openDrawer position:"start" variant:"soft" show:{ xs:true md:false }
        body
          SideNav size:"sm" wide:true
            item label:"Overview" href:"/docs"

STARTUP BOUNDARY

Keep Splash beside the normal Scaffold root

A layout may declare one init hook and one direct Splash sibling. While the bound boolean Signal is true, Dowe shows only the Splash children. When it becomes false, the normal Scaffold replaces that branch without rerunning init for the mounted scope.

dowe
layout AppLayout
  signal isLoading value:true
  init
    request session method:"GET" route:"/api/session"
    if session.ok
      set isLoading value:false
    else
      set isLoading value:false
  Scaffold
    main
      children
  Splash bind:isLoading
    Section minH:"vh-0"
      Flex direction:"column" align:"center" justify:"center" gap:3
        Icon name:"svg-spinners:ring-resize" stroke:"primary" w:10 h:10
        Text color:"muted"
          "Loading application"

Splash has no default spinner or styling. This example authors a portable Icon SVG Spinner and adjacent status text; children for the routed page remain inside Scaffold main rather than inside Splash.

LIVE EXAMPLE

A complete shell in one preview

The example keeps the AppBar, desktop Sidebar, mobile Drawer, main content, and BottomBar in one routed shell so their responsive placement can be inspected together.

REGIONS

Explicit shell structure

Each region appears at most once. main is required; the remaining regions are optional and preserve the same order on web, Android, and iOS.

Region
Required
Purpose

No data

There are no records to display

API

Props

Scaffold also accepts applicable common spacing, sizing, visibility, and accessibility props. boxed defaults to false; when enabled, it constrains only the shell body independently from any boxed width owned by its layout bars.

Prop
Type
Default

No data

There are no records to display