UiSvelte

Scaffold

Scaffold is a comprehensive layout component that provides the foundation for your application. It manages the positioning of AppBar, Sidebar, Footer, and BottomNav to create professional, responsive layouts. It should only be used in layout files (+layout.svelte).

Brand
Home Docs

Hero Section

Features Section

CTA Section

© 2024 Company

Layout Files Only

The Scaffold component should only be used in layout files (+layout.svelte). It provides the structural foundation for your entire page and coordinates fixed elements like AppBar, Sidebar, and BottomNav. Using it in regular page components will cause layout conflicts.

Layout Patterns

Landing Pages

  • AppBar at top (fixed)
  • Full-width content
  • Footer at bottom
  • No sidebars
  • mainClass="vh-16 mt-16"

Dashboard

  • AppBar at top (fixed)
  • Left/right sidebars
  • Responsive (hidden on mobile)
  • startClass="invisible lg:visible lg:w-56"
  • Use Drawer for mobile nav

Mobile App

  • AppBar at top
  • BottomNav for navigation
  • No sidebars
  • mainClass="mt-16 pb-16"

Key Concepts

1. Body Class - AppBar Spacing

When using an AppBar, add top margin to bodyClass to prevent content from being hidden:

  • If AppBar has h-16, use bodyClass="mt-16"
  • If AppBar has h-20, use bodyClass="mt-20"
2. Start/End Class - Sidebar Width

Set the width of sidebars using startClass and endClass:

  • startClass="w-56" - Fixed width sidebar
  • startClass="invisible lg:visible lg:w-56" - Responsive sidebar
3. vh Utilities - Sidebar Height

Apply vh-* utilities to Sidebar components for proper height:

  • vh-16 = calc(100vh - 4rem) - With AppBar h-16
  • vh-32 = calc(100vh - 8rem) - With AppBar + BottomNav
4. Main Class - Content Styling

Use mainClass to style the main content area:

  • mainClass="p-4" - Add padding
  • mainClass="lg:p-4 pb-16" - Responsive padding with BottomNav space
  • mainClass="vh-16 mt-16" - Full height content (landing pages)

Real-World Examples

Props

Prop
Type
Default