App / Page / Drawer

Responsive layout system inspired by Ionic. .header, .content, and .footer are generic structural components that work inside any flex-column container: page, drawer, card, modal, etc. All children go directly inside .page — no wrapper needed.

Basic Structure

Preview

Main scrollable content area

The content scrolls while header and footer stay fixed.

<div class="app">
  <div class="page">
    <header class="header">
      <div style="font-weight: 600;">Header</div>
    </header>

    <main class="content">
      <div style="padding: 1.5rem;">
        <p>Main scrollable content area</p>
        <p style="margin-top: 0.5rem; opacity: 0.5; font-size: 0.875rem;">The content scrolls while header and footer stay fixed.</p>
      </div>
    </main>

    <footer class="footer">
      <div style="text-align: center; font-size: 0.875rem; width: 100%;">Footer / Tabbar</div>
    </footer>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col h-dvh overflow-hidden bg-base-100">
  <div class="relative flex flex-col flex-1 min-h-0 overflow-hidden">
    <header class="sticky top-0 z-50 shrink-0 bg-base-100 border-b border-base-300">
      <div class="px-4 py-3 font-semibold">Header</div>
    </header>

    <main class="flex-1 min-w-0 overflow-y-auto">
      <div class="p-6">
        <p>Main scrollable content area</p>
      </div>
    </main>

    <footer class="sticky bottom-0 z-50 shrink-0 bg-base-100 border-t border-base-300">
      <div class="px-4 py-3 text-center text-sm">Footer / Tabbar</div>
    </footer>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

Drawer with toggle (no JS)

Preview

Main scrollable area with its own header and footer inside content.

The drawer has no header/footer — just padded content like Ionic.

<input type="checkbox" id="drawer-1" class="drawer-toggle" checked />
<div class="app">
  <div class="page">
    <header class="header">
      <label for="drawer-1" style="background:none; border:1px solid var(--color-base-300); border-radius:0.375rem; padding:0.25rem 0.5rem; cursor:pointer; font-size:0.75rem;">
        Toggle Drawer
      </label>
      <div style="font-weight: 600;">My App</div>
    </header>

    <label for="drawer-1" class="drawer-backdrop"></label>

    <aside class="drawer drawer-start">
      <div class="content" style="padding: 1rem 0.75rem;">
        <nav>
          <a href="#" style="display:block; padding:0.625rem 1rem; border-radius:0.5rem; font-size:0.9375rem;">Home</a>
          <a href="#" style="display:block; padding:0.625rem 1rem; border-radius:0.5rem; font-size:0.9375rem;">Settings</a>
          <a href="#" style="display:block; padding:0.625rem 1rem; border-radius:0.5rem; font-size:0.9375rem;">Profile</a>
          <a href="#" style="display:block; padding:0.625rem 1rem; border-radius:0.5rem; font-size:0.9375rem;">About</a>
        </nav>
      </div>
    </aside>

    <main class="content">
      <div class="header no-border">
        <span style="font-weight: 500;">Dashboard</span>
      </div>
      <div class="content" style="padding: 1rem;">
        <p>Main scrollable area with its own header and footer inside content.</p>
        <p style="margin-top: 0.5rem; opacity: 0.5; font-size: 0.875rem;">The drawer has no header/footer — just padded content like Ionic.</p>
      </div>
      <div class="footer">
        <span style="font-size: 0.75rem; opacity: 0.5;">Footer</span>
      </div>
    </main>

    <footer class="footer">
      <div style="text-align: center; font-size: 0.875rem; width: 100%;">Tabbar</div>
    </footer>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col h-dvh overflow-hidden bg-base-100">
  <div class="relative grid grid-cols-[auto_1fr] grid-rows-[auto_1fr_auto] flex-1 min-h-0 overflow-hidden">
    <header class="col-span-2 sticky top-0 z-50 shrink-0 flex items-center gap-3 px-4 py-3 bg-base-100 border-b border-base-300">
      <button onclick="this.closest('.relative').querySelector('aside').classList.toggle('hidden')" class="text-xs border border-base-300 rounded-md px-2 py-1 cursor-pointer">
        Toggle Drawer
      </button>
      <span class="font-semibold">My App</span>
    </header>

    <aside class="w-64 border-r border-base-300 bg-base-100 overflow-y-auto">
      <nav class="p-3 space-y-1">
        <a href="#" class="block px-4 py-2.5 rounded-lg text-sm">Home</a>
        <a href="#" class="block px-4 py-2.5 rounded-lg text-sm">Settings</a>
        <a href="#" class="block px-4 py-2.5 rounded-lg text-sm">Profile</a>
        <a href="#" class="block px-4 py-2.5 rounded-lg text-sm">About</a>
      </nav>
    </aside>

    <main class="flex-1 min-w-0 overflow-y-auto flex flex-col">
      <div class="shrink-0 flex items-center px-4 py-3">
        <span class="font-medium">Dashboard</span>
      </div>
      <div class="flex-1 p-4">
        <p>Main scrollable area.</p>
      </div>
      <div class="shrink-0 flex items-center px-4 py-2 border-t border-base-300">
        <span class="text-xs opacity-50">Footer</span>
      </div>
    </main>

    <footer class="col-span-2 sticky bottom-0 z-50 shrink-0 px-4 py-3 bg-base-100 border-t border-base-300 text-center text-sm">
      Tabbar
    </footer>
  </div>
