Documentation — RedDash

Getting Started

Installation

Get RedDash running in minutes — no build tools required.

Method 1: Direct Download

Download the template

Extract the ZIP file to your desired project directory.
Open in browser

Open index.html directly in any modern browser or serve with a local dev server.
Start customizing

Edit assets/css/theme.css to personalize colors, and modify any HTML page for your content.

Method 2: Local Dev Server

Run a lightweight local server for the best development experience:

# Using VS Code Live Server (recommended)
Install the "Live Server" extension in VS Code
Right-click index.html → "Open with Live Server"

# Using Python
python -m http.server 8080

# Using Node.js npx
npx serve .

# Using PHP
php -S localhost:8080

Live Server automatically reloads the page when you save files, making development faster.

System Requirements

Requirement	Minimum	Recommended
Browser	Chrome 90+, Firefox 88+	Latest stable version
Node.js (optional)	v14+	v18+ LTS
Internet	Required for CDN	–

Getting Started

Folder Structure

RedDash follows a clean, flat file organization. All pages are at the root level.

Project Tree

reddash/
├── index.html            # Dashboard
├── login.html
├── register.html
├── profile.html
├── users.html
├── projects.html
├── calendar.html
├── kanban.html
├── chat.html
├── pricing.html
├── faq.html
├── 404.html
├── maintenance.html
├── documentation.html
├── changelog.html
├── vercel.json
├── assets/
│   ├── css/
│   │   ├── theme.css       # CSS variables, dark mode
│   │   ├── layout.css      # Sidebar, navbar, grid
│   │   └── components.css  # UI components
│   ├── js/
│   │   ├── theme.js        # Dark mode logic
│   │   ├── layout.js       # Sidebar, dropdowns
│   │   ├── animations.js   # GSAP animations
│   │   ├── i18n.js         # Multi-language
│   │   ├── charts.js       # Chart.js configs
│   │   ├── datatable-init.js
│   │   ├── calendar-init.js
│   │   └── three-init.js
│   └── images/
└── components/         # Reference components
    ├── sidebar.html
    ├── navbar.html
    ├── footer.html
    └── settings-panel.html

Customization

Theme Customization

All visual tokens are defined in assets/css/theme.css using CSS variables.

theme.css — Core Variables

/* Light mode (default) */
:root {
  --primary:      #ff0038;
  --radius:       10px;
  --bg-body:      #f8f9fa;
  --bg-card:      #ffffff;
  --text-main:    #212529;
  --text-muted:   #6c757d;
  --border-color: #e9ecef;
  --sidebar-width:260px;
}

/* Dark mode */
[data-theme="dark"] {
  --bg-body:      #0f1115;
  --bg-card:      #1c1f26;
  --text-main:    #e4e6eb;
  --text-muted:   #8b92a5;
  --border-color: #2a2e38;
}

Customization

Changing Primary Color

Change the entire color palette with one variable edit.

One-Line Change

Open assets/css/theme.css and update the --primary value:

:root {
  /* Change this to any color */
  --primary: #6366f1; /* indigo */
  --primary: #0ea5e9; /* sky blue */
  --primary: #10b981; /* emerald */
  --primary: #f59e0b; /* amber */
  --primary: #8b5cf6; /* violet */
}

No rebuild needed. All buttons, active states, badges, and chart colors update automatically.

Customization

Enabling Dark Mode

Dark mode is built in and persists across sessions via localStorage.

How It Works

/* In theme.css — dark mode variables */
[data-theme="dark"] {
  --bg-body: #0f1115;
  --bg-card: #1c1f26;
  /* ... etc */
}

/* In theme.js — toggle logic */
const savedTheme = localStorage.getItem('reddash-theme');
if (savedTheme) {
  document.documentElement.setAttribute('data-theme', savedTheme);
}

/* Toggle on button click */
document.querySelector('[data-action="toggle-theme"]')
  .addEventListener('click', () => {
    const current = document.documentElement.getAttribute('data-theme');
    const next = current === 'dark' ? 'light' : 'dark';
    document.documentElement.setAttribute('data-theme', next);
    localStorage.setItem('reddash-theme', next);
  });

Development

Adding a New Page

Follow these steps to add a new page that fits the RedDash design system.

Steps

Copy an existing page

Duplicate users.html or any other page and rename it (e.g., reports.html).
Update the <title> tag

Change to: <title>Reports — RedDash</title>
Set active sidebar link

Find the correct .sidebar-item and add class active. Remove it from the previous active item.
Replace page content

Edit the content inside <main class="page-content">.
Add link to sidebar

Add a new <li class="sidebar-item"> to the sidebar nav in all pages.

Development

Adding a New Component

Create reusable UI components following the RedDash pattern.

Component Pattern

<!-- 1. Add styles in <style> using CSS variables -->
.my-component {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-main);
}

<!-- 2. HTML structure -->
<div class="my-component" id="myComp">
  <div class="my-component-header">Title</div>
  <div class="my-component-body">Content</div>
</div>

<!-- 3. GSAP entrance animation -->
gsap.from('#myComp', {
  y: 20, opacity: 0, duration: 0.4, ease: 'power2.out'
});

Development

Using DataTables

RedDash uses DataTables 2.x with Bootstrap 5 integration and custom theme overrides.

Setup & Initialization

<!-- 1. Add CDN links in <head> -->
<link href="https://cdn.datatables.net/2.0.3/css/dataTables.bootstrap5.min.css" rel="stylesheet">

<!-- 2. Add scripts before </body> -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/2.0.3/js/dataTables.min.js"></script>
<script src="https://cdn.datatables.net/2.0.3/js/dataTables.bootstrap5.min.js"></script>

<!-- 3. Initialize -->
const table = $('#myTable').DataTable({
  pageLength: 10,
  responsive: true,
  language: {
    search: '',
    searchPlaceholder: 'Search...'
  }
});

Development

Using FullCalendar

RedDash uses FullCalendar v6 with month, week, and day views.

Initialization

Development

Using Three.js

RedDash uses Three.js for the animated particle background on the login/register pages.

Canvas Setup Pattern

<!-- Canvas element -->
<canvas id="threeCanvas" style="position:fixed;inset:0;z-index:0"></canvas>

/* Initialize Three.js scene */
const scene    = new THREE.Scene();
const camera   = new THREE.PerspectiveCamera(75, innerWidth/innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({
  canvas: document.getElementById('threeCanvas'),
  alpha: true
});
renderer.setSize(innerWidth, innerHeight);

/* Responsive resize */
window.addEventListener('resize', () => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
});

Deployment

Deploy on Vercel

Deploy RedDash to Vercel in under 2 minutes.

Steps

Create a GitHub repository

Push the RedDash folder to a new GitHub repo.
Connect to Vercel

Go to vercel.com → New Project → Import your GitHub repo.
Deploy

Click Deploy. Vercel detects a static site and deploys instantly. Your vercel.json handles routing.

// vercel.json
{
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ]
}

Deployment

Performance Tips

Best practices for keeping RedDash fast in production.

Optimization Checklist

Tip	Impact	Notes
Use CDN for all libraries	High	Already configured
Enable browser caching	High	Set Cache-Control headers on server
Compress images	Medium	Use WebP format where possible
Lazy load off-screen content	Medium	Use `loading="lazy"` on images
Minimize inline styles	Low	Move to components.css
Remove unused pages	Low	Delete pages not used in production