Dev architecture

Architecture & File Structure

The delivered folder layout, how a page is assembled, and the script load order on every page.

3 min read

Updated June 20, 2026

This guide is for developers integrating or extending the kit. You received the compiled static kit — ready-to-serve HTML pages plus their CSS, JS, translations and images. There is no build step: no PUG, no LESS, no Node toolchain required to use or extend it. You edit the delivered files directly.

What's in the box

app/
├── index.html                     dashboard
├── roleMaster.html                ~180 ready-made pages (one .html per screen)
├── formElements.html
├── …
└── assets/
    ├── css/
    │   ├── style.css              the single stylesheet every page links
    │   └── style.min.css          minified build (use in production)
    ├── js/
    │   ├── core/
    │   │   ├── app.js             shared helpers, loaded on every page
    │   │   └── app.min.js         minified build
    │   └── pages/
    │       ├── masters/           one script per master page (roleMaster.js, driver.js, …)
    │       ├── bookings/          assignAllot.js, bookingPlanner.js, pickupDrop.js, …
    │       ├── reports/           bookingReport.js, vehicleStatistics.js, …
    │       ├── payments/          paymentList.js, makePayment.js, invoice.js, …
    │       ├── crm/               enquiries.js, followUp.js, feedbackComplaint.js
    │       ├── settings/          siteSettings.js, mailSettings.js, …
    │       ├── auth/              loginV2.js, registrationV2.js, …
    │       ├── charts/            highChart.js, chartJs.js, echarts.js, …
    │       ├── tables/            dataTableDefault.js, dataTableAjax.js, …
    │       ├── ui/                widgets.js, modals.js, formValidation.js, …
    │       ├── errors/            page404.js, page500.js, page503.js
    │       └── shared/            data.js (shared demo data)
    ├── plugins/                   bundled vendor libraries (see below)
    ├── locales/                   translation JSON (en, fr, de, es, pt, zh, ja, nl)
    └── img/                       avatar, bg, email, favicon, flags, icons, logo,
                                   markers, patterns, profile

You only ever edit files inside this folder, and the paths inside the pages are relative, so the kit runs from any location as long as assets/ stays next to the .html pages. See Getting Started for serving options.

Bundled plugins

The assets/plugins/ folder ships every third-party library the demo uses, so the kit works offline with no package install. Among them: jquery, bootstrap, DataTables, select2, bootstrap-datepicker, bootstrap-datetimepicker, daterangepicker, moment, jquery-validate, jquery-toast, highcharts, chartjs, echarts, amcharts5, flot, morris, fullcalendar, sweetalert2, quill, summernote, ckeditor5, dropzone, slimscroll, sparkline and more. You include only the ones a given page needs.

Two layers of JavaScript

The JS is split into exactly two layers — keep this separation when you extend the kit:

Layer	File(s)	Role
Core	`assets/js/core/app.js`	Loaded on every page. Auto-initializes shared UI and exposes the `app.*`, `API_CONFIG` and `window.i18n` APIs.
Page	`assets/js/pages/<feature>/<page>.js`	One file per page. Adds page-specific behaviour — building a DataTable, wiring a chart, validating a form.

What app.js sets up automatically on load (tooltips, sidebar, header, pickers, theme toggle, language switcher, loading screen, DataTables defaults, i18n) is documented in JavaScript Helpers — it is not repeated here.

Anatomy of a page

Every page shares the same shell. Top to bottom:

Section	Markup	Notes
`<head>`	plugin CSS, then `assets/css/style.css` last; vendor JS; then `assets/js/core/app.js`	`style.css` loads after plugin CSS so the kit's styles win.
Loading screen	`<div class="loading-screen visible">`	`app.js` hides it once ready.
Header	`<header class="d-flex app-page flex-column">`	Search, fullscreen, notifications, theme toggle, language switcher.
Sidebar	`<aside class="app-sidebar …">`	Accordion nav; the active item is detected from the URL by `app.js`.
Main	`<main class="… has-sticky-header">`	Contains `.page-header` (title + breadcrumb) and `.pageWrapper` (your content).
Footer	`<footer class="app-footer">`
Page script	`<script src="assets/js/pages/<feature>/<page>.js">`	The last tag before `</body>`.

The full shell markup is documented in Layout.

Script load order

The order is the same on every page and it matters — page scripts depend on both the vendor libraries and on app.js already being defined:

<!-- 1. Vendor libraries first (jQuery must come before everything else) -->
<script src="assets/plugins/jquery/jquery-3.7.0.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/plugins/DataTables/datatables.js"></script>
<!-- …only the plugins this page uses… -->
 
<!-- 2. Core: defines app.*, API_CONFIG, window.i18n and auto-inits the shell -->
<script src="assets/js/core/app.js"></script>
</head>
<body>
  <!-- …page markup… -->
 
  <!-- 3. Page script, last thing before </body> -->
  <script src="assets/js/pages/masters/roleMaster.js"></script>
</body>

Vendor libraries and app.js live in the <head>; the page script is the final tag in the <body>. A page script typically registers itself on $(document).ready(...) so it runs after the DOM and after app.js has finished its own setup.

Adding a page: copy the closest existing page and swap its content and its bottom <script> include. The full recipe is in Customizing & Extending.

Where to go next

Wire the kit to a backend: Data & API Integration
Theme, brand and extend it: Customizing & Extending
The shared helpers in detail: JavaScript Helpers
How the stylesheet is organised: CSS System

Was this page helpful?

PreviousInternationalization NextData & API Integration