Architecture

Kiaalap is a multi-page Bootstrap 5 template. Vite renders Handlebars partials during development and builds standard static HTML for production. There is no runtime frontend framework or jQuery dependency.

Source layout

*.html                  # 63 pages, including starter.html
src/config/site.js      # Shared metadata and demo user
src/config/pages.js     # Titles, breadcrumbs and navigation groups
src/partials/           # Head, sidebar, header, footer and scripts
src/helpers/            # Handlebars helpers and HTML normalization
src/js/main.js          # Shared Bootstrap shell and lazy loading API
src/js/chart-runtime.js # Chart.js entry for chart pages
src/js/lazy.js          # Optional libraries, styles and DOM hooks
src/scss/               # Bootstrap entry and theme configuration
src/css/                # Dashboard and chart layout styles
scripts/                # Page generator, clean and stylesheet checks
tests/                  # Unit, build and browser regressions

Shared partials

Dashboard pages use {{> head}}, {{> sidebar}}, {{> header}}, {{> footer}} and {{> scripts}}. The scripts partial loads the shared shell, then a separate chart entry when the page contains canvas markup or Chart.js examples. Some authentication/error pages use standalone markup instead of the dashboard shell.

src/config/site.js supplies shared metadata and the demo user. src/config/pages.js supplies each page’s title, breadcrumbs and nested sidebar flags. The sidebar markup is in src/partials/sidebar.hbs; adding a navigation group also means adding the corresponding mapping in NAV_GROUPS.

Library loading

Bootstrap is shared by the shell. Chart.js loads only on chart pages, keeping shared JavaScript around 27 kB gzipped. Optional libraries have separate chunks:

const dayjs = await Kiaalap.load('dayjs');
const Swiper = await Kiaalap.load('swiper');
const Chart = await Kiaalap.load('chart');

DOM hook	Library
.swiper	Swiper
[data-simplebar]	SimpleBar
.tom-select	Tom Select
.countup with data-count	CountUp
[data-aos]	AOS

Hooks initialize automatically on page load. To initialize dynamically inserted content, call Kiaalap.initLazyLibraries(container). Repeated calls skip initialized elements, and failed library downloads can be retried. SimpleBar and Tom Select load their CSS with their JavaScript.

Build behavior

Vite discovers root HTML files automatically, except names containing template or -new. Page-local style elements are moved into the rendered head; inline script examples are preserved. CSS is loaded from the head so it remains available if JavaScript fails. Relative assets allow deployment at the site root or under a subdirectory.

Development dependency scanning includes entries hidden by Handlebars partials. Production uses Vite’s native Oxc JavaScript and Lightning CSS minifiers.