Getting started

What is inside

Quick start

No build step: open index.html in a browser, or serve the folder (recommended, ES modules need http://):

npx serve .
# or
python -m http.server 8080

Folder structure

brand-name-10/
├── index.html            home page (Masonry)
├── documentation.html
├── admin/                dashboard, analytics, orders, calendar, kanban ...
├── tools/ components/ helpers/ utilities/   70 pages x 20 examples
├── examples/             41 example pages
├── forms/                full forms
├── effects/  layouts/  icons/
└── assets/
    ├── css/  theme.css, ui.css, template.css, effects.css
    ├── js/
    └── img/   SVG artwork

Change colours, fonts and corners

Everything visual comes from the tokens in assets/css/theme.css. Change a value and every page follows:

:root {
  --wt-primary: #2563eb;
  --wt-primary-rgb: 37, 99, 235;
  --wt-secondary: #0ea5e9;
  --wt-accent: #f59e0b;
  --wt-radius: 0.375rem;
  --wt-font-heading: "Spectral", system-ui, sans-serif;
}

Dark mode: the moon button switches data-ui-theme on the <html> element and remembers the choice. Set data-ui-theme="dark" in the markup to make dark the default.

How the Vue version works

Vue 3 apps on every page (ES module build, no build step): reactive theme switch, live search, sidebar state.

• Each page mounts a Vue 3.5.44 app (assets/js/app.js, ES module from the CDN) that owns the theme switch, sidebar, menu search and code tabs as Vue directives.
• Components use the template UI library (ui.css + ui.js) through data-ui-* attributes, initialised after Vue mounts.
• Icons: Bootstrap Icons font. Fonts: Google Fonts (Spectral, Karla).

Browser support

Older browsers still show every page; only newer effects (such as @property animations) fall back to static styles.

Credits

• Vue - MIT licence
• Bootstrap Icons - MIT licence
• Google Fonts - SIL Open Font License
• All illustrations in assets/img are original SVG artwork made for this template.