03. Layout: shell.css

The shell gives every app page the same frame: sidebar, sticky topbar, content area, page header, and footer. This page is built on that shell.

Use for

Use for full app pages with a sidebar and topbar, including dashboards, portals, and authenticated views. The current page uses .la-app, .la-sidebar, .la-main, .la-topbar, and .la-content.

Avoid for

Embedded widgets, landing pages, or anything with its own layout. The shell is a full-page layout.

App shell

This page is the live demo of .la-app. It sets up a two-column CSS grid: a fixed-width sidebar column and a flexible main column. The sidebar is sticky and scrolls independently. The main column stacks the topbar and content area using grid-template-rows: auto 1fr.

HTML structure

<div class="la-app">
  <aside class="la-sidebar">
    <div class="la-brandlockup">...</div>
    <nav>...</nav>
    <div class="la-sidebar-note">...</div>
  </aside>
  <main class="la-main">
    <header class="la-topbar">...</header>
    <div class="la-content">
      <!-- page content here -->
    </div>
  </main>
</div>

Live mini-preview: same structure, scaled down

Style guide / Shell
LA
Page title
Action

Brand lockup

.la-brandlockup holds the product mark, stacked brand text, and sidebar toggle button. It lives at the top of .la-sidebar. Use .la-brandmark for the icon, .la-brandtext + .la-brandname + .la-brandnote for the text stack.

.la-brandlockup

LA UI
Design system v1

.la-sidebar-note : small note pinned to the sidebar bottom

Version 1.0.0 · Changelog

Topbar

.la-topbar is sticky, uses backdrop-filter: blur, and sits at the top of .la-main. Use .la-topbar-actions for the right side. Use .la-user-menu with .la-avatar for the user identity display.

.la-topbar : live demo (this is the real topbar above)

The topbar at the top of this page is the actual .la-topbar. Its position is sticky top: 0. Scroll this page to see it stick in place.

.la-topbar : isolated preview

Style guide / Shell
LA
Laween

Page header

.la-page-header is a flex row for the page title and optional actions. Use .la-page-header-left when the title needs a subtitle. Use .la-page-header-actions for the button group on the right.

.la-page-header : title with actions

Import records

.la-page-header-left : title with subtitle

Import records

Review and approve the latest batch before publishing.

Sidebar collapse

Add sidebar-collapsed to .la-app to collapse the sidebar to a 64px icon strip. The toggle button sits inside .la-brandlockup using position: absolute. It switches to the brand color when collapsed. Use .is-active on the toggle to rotate the chevron 180°.

Expanded: default

LA UI
Style guide
Shell
Tokens
Cards
Shell
LA

Collapsed: sidebar-collapsed on .la-app

Shell
LA

Toggle button states

The toggle button floats inside .la-brandlockup using position: absolute; top: 50%; right: 12px. When collapsed it shifts to right: -15px so it protrudes just outside the sidebar's right edge and uses the brand color. The .is-active class on the button rotates the SVG chevron 180°.

Expanded

Default surface, right: 12px

Collapsed: .is-active

Brand accent, right: -15px, chevron rotated

Classes applied when collapsed

.la-app.sidebar-collapsed                       : 64px sidebar column
.la-app.sidebar-collapsed .la-sidebar           : reduced padding
.la-app.sidebar-collapsed .la-brandtext         : hidden
.la-app.sidebar-collapsed .la-sidebar-note      : hidden
.la-app.sidebar-collapsed .la-brandmark         : shrinks to 30×30px
.la-app.sidebar-collapsed .la-nav .la-nav-link  : centred, text hidden via font-size: 0
.la-app.sidebar-collapsed .la-nav-title         : hidden

Site footer

.la-site-footer is a bar pinned to the bottom of .la-main. Use .la-site-footer-inner for the flex row. .la-site-footer-built holds the left built-by text, .la-site-footer-links holds the right link row.

.la-site-footer

Content width

Add a modifier to .la-content to set the maximum width of the page content area. The base class defaults to --la-content-standard (1180px). Choose a mode based on the page content, not the monitor width.

Standard: default

1180px max-width. No modifier needed. Use for dashboard pages, settings, and single-topic component pages.

<div class="la-content">

Prose

680px max-width. Use for editorial content where line length matters, such as privacy, terms, support, and documentation pages.

<div class="la-content la-content--prose">

Wide

1440px max-width. Use for component showcase pages and style guides where side-by-side examples need room.

<div class="la-content la-content--wide">

App

No constraint. Full-bleed data apps with complex tables, split-panel layouts, or dense multi-column views.

<div class="la-content la-content--app">