Scaffold

Fixed Classes

The start and end components have fixed classes by default. Additionally, if you use AppBar or BottomBar, these also have fixed classes.

Margins Usage

To achieve a correct layout, you must use margins in mainClass, startClass, and endClass.

• If you have a start sidebar with w-48, use ml-48 in mainClass
• If you have an end sidebar with w-56, use mr-56 in mainClass
• If you have an AppBar with h-16, use mt-16 in mainClass, startClass, and endClass

vh Utilities

The vh-* utilities calculate the viewport height by subtracting the specified value:

• vh-16: Calculates calc(100vh - 4rem) - Ideal when there's only an AppBar with h-16
• vh-32: Calculates calc(100vh - 8rem) - Ideal when there's both AppBar and BottomBar, each with h-16

These utilities are applied to mainClass, startClass, and endClass so that components have the correct height without causing scroll on the main page.

Complete Example

<Scaffold
  mainClass="lg:ml-48 xl:mr-56 vh-16 mt-16"
  startClass="vh-16 mt-16"
  endClass="vh-16 mt-16"
>
  {#snippet appBar()}
    <AppBar class="h-16">
      <!-- AppBar content -->
    </AppBar>
  {/snippet}

  {#snippet start()}
    <Sidebar class="w-48">
      <!-- Start sidebar content -->
    </Sidebar>
  {/snippet}

  <!-- Main content -->
  <div>Content</div>

  {#snippet end()}
    <div class="w-56">
      <!-- End sidebar content -->
    </div>
  {/snippet}
</Scaffold>

In this example:

• vh-16 is used because there's an AppBar with h-16
• mt-16 creates space for the fixed AppBar
• ml-48 creates space for the start sidebar
• mr-56 creates space for the end sidebar