</div>

Requires: tw.min.css

// No JavaScript needed — uses CSS checkbox toggle:
// <input type="checkbox" id="d" class="drawer-toggle">
// <label for="d">Toggle</label>
// <label for="d" class="drawer-backdrop"></label>
//
// CSS handles everything:
// .drawer-toggle:checked ~ .app .page .drawer { transform: translateX(0); }
// .drawer-toggle:checked ~ .app .page .drawer-backdrop { opacity: 1; }
//
// Optional: JS alternative for frameworks
// const drawer = document.querySelector('.drawer');
// drawer.classList.toggle('drawer-collapsed');  // desktop
// drawer.classList.toggle('drawer-open');        // mobile
// backdrop.classList.toggle('drawer-backdrop-open');

Drawer with header & footer

Preview

Content area with its own header, content, and footer.

The drawer has header + footer. The main content also has nested header/content/footer.

<input type="checkbox" id="drawer-2" class="drawer-toggle" checked />
<div class="app">
  <div class="page">
    <label for="drawer-2" class="drawer-backdrop"></label>

    <aside class="drawer drawer-start">
      <div class="header">
        <h2 class="drawer-title">Menu</h2>
      </div>
      <div class="content">
        <nav style="padding: 0.5rem;">
          <a href="#" style="display:block; padding:0.5rem 0.75rem;">Home</a>
          <a href="#" style="display:block; padding:0.5rem 0.75rem;">Settings</a>
          <a href="#" style="display:block; padding:0.5rem 0.75rem;">Profile</a>
        </nav>
      </div>
      <div class="footer">
        <span style="font-size:0.75rem; opacity:0.5;">v3.0</span>
      </div>
    </aside>

    <main class="content" style="padding: 1rem; background: var(--color-base-200);">
      <div class="header no-border" style="background: var(--color-base-100); border-radius: 0.5rem 0.5rem 0 0;">
        <label for="drawer-2" style="background:none; border:1px solid var(--color-base-300); border-radius:0.375rem; padding:0.25rem 0.5rem; cursor:pointer; font-size:0.75rem;">
          Toggle Drawer
        </label>
        <span style="font-weight: 500;">Orders</span>
      </div>
      <div class="content" style="padding: 1rem; background: var(--color-base-100);">
        <p>Content area with its own header, content, and footer.</p>
        <p style="margin-top: 0.5rem; opacity: 0.5; font-size: 0.875rem;">The drawer has header + footer. The main content also has nested header/content/footer.</p>
      </div>
      <div class="footer" style="background: var(--color-base-100); border-radius: 0 0 0.5rem 0.5rem;">
        <span style="font-size: 0.75rem; opacity: 0.5;">Footer</span>
      </div>
    </main>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col h-dvh overflow-hidden bg-base-100">
  <div class="relative grid grid-cols-[auto_1fr] grid-rows-[1fr] flex-1 min-h-0 overflow-hidden">
    <aside class="w-64 flex flex-col border-r border-base-300 bg-base-100">
      <div class="shrink-0 flex items-center px-4 py-3 border-b border-base-300">
        <h2 class="font-semibold text-sm">Menu</h2>
      </div>
      <nav class="flex-1 overflow-y-auto p-2 space-y-0.5">
        <a href="#" class="block px-3 py-2 text-sm rounded-lg">Home</a>
        <a href="#" class="block px-3 py-2 text-sm rounded-lg">Settings</a>
        <a href="#" class="block px-3 py-2 text-sm rounded-lg">Profile</a>
      </nav>
      <div class="shrink-0 flex items-center px-4 py-2 border-t border-base-300">
        <span class="text-xs opacity-50">v3.0</span>
      </div>
    </aside>

    <main class="flex-1 min-w-0 overflow-y-auto p-4 bg-base-200">
      <div class="bg-base-100 rounded-lg flex flex-col min-h-full">
        <div class="shrink-0 flex items-center gap-3 px-4 py-3">
          <button onclick="this.closest('.relative').querySelector('aside').classList.toggle('hidden')" class="text-xs border border-base-300 rounded-md px-2 py-1 cursor-pointer">
            Toggle Drawer
          </button>
          <span class="font-medium">Orders</span>
        </div>
        <div class="flex-1 p-4">
          <p>Content area with its own header, content, and footer.</p>
        </div>
        <div class="shrink-0 flex items-center px-4 py-2 border-t border-base-300">
          <span class="text-xs opacity-50">Footer</span>
        </div>
      </div>
    </main>
  </div>
