Introduction & Setup

Welcome to Staffu — complete documentation for the HTML5, Bootstrap 5, SCSS/Sass, and JavaScript SaaS Admin Dashboard Template. This guide covers installation, Gulp build workflow, customization, and how to use the included dashboards, apps, and UI components for employee management, CRM, projects, and analytics.

1. Product Overview: Staffu SaaS Admin Template

Staffu is a modern, responsive admin dashboard template built with HTML5, Bootstrap 5, SCSS/Sass, JavaScript, and Gulp. It is designed for SaaS teams managing employees, CRM clients, projects, payroll, analytics, and business reports from a single admin interface.

Key Features:

• 4 specialized dashboards: Analytics, Sales, Attendance, and Performance
• Employee, CRM, Projects, Payroll, and Reports app modules
• Built-in Chat, Email, Calendar, and Team collaboration pages
• Advanced Data Tables with DataTables.net
• Interactive charts with ApexCharts and Chart.js
• Reusable HTML partials via Gulp File Include
• Dark / Light theme support
• Full RTL and LTR layout support
• 60+ ready-to-use HTML pages and UI components
• Fully responsive Bootstrap 5 design
• Gulp-powered development and production build workflow

Technology Stack:

2. License & Usage Terms

ThemeForest Marketplace license types and their usage limitations:

3. File Structure

The project follows a standard HTML + Gulp workflow. Source files live in src/, and compiled production files are generated in build/.

staffu-html/
├── src/
│   ├── data/
│   ├── html/
│   │   ├── partials/
│   │   │   ├── components/
│   │   │   └── layout/
│   │   ├── index.html
│   │   ├── sales_lead.html
│   │   ├── attendance.html
│   │   ├── employee_list.html
│   │   └── ... (60+ pages)
│   ├── images/
│   ├── js/
│   │   ├── layout.js
│   │   ├── main.js
│   │   └── pages/
│   ├── scss/
│   │   ├── style.scss
│   │   ├── _variables.scss
│   │   ├── _custom-variables.scss
│   │   ├── _variable-dark.scss
│   │   ├── Components/
│   │   ├── Layout/
│   │   ├── Pages/
│   │   └── Plugins/
│   └── videos/
├── build/                 (generated after gulp build)
│   ├── css/
│   ├── js/
│   ├── images/
│   ├── plugins/
│   ├── data/
│   ├── videos/
│   └── *.html
├── gulpfile.js
├── package.json
└── package-lock.json

4. Installation Guide

To run Staffu locally, you need Node.js (v18 or later) and npm installed on your system.

Step 1: Download & Extract

Download the ZIP file from ThemeForest and extract it to your local system.

Step 2: Navigate to Project

Open terminal and navigate to the project root directory:

cd staffu-html

Step 3: Install Dependencies

Run this command to install all required libraries:

npm install

Step 4: Start Development Server

Run Gulp in development mode to compile assets, start BrowserSync, and watch for file changes:

npx gulp dev

The project will compile into the build/ folder and open at http://localhost:3000

Available Gulp Tasks

• npx gulp dev — development build with live reload
• npx gulp build — production build into build/
• npx gulp build-rtl — compile RTL CSS only

5. Deployment

To create an optimized build for production, run the following command:

npx gulp build

This command creates a build/ folder containing compiled HTML, CSS, JavaScript, images, plugins, and data files. Upload the contents of the build/ folder to your hosting server.

6. Color Customization

All theme colors in Staffu are managed through SCSS files inside src/scss/. Update the main palette in _variables.scss and dark theme values in _variable-dark.scss.

Modify src/scss/_variables.scss:

// Main brand colors
$indigo:  #6f5fe0;
$purple:  #4666e1;
$blue:    #1774ff;
$green:   #28adbb;
$red:     #e25867;

// Primary theme color
$primary: $purple;

7. Font Customization

Staffu uses the Nunito font family, imported in src/scss/_variables.scss and applied through Bootstrap's $font-family-base variable.

To Change Font:

1. Choose a font from Google Fonts
2. Replace the Google Fonts import in src/scss/_variables.scss
3. Update $font-family-base in the same file
4. Run npx gulp dev or npx gulp build to recompile CSS

// src/scss/_variables.scss
@import url('https://fonts.googleapis.com/css2?family=Your+Font+Name&display=swap');

