BankaiLayout

The persistent app shell: a CSS-grid root that wraps each slot in its native landmark region (<header>/<aside>/<main>/<footer>), so an application gets a correct, unique-per-page landmark set for free. The grid tracks are yours to control with plain CSS against .bankai-layout — there is no view-string DSL.

Structure

The default theme shell — header across the top, footer across the bottom, sidebar left of the main content. Absent regions collapse their track, so a header-less or sidebar-less app needs no override.

Usage

<BankaiLayout>
  <template #header><BankaiNavbar /></template>
  <template #sidebar><BankaiSidebar /></template>
  <BankaiPage>
    <BankaiContainer>… page content …</BankaiContainer>
  </BankaiPage>
  <template #footer>© bankai-vue</template>
</BankaiLayout>

Customizing the grid

BankaiLayout takes no layout props — you own the grid tracks with plain CSS. Every theme rule is zero-specificity (:where()), so a single declaration or utility class overrides it without !important. Regions are pinned by name (grid-area: header, …), so restructuring is just a new grid-template-areas on .bankai-layout — the DOM/source order stays header → sidebar → main → footer, only the visual placement moves.

/* full-height sidebar, header/main/footer stacked in the content column */
.bankai-layout {
  grid-template-columns: 16rem 1fr;
  grid-template-areas:
    'sidebar header'
    'sidebar main'
    'sidebar footer';
}

/* swap sidebar and main to the opposite side */
.bankai-layout {
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'header  header'
    'main    sidebar'
    'footer  footer';
}

RTL

Right-to-left works with no extra code. The default uses logical values (grid-template-columns: auto 1fr, min-block-size) and named areas rather than physical left/right, and CSS Grid lays columns along the inline axis — so under dir="rtl" the sidebar moves to the inline-start (right) edge automatically.

Vertical & scroll behavior

By default sidebar and main stretch to fill the space between header and footer (the middle row is 1fr), and the whole page scrolls — the footer scrolls in after the content, but stays pinned to the bottom of the viewport on short pages (min-block-size: 100dvh). For an app-shell feel — fixed header and footer with only main scrolling — pin the grid to the viewport and make main the scroll container (no position: fixed needed); a sticky header is a one-liner. To let the sidebar hug its content instead of stretching, use align-self: start.

/* app-shell: fixed header + footer, only main scrolls */
.bankai-layout {
  block-size: 100dvh;
  min-block-size: 0;
}
.bankai-layout > .bankai-main {
  overflow: auto;
  min-block-size: 0;
}

/* or, in the page-scroll default, just pin the header on scroll */
.bankai-layout > .bankai-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
}

Tailwind & utility classes

Utilities win by ordinary specificity: col-span-*/row-span-* on children and grid-cols-*/grid-rows-* on the root all override the theme. One caveat — the theme also sets grid-template-areas, which governs where the named regions land and implies its own column count. Overriding only grid-template-columns (e.g. grid-cols-3) while the areas remain leaves a stray empty track and the regions still pinned to their areas; to go fully line-based, also clear the template with grid-template-areas: none.

Props

This component has no props.

Emits

This component emits no events.

Slots

Slot	Description
`header`	Top region — wrapped in a BankaiHeader (<header class="bankai-header">, the banner landmark). Typically holds a navbar. Omitted from the DOM when not provided.
`sidebar`	Side region — wrapped in a BankaiAside (<aside class="bankai-aside">, the complementary landmark). Typically holds a sidebar nav. Omitted from the DOM when not provided.
`footer`	Bottom region — wrapped in a BankaiFooter (<footer class="bankai-footer">, the contentinfo landmark). Omitted from the DOM when not provided.
`default`	Main content region — wrapped in a BankaiMain (<main class="bankai-main">, the main landmark), always rendered. The per-route host (BankaiPage) and content go here; nothing inside should render its own <main> (landmark uniqueness).

Exposes

This component exposes nothing on its instance.

Theming

Every token is a :root custom property applied through zero-specificity :where() rules, so a single plain declaration overrides one — no selector, no !important. Set it globally on :root or locally on any ancestor.

Token	Default	Purpose
`--bankai-layout-min-block-size`	`100dvh`	Minimum height of the shell (fills the viewport).
`--bankai-layout-columns`	`auto 1fr`	Grid column tracks (sidebar / main).
`--bankai-layout-rows`	`auto 1fr auto`	Grid row tracks (header / main / footer).
`--bankai-layout-areas`	`'header header' 'sidebar main' 'footer footer'`	Named grid areas placing each region.