</div>

Requires: tw.min.css

// No JavaScript needed — uses CSS checkbox toggle.
// The <label for="drawer-id"> toggles the hidden checkbox,
// and CSS :checked selector shows/hides the drawer.
//
// Optional: JS alternative for frameworks
// const drawer = document.querySelector('.drawer');
// drawer.classList.toggle('drawer-collapsed');  // desktop
// drawer.classList.toggle('drawer-open');        // mobile
// backdrop.classList.toggle('drawer-backdrop-open');

Drawer Sizes

Preview

Select drawer size:

<div class="app">
  <div class="page">
    <aside class="drawer drawer-start" style="--drawer-width: 280px;">
      <div class="header">
        <h2 class="drawer-title">default (280px)</h2>
      </div>
      <div class="content" style="padding: 0.75rem;">
        <nav>
          <a href="#" style="display:block; padding:0.5rem 0.75rem;">Home</a>
          <a href="#" style="display:block; padding:0.5rem 0.75rem;">Settings</a>
        </nav>
      </div>
    </aside>

    <main class="content" style="padding: 1rem;">
      <p style="font-weight: 500; margin-bottom: 0.75rem;">Select drawer size:</p>
      <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
        <button onclick="var d=this.closest('.page').querySelector('.drawer');d.className='drawer drawer-start drawer-sm';d.querySelector('.drawer-title').textContent='drawer-sm (220px)'" style="padding: 0.375rem 0.75rem; border: 1px solid var(--color-base-300); border-radius: 0.375rem; cursor: pointer; background: none; font-size: 0.8125rem;">sm (220px)</button>
        <button onclick="var d=this.closest('.page').querySelector('.drawer');d.className='drawer drawer-start';d.querySelector('.drawer-title').textContent='default (280px)'" style="padding: 0.375rem 0.75rem; border: 1px solid var(--color-base-300); border-radius: 0.375rem; cursor: pointer; background: none; font-size: 0.8125rem;">default (280px)</button>
        <button onclick="var d=this.closest('.page').querySelector('.drawer');d.className='drawer drawer-start drawer-lg';d.querySelector('.drawer-title').textContent='drawer-lg (360px)'" style="padding: 0.375rem 0.75rem; border: 1px solid var(--color-base-300); border-radius: 0.375rem; cursor: pointer; background: none; font-size: 0.8125rem;">lg (360px)</button>
        <button onclick="var d=this.closest('.page').querySelector('.drawer');d.className='drawer drawer-start drawer-xl';d.querySelector('.drawer-title').textContent='drawer-xl (480px)'" style="padding: 0.375rem 0.75rem; border: 1px solid var(--color-base-300); border-radius: 0.375rem; cursor: pointer; background: none; font-size: 0.8125rem;">xl (480px)</button>
      </div>
    </main>
  </div>
</div>

Requires: ux.min.css

// Size classes (CSS only, no JS needed for sizes):
// <aside class="drawer drawer-start drawer-sm">  // 220px
// <aside class="drawer drawer-start">             // 280px (default)
// <aside class="drawer drawer-start drawer-lg">   // 360px
// <aside class="drawer drawer-start drawer-xl">   // 480px
//
// Or custom width via CSS variable:
// <aside class="drawer drawer-start" style="--drawer-width: 400px;">

All Drawer Positions

Preview

Select position:

drawer-top and drawer-bottom also available for horizontal drawers.