$font-family-base: "Your Font Name", sans-serif;

8. Layout Options

Staffu layout behavior is controlled through HTML partials and JavaScript managers in src/js/layout.js. Theme, sidebar, direction, and layout preferences are saved in localStorage and applied using body/data attributes.

Layout Managers:

Layout HTML Partials:

Common Body Attributes:

data-bs-theme="light" | "dark"
data-sidebar="lg" | "sm"
data-layout="default" | "boxed"
data-theme-colors="default"
dir="ltr" | "rtl"

9. Page Navigation & Menu Setup

Staffu is a static HTML template. Each page is a separate .html file compiled by Gulp. There is no React Router or SPA routing. Navigation works through normal links in the sidebar menu.

Step 1: Create a New HTML Page

Create a new file inside src/html/ using the starter structure:

<!DOCTYPE html>
<html lang="en">
<head>
    %%include('partials/layout/meta.html', { title: 'My New Page' })
    %%include('partials/layout/css.html')
</head>
<body>
    <div class="page-layout">
        %%include('./partials/layout/header.html')
        %%include('./partials/layout/left-sidebar.html')
        <div class="page-wrapper">
            <div class="page-content">
                %%include('./partials/components/page-title.html', { pageTitle: 'My New Page', pagePrTitle: 'Pages' })
                <div class="container-fluid">
                    <!-- Your content here -->
                </div>
            </div>
            %%include('./partials/layout/footer.html')
        </div>
    </div>
    %%include('./partials/layout/right-sidebar.html')
    %%include('./partials/layout/footer-js.html')
</body>
</html>

Step 2: Add Menu Link in Sidebar

Open src/html/partials/components/sidemenu.html and add a new navigation item:

<div class="nav-item">
    <a class="nav-link" href="./my_new_page.html">
        <span class="menu-icon"><i class="bi bi-diamond"></i></span>
        <h6 class="menu-text mb-0">My New Page</h6>
    </a>
</div>

Step 3: Add Page Script (Optional)

If the page needs custom JavaScript, create a file in src/js/pages/ and include it at the bottom of your HTML page after the layout scripts.

<script src="js/pages/my_new_page.js"></script>

Step 4: Rebuild the Project

Run Gulp to compile the new page into the build/ folder:

npx gulp dev
# or
npx gulp build

10. UI Components

Staffu includes ready-made Bootstrap 5 UI pages inside src/html/. Styles are organized in src/scss/Components/ and compiled into build/css/style.min.css.

Starter Page Structure:

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title mb-2">Card Title</h5>
                    <p class="mb-0">Your page content goes here.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Available UI Pages:

11. Chart Usage

Staffu uses ApexCharts and Chart.js for dashboard analytics. Chart logic lives in page-specific files under src/js/pages/.

ApexCharts Example:

document.addEventListener("DOMContentLoaded", function () {
  Apex = {
    chart: {
      fontFamily: 'Nunito, sans-serif'
    }
  };

  const chartEl = document.querySelector(".revenueChart");
  if (chartEl) {
    new ApexCharts(chartEl, {
      series: [{
        name: 'Revenue',
        data: [6000000, 9500000, 7450000, 12300000, 9000000, 15500000]
      }],
      chart: {
        type: 'area',
        height: 100,
        sparkline: { enabled: true },
        toolbar: { show: false }
      },
      colors: ['#4666e1'],
      stroke: { curve: 'smooth', width: 2 }
    }).render();
  }
});

Reference Files: Check src/js/pages/performance.js, src/js/pages/overview.js, and src/html/apexchart.html for more chart examples.

12. Table Integration

Staffu uses DataTables.net with Bootstrap 5 styling for advanced tables such as sorting, pagination, filtering, and responsive layouts.

DataTables Example:

$(document).ready(function () {
  $('#pageTable').DataTable({
    responsive: true,
    paging: true,
    searching: false,
    info: true,
    lengthChange: true,
    pageLength: 10,
    lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
    ordering: false
  });
});

Reference Files: See src/js/pages/data_table.js, src/html/data_table.html, and reusable table partials inside src/html/partials/components/.

13. FAQ (Frequently Asked Questions)

14. Credits & Sources

List of external resources used in Staffu: