E

Frontend Templates & UI Reuse

Developer guide for the Enezaframework. Part of the architecture series.

Table of Contents

  1. Overview
  2. Reuse the Vristo Template
  3. Reuse Existing App Designs
  4. Static CSS and JS
  5. HTMX and Alpine.js
  6. When to Create a Template
  7. Related Guides

Overview

Enezaframework's UI is built on a purchased HTML template (Vristo) plus Tailwind CSS, HTMX, and Alpine.js. The framework ships generic templates for CRUD flows, so frontend work is mostly about reusing existing markup and components rather than writing new UI.

flowchart LR
    BASE[Base layout / template] --> COMP[Reusable components]
    BASE --> CRUD[Generic CRUD templates]
    BASE --> WIDGETS[Dashboard and chart widgets]
    BASE --> APPS[Chat / Mailbox / Todo / Notes / Scrumboard apps]
    CRUD --> PAGES[App pages]
    WIDGETS --> PAGES
    APPS --> PAGES
    PAGES --> HTMX[HTMX partial swaps]
    PAGES --> ALPINE[Alpine.js reactivity]

Reuse the Vristo Template

The reference design lives in the vristo-html-template folder at the project root. Before building any screen:

  • Look for an existing page that already does something similar and reuse its structure and classes.
  • Reuse the dashboard and chart widgets that ship with the template instead of introducing new chart widgets.
  • Reuse existing HTML components and elements (buttons, cards, tables, modals, dropdowns) rather than recreating them.
  • Keep the visual language consistent with the rest of the ERP.

Reuse Existing App Designs

The template already contains these apps. If your feature overlaps with one, reuse its UI and focus your effort on the backend:

  • Chat
  • Mailbox
  • To-do list
  • Notes
  • Scrumboard

Static CSS and JS

  • Always reuse the CSS and JS that come with the template. They live under vristo-html-template/assets.
  • Do not pull in a second copy of a library the template already bundles.
  • Ensure the Django static files configuration points at the same assets the template uses.

HTMX and Alpine.js

The framework uses HTMX for server-driven partial updates and Alpine.js for client-side state.

  • HTMX — inline tabs, list updates, and action responses are loaded by swapping partial templates into a container (for example #detail-container) rather than reloading the page.
  • Alpine.js — reactive widgets such as image uploads and field toggles update the DOM without a round trip.

When adding interactivity, prefer the patterns already used by the framework templates over bespoke JavaScript.

When to Create a Template

Create an app-specific template only when the generic framework templates cannot express the requirement:

  1. Confirm no generic template or existing component covers it.
  2. Place it under templates/<app_name>/.
  3. Reuse the base layout and existing components.
  4. Load app static assets consistently with the rest of the project.

Most CRUD apps should ship zero custom templates.

View source Edit this page