Layout

Layout primitives for app shells with sidebars and content containers.

App Shell Sidebar Main

Base

Class	Description
`.ui-app-shell`	Base class

With Topbar

Content

<!-- Add a fixed topbar by setting --topbar-height on app-shell. Sidebar and main offset automatically. -->
<body class="ui-app-shell" style="--topbar-height: var(--ui-row-3)">
  <header class="ui-topbar ui-topbar--fixed ui-topbar--bordered">
    <div class="ui-topbar__start"><strong>App</strong></div>
    <div class="ui-topbar__end">User</div>
  </header>
  <aside class="ui-sidebar">Sidebar</aside>
  <main class="ui-main">
    <div class="ui-container">Content</div>
  </main>
</body>

Sidebar Widths

.ui-sidebar--sm 192px (24 units)

.ui-sidebar--md 240px (30 units) - default

.ui-sidebar--lg 320px (40 units)

<div class="ui-row ui-row--sm">
  <code>.ui-sidebar--sm</code>
  <span>192px (24 units)</span>
</div>
<div class="ui-row ui-row--sm">
  <code>.ui-sidebar--md</code>
  <span>240px (30 units) - default</span>
</div>
<div class="ui-row ui-row--sm">
  <code>.ui-sidebar--lg</code>
  <span>320px (40 units)</span>
</div>

Sidebar Position

...

<!-- By default, sidebar is on the start (left in LTR). Use .ui-sidebar--end for right-side: -->
<aside class="ui-sidebar ui-sidebar--end">...</aside>
<main class="ui-main ui-main--sidebar-end">...</main>

Container Widths

.ui-container--sm 640px (80 units)

.ui-container--md 800px (100 units)

.ui-container--lg 960px (120 units) - default

.ui-container--xl 1280px (160 units)

.ui-container--full No max width

<div class="ui-row ui-row--sm">
  <code>.ui-container--sm</code>
  <span>640px (80 units)</span>
</div>
<div class="ui-row ui-row--sm">
  <code>.ui-container--md</code>
  <span>800px (100 units)</span>
</div>
<div class="ui-row ui-row--sm">
  <code>.ui-container--lg</code>
  <span>960px (120 units) - default</span>
</div>
<div class="ui-row ui-row--sm">
  <code>.ui-container--xl</code>
  <span>1280px (160 units)</span>
</div>
<div class="ui-row ui-row--sm">
  <code>.ui-container--full</code>
  <span>No max width</span>
</div>

With Footer

Content

<!-- Place footer inside the content area, after the container. -->
<body class="ui-app-shell">
  <main class="ui-main ui-main--full">
    <div class="ui-container">Content</div>
    <footer class="ui-footer ui-footer--bordered">
      <div class="ui-footer__start"><small>Brand</small></div>
      <div class="ui-footer__end"><small>v1.0.0</small></div>
    </footer>
  </main>
</body>

Topbar Variants

<!-- Sticky stays in flow, raised adds shadow. -->
<header class="ui-topbar ui-topbar--sticky ui-topbar--bordered">...</header>
<header class="ui-topbar ui-topbar--raised">...</header>

Footer Variants

<!-- Sticky, fixed, and raised options. -->
<footer class="ui-footer ui-footer--sticky ui-footer--bordered">...</footer>
<footer class="ui-footer ui-footer--fixed">...</footer>
<footer class="ui-footer ui-footer--raised">...</footer>

Centered Container

<div class="ui-container ui-container--center">
  <!-- centered content with max-width -->
</div>