Home/Shells

Shells

A shell is the whole-page chrome — the frame within which features live. Each shell is mobile, tablet, and desktop in one. Shells are kit-scoped: dashboard shells are not portal shells, and portals never inherit dashboard chrome.

9 shells + 4 page shells Responsive Mobile · tablet · desktop

Dashboard shells

For the operational product — verticals and shared modules. Anchored to the desktop because that's where ops staff work; reflows down for branch managers on phones.

Wireframe

SHL · 01

Dashboard shell

Fixed 252px sidebar with org switcher, primary action button, grouped nav and personal account footer. Top breadcrumb bar with search, notifications and the active user. Used by every vertical hub and shared module.

Desktop primary Tablet Mobile collapse

Open reference See live →

Wireframe

SHL · 02

Settings shell

Two-rail nested layout for any settings-style surface: 240px section rail (Account, Billing, Members, Extensions) inside the dashboard chrome, with a 900px max-width content column on the right.

Desktop primary Mobile collapse

Open reference See live →

Wireframe

SHL · 03

Data-table shell

Full-bleed table chrome — title, filter toolbar, primary action, sticky column headers, row selection and pagination. The workhorse layout for list-heavy verticals (Stock, Customers, Audit).

Desktop Tablet

Open reference See live →

Portal shells

For audience-facing surfaces. Each portal has its own shell — chrome stripped to what its audience actually needs. Portals never inherit dashboard chrome.

Wireframe

SHL · 04

POS portal shell

Touch point-of-sale: phone shell with bottom tab bar (Sale · Items · Receipts · More), big keypad and category tiles. Tablet folds the tabs into a side rail. Desktop adds a customer pane on the right.

Mobile primary Tablet Desktop counter PWA

Open example Live: sale screen →

Wireframe

SHL · 05

Parent portal shell

Mobile-first. Status bar, the fee-balance hero banner, simple list rows for children, a notice strip and a four-tab bottom bar (Home · Fees · Notices · Profile). Works on intermittent connectivity.

Mobile primary Tablet PWA

Open example Live: dashboard →

Wireframe

SHL · 06

Student portal shell

Tablet-first. Left rail with the student's class and term anchor; main panel devotes itself to one anchor surface (Timetable, Results, Notices, Library). On phone, the rail collapses into a sheet.

Tablet primary Mobile

Open example Live: timetable →

Wireframe

SHL · 07

Teacher portal shell

Tablet at the front of class, desktop for grading. Side nav anchored to the active class & term; primary surface is whichever workflow the teacher just opened — marks entry, attendance, lesson plan.

Tablet primary Desktop Mobile

Open example Live: marks entry →

Wireframe

SHL · 08

Staff portal shell

Self-service shell for internal staff: payslips, leave, time-sheets, directory. Desktop-first but PWA-friendly. Same nav model as the dashboard, narrower and softer — staff aren't operators.

Desktop primary PWA

Open example Live: dashboard →

Wireframe

SHL · 09

Admin control plane shell

Cross-tenant operations for the platform team. Desktop-only, dark by default — pretends to be infrastructure. Subscriptions, health, support, audit. The one shell that breaks the canvas rule.

Desktop only Dark by default

Open example Live: dashboard →

Page shells

Per-page chrome that sits inside the dashboard or portal shell. Same composition every time so users always know where the toolbar, save bar, or editor lives. Each one is documented as a b-* block but renders as a page shell.

Wireframe

PG · 01

List page shell

Standing chrome for a list-of-records page: page header with primary action, data toolbar with search and filter chips, the table itself, and pagination at the foot. Used everywhere there is a "things to scan" page.

Standing list Toolbar + chips

Open reference Related: data-table pattern →

Wireframe

PG · 02

Detail page shell

Standing chrome for a single-record page: detail hero up top, then a 1.4 fr / 1 fr body split — primary content on the left, sidebar context (metadata, activity, related) on the right. Mobile stacks the two columns.

1.4 + 1 fr Mobile stacks

Open reference Related: detail-view pattern →

Wireframe

PG · 03

Form shell

Standing chrome for a create/edit form: page header, grouped field sections (each in its own card), and a sticky bottom action bar with the dirty-state label, Cancel, and Save. Keyboard-savable on every screen size.

Multi-section Sticky save bar

Open reference

Wireframe

PG · 04

Master-data shell

Split-view chrome for high-frequency reference editing: a narrow list of entities on the left, an editor pane for the selected entity on the right. Saves on blur. Used by chart of accounts, tax codes, fee structures.

Split list + editor Save on blur

Open reference Related: master-data pattern →

When to use which shell

A simple cheat sheet.

Use case	Shell	Why
Branch manager dashboard	Dashboard	Sidebar + table-heavy work, desktop-first
Workspace settings	Settings	Section rail keeps subsections discoverable
Stock list, customer list, audit log	Data-table	Full-bleed table chrome, sticky headers
Cashier on a phone	POS portal	Stripped chrome; thumb-zone keypad
Parent checking fees	Parent portal	Mobile-first, low-bandwidth, hero banner
Student timetable lookup	Student portal	Tablet calendar grid is the centre of mass
Teacher entering marks	Teacher portal	Class-anchored side nav + grading grid
Staff payslip download	Staff portal	Same nav model as dashboard, softer surfaces
Platform operator	Admin control plane	Dark, dense, desktop-only — feels infrastructural