Documentation

Getting Started

Everything you need to know to get started with adminHMD dashboard template.

Introduction

Welcome to adminHMD. This is a premium, fully responsive admin dashboard template built with HTML5, CSS3, and the latest Bootstrap 5 framework. It is designed to be clean, fast, and easily customizable for any web application, SaaS platform, CRM, or CMS.

Note!

This template uses Bootstrap 5 which no longer requires jQuery. All interactive components are powered by vanilla JavaScript.

Installation & Setup

Running the template locally is straightforward. You can simply open the HTML files in your browser, or run it through a local web server (recommended).

1. Unzip the downloaded file

Extract the contents of the ZIP file to a folder on your computer.

2. Open in Browser

Navigate to the html/ folder and open index.html in your preferred web browser.

3. Running via Local Server (Recommended)

If you have Node.js installed, you can use live-server or a similar package:

# Install live-server globally

npm install -g live-server

# Navigate to the template directory

cd path/to/adminHMD

# Start the server

live-server

File Structure

The template follows a logical and modular directory structure:

adminHMD/

├── assets/

│   ├── css/           # Compiled CSS files (Bootstrap & Custom)

│   ├── images/        # Avatars, logos, and product images

│   ├── js/            # Core JS (Bootstrap bundle & main.js)

│   ├── scss/          # Source SASS/SCSS files

│   └── vendors/       # Third-party plugins (Chart.js, Icons, etc.)

├── documentation/     

│   └── docs.html      # This documentation file

└── html/              # All HTML page templates

    ├── index.html

    ├── users.html

    ├── charts.html

    └── ...

Customizing Colors & Theme

adminHMD uses CSS variables for easy theming. You can find these variables in assets/css/style.css.

To change the primary color globally, update the following variable:

:root {

  --bs-primary: #0d6efd; /* Change this hex code */

  --bs-primary-rgb: 13, 110, 253;

  /* ... */

}

Dark Mode

The template includes built-in dark mode functionality triggered by the moon icon in the navbar. The logic for toggling this is located in assets/js/main.js and relies on adding a data-theme="dark" attribute to the HTML tag.