Documentation

Vantage ships as plain, static HTML. Every page in the root of the download opens directly in a browser — no server, no build step, no package install. If that is all you need, copy the folder into your project and start editing.

The build tooling is included for people who want it. It compiles the stylesheet from Sass and generates the HTML pages from shared partials, so you are not maintaining the sidebar in twenty files.

npm install

npm run build

npm run dev

vantage/
├── index.html              Compiled pages — these are what you ship
├── orders.html
├── …
├── assets/
│   ├── css/app.css         Compiled stylesheet (do not edit by hand)
│   ├── fonts/              Inter variable font + its SIL OFL license
│   ├── img/                Favicon and any imagery you add
│   ├── js/
│   │   ├── app.js          Template behavior — yours to edit
│   │   └── bootstrap.bundle.min.js
│   └── scss/
│       ├── app.scss        Entry point: tokens → Bootstrap → components
│       ├── _shell.scss     Sidebar, topbar, page frame
│       ├── _auth.scss      Sign-in, sign-up, error screens
│       ├── _mailbox.scss   Inbox
│       ├── _calendar.scss  Month view
│       └── _kit.scss       UI Kit page only — safe to delete
└── src/                    Page sources (only needed if you use the builder)
    ├── layouts/            app · auth · blank
    ├── partials/           sidebar · topbar · icons
    └── pages/              One file per page, with JSON front matter

A page source looks like this — JSON front matter, then the body:

---
{ "title": "Orders", "layout": "app", "active": "orders" }
---
<h1 class="app-page__title">Orders</h1>

Three placeholders are available inside layouts and pages:

• {{> partialName }} — inline a file from src/partials/.
• {{ key }} — substitute a front-matter value, HTML-escaped.
• {{{ key }}} — substitute without escaping.

Navigation highlighting is applied after rendering: the builder adds is-active to whichever element carries a data-nav matching the page's active. Partials stay free of conditionals.

Color, type, spacing, radii, shadows and motion all live in one file: packages/tokens/tokens.json. Running npm run tokens compiles it into Bootstrap Sass variables and CSS custom properties.

This is the part worth understanding, because it is what keeps the HTML and WordPress editions of Vantage identical rather than merely similar — the same token file generates the Bootstrap variables here and the theme.json palette there.

/* Every token is also a CSS custom property at runtime */
.my-component {
  color: var(--spm-neutral-700);
  background: var(--spm-neutral-0);
  padding: var(--spm-space-5);
  border-radius: var(--spm-radius-lg);
  box-shadow: var(--spm-shadow-md);
  transition: all var(--spm-motion-base) var(--spm-motion-ease);
}

To change the palette, edit the JSON and rebuild. Nothing else needs touching.

Dark mode uses Bootstrap 5.3's native color modes:

<html data-bs-theme="dark">

The <head> of every page carries a small inline script that sets this before first paint, reading a saved preference from localStorage and falling back to the operating system setting. That is what prevents the white flash you get with a deferred theme script. Keep it inline and keep it first.

Skins are accent presets, set on the same element:

<html data-spm-skin="ocean">

Six ship with the template: indigo, ocean, forest, ember, rose and slate. Add your own in the skins block of tokens.json.

Vantage includes a small SVG chart renderer with no dependencies — no Chart.js, no ApexCharts, nothing to license or keep updated. Charts are declared in markup and read their data from attributes.

<div class="chart-frame"
     data-chart="area"
     data-height="280"
     data-alt="Revenue by month, rising from 18,400 dollars in January to 42,700 dollars in December"
     data-series="[18400, 21200, 19800, 24600]"
     data-labels='["Jan","Feb","Mar","Apr"]'></div>

Charts measure their container and redraw on resize and on theme change, so they stay proportional in narrow columns instead of being squashed by a fixed viewBox. If you prefer a full charting library, delete the renderer from app.js and drop yours in — the markup is just a div.

The icon set is original, drawn on a 24×24 grid, and inlined as an SVG sprite in src/partials/icons.html. There is no icon font and no external request, so the template works offline and from file://.

<svg class="icon" aria-hidden="true">
  <use href="#i-search"></use>
</svg>

Icons inherit currentColor and their size from the .icon class, so they match the text beside them automatically. The UI Kit lists every icon and copies the snippet when you click one.

What is built in, so you do not undo it by accident:

• Every page opens with a skip link to the main region.
• Focus is never removed — :focus-visible draws a visible ring for keyboard users.
• Status is never carried by color alone; badges have dots, trends have arrows and words.
• Tables use real <th scope> headers and a visually hidden <caption>.
• Icon-only buttons carry an aria-label.
• Charts expose role="img" with a written description.
• prefers-reduced-motion disables every animation in the template.
• Body text meets WCAG AA contrast in both light and dark modes.