Getting started

What is inside

Quick start

A Spring Boot application. Install a Java 21 (or newer) JDK, then (Maven comes with the project):

./mvnw spring-boot:run   # http://localhost:8080, templates reload as you edit
./mvnw test              # renders every page
./mvnw package           # target/yaraen-craft-1.0.0.jar
java -jar target/yaraen-craft-1.0.0.jar

On Windows use mvnw.cmd. Every page has a clean address: /admin/orders shows templates/admin/orders.html. Add a template and it is a page - or give a page its own controller when it needs data from your services.

Folder structure

yaraen-craft/
├── pom.xml, mvnw, mvnw.cmd     Maven build (Spring Boot 4.1.1, WebJars)
├── design-tokens/              tokens.json, tokens.css
└── src/
    ├── main/java/.../           Application.java, web/PageController.java, web/SiteModel.java
    ├── main/resources/
    │   ├── application.properties
    │   ├── templates/
    │   │   ├── layout/          admin.html (admin shell), page.html
    │   │   ├── fragments/       common.html (head, scripts)
    │   │   ├── index.html, documentation.html, admin/, components/, forms/ ...
    │   │   └── error/404.html
    │   └── static/assets/       css, js, img
    └── test/java/.../PagesTest.java   renders every page

Change colours, fonts and corners

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

:root {
  --wt-primary: #ba12de;
  --wt-primary-rgb: 186, 18, 222;
  --wt-secondary: #f31b9e;
  --wt-accent: #a9ed1d;
  --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.

Style guide: the style guide page shows every colour with its contrast, the type, corners, components and the pictures of this template.

Design tokens: design-tokens/tokens.json has the same colours (light and dark), fonts, corners, spacing and shadows in the W3C Design Tokens format - import it into Figma with the Tokens Studio plugin, or build tokens for other platforms with Style Dictionary. design-tokens/tokens.css has them as plain CSS variables for other projects in the same brand.

Charts

The dashboard charts are drawn by Chart.js 4.5.1: tooltips on hover and touch, theme colours that follow the light/dark modes and the colour switch. Each chart is an SVG picture first (so it shows without JavaScript and in print) that carries its numbers in data-wt-chart; assets/js/charts.js turns it into a Chart.js chart. Your own chart:

<div data-wt-chart='{"type":"bar","labels":["Mon","Tue","Wed"],
  "series":[{"name":"Visits","data":[120,180,150],"color":0}]}'></div>

Types: line, bar, doughnut, radar and bubble. A series colour is a theme colour number (0 primary, 1 accent, 2 secondary, 3 info, 4 warning, 5 success, 6 danger) or any CSS colour. Charts added by your own script start with Charts.init(document).

How the Spring Boot version works

Spring Boot 4 with Thymeleaf: two layouts (admin shell, plain page), one template per page served at a clean address, Bootstrap from WebJars. Run ./mvnw spring-boot:run.

• templates/layout/admin.html holds the admin shell once (menus, top bar, footer) and marks the current page on the server with currentPath (web/SiteModel.java); templates/layout/page.html is the layout of the home page, examples, app screens and sign-in pages.
• templates/fragments/common.html has the head (meta, fonts, stylesheets) and the scripts of every page. A page template only has its title, its own styles and its content.
• web/PageController.java serves templates/x/y.html at /x/y; links are Thymeleaf link expressions (th:href="@{/admin/orders}"), so the app also runs under a context path.
• Bootstrap 5.3.8, Bootstrap Icons and Chart.js are WebJars (versions in pom.xml); the template's CSS, scripts and pictures are in static/assets. PagesTest renders every page (./mvnw test).
• Icons: Bootstrap Icons font. Fonts: Google Fonts (Plus Jakarta Sans, Figtree).

Menus

The admin menu of this template is Command first - No menu bar: a big page finder (Ctrl+K) in the top bar and quick section chips. All menus are driven by assets/js/menu.js (no dependencies, the same in every stack):

• Collapsed menu: the collapse button turns the sidebar into icons; every icon shows its name in a tooltip on hover and on keyboard focus, and a menu group opens as a flyout panel.
• Page finder: the search box in the admin top bar (or Ctrl + K) lists every page of the menus; type, use the arrow keys and press Enter.
• Phones: every admin layout opens the full menu as a drawer from the menu button.
• Colour switch: the paint bucket in the admin top bar switches the whole theme to one of 8 colour presets (remembered); a link with ?primaryPreset=teal opens a page in that colour and ?primaryPreset=default brings back the template colours. Presets live in assets/js/theme-init.js.
• Attributes you can reuse: data-wt-tip="Label" (tooltip), data-wt-sub="#id" (menu group), data-wt-flyout="#id" (flyout panel), data-wt-pane="#id" inside data-wt-panes (tabs), data-wt-palette (page finder) and data-wt-toggle="#id" (full-screen menu).

Browser support

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

Credits

• Spring Boot, Thymeleaf - Apache License 2.0
• Bootstrap - MIT licence
• Chart.js - 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; their subjects are Bootstrap Icons shapes (MIT).