Getting started

What is inside

Quick start

No build step. Open index.html in any browser, or serve the folder with any web server:

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

Folder structure

brand-name-17/
├── index.html            home page (Bento Grid)
├── 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, bootstrap-bridge.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: #8b5cf6;
  --wt-primary-rgb: 139, 92, 246;
  --wt-secondary: #a78bfa;
  --wt-accent: #f472b6;
  --wt-radius: 0.875rem;
  --wt-font-heading: "Plus Jakarta Sans", system-ui, sans-serif;
}

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

How the Bootstrap version works

Bootstrap CSS and JavaScript from the CDN. Classic multi-page HTML, no build step.

• Bootstrap CSS and JavaScript 5.3.8 load from jsDelivr; assets/css/bootstrap-bridge.css maps Bootstrap's variables to the theme.
• Tooltips, popovers and validation are switched on in assets/js/bootstrap-init.js.
• Icons: Bootstrap Icons font. Fonts: Google Fonts (Plus Jakarta Sans, Inter).

Browser support

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

Credits

• Bootstrap - 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.