PVR Tech Studio
Docs
Taxi CRM 2026
Getting started

Getting Started

How the HTML edition is built (Gulp + PUG + LESS), the folder layout, and how to create a new page.

3 min read
Updated June 21, 2026

Live demo: explore every page at pvrtechstudio.com/taxi-crm/html.

What you receive

Taxi CRM 2026 is a premium Bootstrap 5 admin template. The HTML edition is the canonical source: pages are authored in PUG templates and styled in LESS, then compiled with Gulp 4 to static HTML/CSS/JS. Alongside it the repo includes React 18 and Vue 3 scaffolds (built with Vite 5) that consume the shared @taxi-crm/design-system package, plus an Express (Node 20) mock API.

This guide covers the HTML edition.

Source layout (HTML edition)

apps/html/
├── pug/
│   ├── <page>.pug                 ← one PUG source per page (camelCase) → compiles to <page>.html
│   └── common_pages/              ← shared partials, incl. asideItems.pug (sidebar/nav data)
├── *.html                         ← compiled output (gitignored)
└── assets/
    ├── css/                       ← LESS sources → compiled style.css (01-variable.less holds colors)
    ├── js/
    │   ├── core/app.js            ← shared helpers + API_CONFIG, loaded on every page
    │   └── pages/<category>/<page>.js   ← one script per page (masters/, bookings/, reports/,
    │                                      payments/, settings/, auth/, charts/, tables/, crm/,
    │                                      ui/, errors/, shared/)
    ├── plugins/                   ← vendored libraries (jQuery 3.7, Bootstrap 5, DataTables,
    │                                Select2, datepickers, daterangepicker, jQuery Validate,
    │                                jQuery Toast, Dropzone, …)
    ├── locales/<lang>/            ← i18n JSON (en, fr, de, es, pt, zh, ja, nl) + manifest.json
    └── img/                       ← logos, favicons, avatars, icons, flags

You edit the PUG pages and LESS styles; Gulp compiles them. The compiled HTML and CSS are gitignored — only sources are tracked.

Building & previewing

LESS→CSS and PUG→HTML compile automatically (e.g. via the WebStorm file watchers shipped in the repo), so editing a .pug page regenerates its .html. Gulp also handles image optimization, HTML prettify and media-query sorting.

To preview, serve the compiled apps/html/ folder over any static server:

python -m http.server 8080      # then open http://localhost:8080/index.html

Serve over http:// rather than opening a file:// path — the i18n engine loads translations with fetch(), which browsers block on file://. Data-driven pages fetch from the mock API at runtime, so run that backend if you need them populated.

The React and Vue editions build with Vite and consume @taxi-crm/design-system (its compiled CSS, design tokens, i18n locales and api-contract.mjs) rather than the HTML assets directly.

Anatomy of a page

Every page shares the same structure, top to bottom:

  1. <head> — plugin CSS first, then assets/css/style.css last; core libraries (jQuery, Bootstrap, plugins) and assets/js/core/app.js.
  2. Loading screen — <div class="loading-screen visible">.
  3. Header / top navbar — <header class="d-flex app-page flex-column">.
  4. Sidebar — <aside class="app-sidebar …"> (menu data comes from pug/common_pages/asideItems.pug).
  5. Main area — <main class="… has-sticky-header"> with .page-header and .pageWrapper (your content goes in .pageWrapper).
  6. Footer — <footer class="app-footer">.
  7. Page script — <script src="assets/js/pages/<category>/<page>.js"> at the very end.

The full markup is documented in 02 — Layout.

Making a new page

The fastest, most reliable approach is to copy an existing page closest to what you need, then change its content. A page is three coordinated files:

  1. Copy the PUG source — duplicate a similar page, e.g. pug/roleMaster.pug → pug/myPage.pug. Edit the content inside .pageWrapper, and update the <h5> title and the .breadcrumb items in .page-header. Gulp compiles it to myPage.html.
  2. Copy the per-page script — duplicate the matching file under assets/js/pages/<category>/ (e.g. masters/roleMaster.js → masters/myPage.js), and point the page's script tag at it. Remove the tag if the page needs no custom JS.
  3. Copy the locale JSON — duplicate assets/locales/en/roleMaster.json → myPage.json (the JSON file name matches the page), translate the strings into the other language folders, and add the file to each manifest.json. See 09 — i18n.
  4. Add it to the sidebar — add an entry in pug/common_pages/asideItems.pug and mark the matching menu item active so the nav highlights it.

Next steps

Was this page helpful?