<div class="app">
  <div class="page">
    <aside class="drawer drawer-start drawer-collapsed" style="--drawer-width: 180px;">
      <div class="header"><h2 class="drawer-title">Left</h2></div>
      <div class="content" style="padding: 0.75rem;">
        <p style="font-size: 0.8125rem;">drawer-start</p>
      </div>
    </aside>

    <aside class="drawer drawer-end drawer-collapsed" style="--drawer-width: 180px;">
      <div class="header"><h2 class="drawer-title">Right</h2></div>
      <div class="content" style="padding: 0.75rem;">
        <p style="font-size: 0.8125rem;">drawer-end</p>
      </div>
    </aside>

    <main class="content" style="padding: 1rem;">
      <p style="font-weight: 500; margin-bottom: 0.75rem;">Select position:</p>
      <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem;">
        <button onclick="var ds=this.closest('.page').querySelectorAll('.drawer');ds[0].classList.remove('drawer-collapsed');ds[1].classList.add('drawer-collapsed')" style="padding: 0.375rem 0.75rem; border: 1px solid var(--color-base-300); border-radius: 0.375rem; cursor: pointer; background: none; font-size: 0.8125rem;">Left (start)</button>
        <button onclick="var ds=this.closest('.page').querySelectorAll('.drawer');ds[1].classList.remove('drawer-collapsed');ds[0].classList.add('drawer-collapsed')" style="padding: 0.375rem 0.75rem; border: 1px solid var(--color-base-300); border-radius: 0.375rem; cursor: pointer; background: none; font-size: 0.8125rem;">Right (end)</button>
        <button onclick="this.closest('.page').querySelectorAll('.drawer').forEach(function(d){d.classList.add('drawer-collapsed')})" style="padding: 0.375rem 0.75rem; border: 1px solid var(--color-base-300); border-radius: 0.375rem; cursor: pointer; background: none; font-size: 0.8125rem;">Close all</button>
      </div>
      <p style="opacity: 0.5; font-size: 0.8125rem;">drawer-top and drawer-bottom also available for horizontal drawers.</p>
    </main>
  </div>
</div>

Requires: ux.min.css

// Position classes (CSS only, no JS needed):
// <aside class="drawer drawer-start">   // Left
// <aside class="drawer drawer-end">     // Right
// <aside class="drawer drawer-top">     // Top
// <aside class="drawer drawer-bottom">  // Bottom
//
// Collapse/expand (toggle visibility):
// <aside class="drawer drawer-start drawer-collapsed">
//
// Optional: JS to toggle collapse
// drawer.classList.toggle('drawer-collapsed');

Glass Variant

Preview

Glass morphism applied via the .glass modifier class.

Works on header, footer, and drawer.

<div class="app">
  <div class="page" style="background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
    <header class="header glass">
      <div style="font-weight: 600; color: white;">Glass Header</div>
    </header>

    <aside class="drawer drawer-start glass" style="--drawer-width: 200px;">
      <div class="header glass no-border">
        <h2 class="drawer-title" style="color: white;">Menu</h2>
      </div>
      <div class="content" style="padding: 0.75rem;">
        <nav>
          <a href="#" style="display:block; padding:0.5rem 0.75rem; color: white;">Home</a>
          <a href="#" style="display:block; padding:0.5rem 0.75rem; color: white;">Settings</a>
        </nav>
      </div>
    </aside>

    <main class="content" style="padding: 1.5rem;">
      <p style="color: white; opacity: 0.9;">Glass morphism applied via the <code style="background: rgba(255,255,255,0.2); padding: 0.125rem 0.375rem; border-radius: 0.25rem; color: white;">.glass</code> modifier class.</p>
      <p style="color: white; opacity: 0.6; font-size: 0.875rem; margin-top: 0.5rem;">Works on header, footer, and drawer.</p>
    </main>

    <footer class="footer glass">
      <span style="font-size: 0.75rem; color: white; opacity: 0.7;">Glass Footer</span>
    </footer>
  </div>
</div>

Requires: ux.min.css

// No JS needed — just add the .glass class:
// <header class="header glass">
// <footer class="footer glass">
// <aside class="drawer drawer-start glass">

Classes Reference

Generic Structure

Work inside any flex-column container: page, drawer, card, modal, sheet...

Class	Description
header	Top bar (flex, shrink-0, border-bottom)
content	Scrollable body (flex-1, overflow-y auto)
footer	Bottom bar (flex, shrink-0, border-top)
no-border	Remove border from header/footer
glass	Glass morphism variant for header/footer/drawer

Layout

Class	Description
app	Root container, 100dvh, flex column
page	CSS Grid container for header + drawers + content + footer

Drawer

Class	Description
drawer	Sidebar panel base
drawer-toggle	Hidden checkbox for CSS-only toggle
drawer-start	Left position
drawer-end	Right position
drawer-top	Top position
drawer-bottom	Bottom position
drawer-title	Title text styling
drawer-collapsed	Desktop: width 0, content expands
drawer-open	Mobile: visible as overlay (class-based, for JS)
drawer-sm / lg / xl	Size variants (220/360/480px)
drawer-backdrop	Overlay backdrop (mobile, use as label)
drawer-backdrop-open	Show backdrop (class-based, for JS)

Page Context

Applied automatically when .header/.footer are direct children of .page

Selector	Effect
.page > .header	Full width, sticky, z-index 200
.page > .content	Center column in grid
.page > .footer	Full width, sticky, z-index 200
safe-area	Adds safe-area padding (notch devices)