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-7/
├── index.html            home page (Two Column)
├── 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: #65a30d;
  --wt-primary-rgb: 101, 163, 13;
  --wt-secondary: #4d7c0f;
  --wt-accent: #c2410c;
  --wt-radius: 0.875rem;
  --wt-font-heading: "Fraunces", 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 jQuery version works

jQuery 4 powers every interactive part. Multi-page HTML with the template's own CSS library.

• jQuery 4.0.0 loads from the CDN. assets/js/ui.jquery.js provides plugins such as $('#id').uiModal('show') and the data-ui-* API.
• Icons: Bootstrap Icons font. Fonts: Google Fonts (Fraunces, Inter).

Browser support

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

Credits

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