UrbanHub - Developer Theme Documentation

Project Overview

UrbanHub is an ultra-premium, high-density dashboard and administration system custom-built for high-ticket Real Estate brokerages, asset management firms, and luxury residential consultancies. Synthesizing cutting-edge UX patterns with modern developer frameworks, it streamlines visual property management, transaction processing, customer interactions, analytics, intelligence, and organizational settings into a high-performance system.

Designed around Swiss Modern Grid aesthetics, the theme integrates fluid transitions, fine-tuned high-contrast typography, premium gold accents, glassmorphic filters, and lightweight animations to elevate the standard real estate administrative tool into an immersive executive portal.

Core Technical Specifications

Core Framework

Bootstrap 5.3 + Custom CSS Variables Engine

Font Pairing

Plus Jakarta Sans (Title) + Inter (Body UI)

Themes supported

Dark (Primary Space) + Crisp Elegant Light theme

Folder Structure

The filesystem is designed symmetrically for instant navigation, clean separation of static templates, core scripts, and styling layers. Let's inspect the layout hierarchy:

/
- assets/
  - css/
    - style.css // Unified premium design system & utility classes
  - js/
    - main.js // App core, animations, charts config, & state
- index.html // Main executive dashboard analytics
- properties.html // Real estate listings grid with filters
- add-property.html // Form wizard to create premium property listings
- agents.html // Profiles directory of premium brokers
- customers.html // High-net-worth client registry database
- leads.html // Interactive Sales funnel CRM lead tracker
- appointments.html // Customer show times & legal appointments log
- messages.html // Multi-channel chat interface for clients & agents
- transactions.html // Contract ledgers, transaction records & logs
- invoices.html // Premium commission invoices & payments
- analytics.html // Deep reporting, interactive graphs & charts
- calendar.html // Interactive full-scale planning calendar
- tasks.html // Operational board, check-offs and items
- reviews.html // Customer satisfaction metrics and testimonials
- settings.html // System preferences, customization panel
- profile.html // Agent profile parameters and statistics
- documentation.html // Active developer docs (This Page)

Assets Catalog

UrbanHub ensures a pristine visual experience without locally storing massive visual assets. All assets (except local styles and scripts) are fetched dynamically from robust, premium CDNs:

Dynamic Photography

Urban imagery, luxury penthouses, agent headshots, and layout covers are fetched dynamically from Unsplash with custom query parameters (high resolution, exact cropping ratios).

Libraries Delivery

Bootstrap 5.3, Bootstrap Icons, Chart.js, and AOS are served via high-performance cloud networks (JsDelivr CDN), ensuring sub-millisecond delivery to user devices.

HTML Structure

Symmetrical layout nesting ensures responsive rendering on mobile and collapsing interactions on desktop. Here is the canonical boilerplate template of an UrbanHub page:

html

<!doctype html>
<html lang="en" data-bs-theme="dark">
  <head>
    <!-- Pre-load LocalStorage theme choice to prevent visual flicker -->
    <script>
      (function () {
        const savedTheme = localStorage.getItem('theme') || 'dark';
        document.documentElement.setAttribute('data-bs-theme', savedTheme);
      })();
    </script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
    <link rel="stylesheet" href="/assets/css/style.css" />
  </head>
  <body>
    <!-- Mobile overlay -->
    <div id="sidebar-overlay" class="sidebar-overlay"></div>

    <div class="app-wrapper">
      <!-- FIXED LEFT SIDEBAR -->
      <aside id="sidebar-wrapper" class="sidebar-wrapper">
        <!-- Sidebar items and footer -->
      </aside>

      <!-- PAGE CONTENT AREA & TOP HEADER -->
      <main class="main-content-wrapper">
        <header class="top-header">
          <!-- Search & controls -->
        </header>

        <!-- CONTAINER BODY -->
        <div class="page-body">
          <!-- Page contents sit here -->
        </div>

        <footer class="uh-footer mt-auto">
          <!-- Footer elements -->
        </footer>
      </main>
    </div>
  </body>
</html>

CSS Structure

Styling relies entirely on a centralized file (assets/css/style.css) containing design definitions, typography overrides, utility helpers, and a complete, highly expressive set of design system tokens (variables).

Core CSS Variables & Custom Theme Settings

css

/* CSS Custom Properties Scheme */
:root {
  --uh-sidebar-width: 240px;
  --uh-header-height: 64px;
  --uh-font-title: 'Plus Jakarta Sans', sans-serif;
  --uh-font-body: 'Inter', sans-serif;
  --uh-transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

:root, [data-bs-theme="light"] {
  --uh-primary: #B8860B; /* Darker Gold / Bronze */
  --uh-primary-rgb: 184, 134, 11;
  --uh-bg-body: #F8F9FA;
  --uh-bg-sidebar: #FFFFFF;
  --uh-bg-card: #FFFFFF;
  --uh-border-color: rgba(0, 0, 0, 0.08);
  --uh-text-main: #0F172A;
  --uh-text-muted: #64748B;
  --uh-scrollbar-thumb: #CBD5E1;
}

[data-bs-theme="dark"] {
  --uh-primary: #D4AF37; /* Premium Gold */
  --uh-primary-rgb: 212, 175, 55;
  --uh-bg-body: #0A0A0B;
  --uh-bg-sidebar: #111114;
  --uh-bg-card: #111114;
  --uh-border-color: rgba(255, 255, 255, 0.08);
  --uh-text-main: #E2E8F0;
  --uh-text-muted: #94A3B8;
  --uh-scrollbar-thumb: #222226;
}

JavaScript Engine

Client-side intelligence resides in assets/js/main.js, governing theme persistence, responsive sidebars, smooth animations via AOS, interactive forms, custom components, and responsive charts.

Theme and Sidebar Management Implementation

javascript

// Apply Theme state dynamically
function applyTheme(theme) {
  document.documentElement.setAttribute('data-bs-theme', theme);
  localStorage.setItem('theme', theme);
  
  if (theme === 'light') {
    themeIcon.className = 'bi bi-moon-stars';
  } else {
    themeIcon.className = 'bi bi-sun';
  }
  // Dispatch custom event to notify charts to redraw with new colors
  window.dispatchEvent(new CustomEvent('themeChanged', { detail: { theme } }));
}

// Collapsible Sidebar Toggle action
sidebarToggleBtn.addEventListener('click', () => {
  if (window.innerWidth >= 992) {
    const isCollapsed = document.body.classList.toggle('sidebar-collapsed');
    localStorage.setItem('sidebarCollapsed', isCollapsed ? 'true' : 'false');
  } else {
    sidebarWrapper.classList.toggle('mobile-show');
    sidebarOverlay.classList.toggle('active');
  }
});

Theme System & Mode

UrbanHub utilizes a hybrid styling engine combining Bootstrap 5.3 theme utilities with native CSS variable tokens. Real-time switching between Light and Dark mode changes variables dynamically without reloading.

Active Theme Sandbox

Theme System Mode Click the toggle button in the header bar or switch modes here.

Sidebar Layout

The side rail navigation (#sidebar-wrapper) is sticky, self-contained, and features collapse-to-icon styling on wider desktop screens. On mobile, it slides in off-canvas smoothly with a blurred glass overlay.

Active state is highlighted with a gold border-left indicator and translucent gold background to indicate focus.

html

<aside id="sidebar-wrapper" class="sidebar-wrapper">
  <div class="sidebar-logo">
    <div class="logo-icon"><i class="bi bi-building-up"></i></div>
    <span class="logo-text">UrbanHub<span class="logo-dot">.</span></span>
  </div>
  <div class="sidebar-menu-container">
    <div class="menu-section-label">General</div>
    <ul class="sidebar-menu-list">
      <li class="sidebar-menu-item">
        <a href="index.html" class="sidebar-menu-link active">
          <i class="bi bi-grid-1x2-fill"></i>
          <span>Dashboard</span>
        </a>
      </li>
    </ul>
  </div>
</aside>

Header Controls

The Top Header (.top-header) contains critical application level utilities, styled as a subtle glass pane blurring trailing background scroll. Features include:

Global Navigation Search: Dynamic form targeting properties, leads or agents.
Theme Switcher: Light and dark mode instant state updates.
Inbox & Notifications: Rich drop-down listings detailing message payloads with high-contrast indicator badges.
User Account Menu: Direct access to profile, security settings, configuration and system logs.

Footer Design

The Footer (.uh-footer) sits anchored neatly at the bottom of the main content wrapper (using flex-column layout layout mapping on `mt-auto`). Here is its implementation format:

html

<footer class="uh-footer mt-auto">
  <div class="d-flex flex-column flex-md-row justify-content-between align-items-center gap-3">
    <p class="footer-text">© 2026 <a href="index.html" class="footer-link fw-semibold font-title">UrbanHub</a>. All rights reserved.</p>
    <div class="d-flex gap-4">
      <a href="coming-soon.html" class="footer-text footer-link">Terms of Service</a>
      <a href="coming-soon.html" class="footer-text footer-link">Privacy Policy</a>
    </div>
  </div>
</footer>

Bootstrap Components

All core Bootstrap 5.3 structures are natively supported. To align them with UrbanHub's luxury feel, they are automatically styled using our customized theme variables:

Live Buttons & Badges Pattern

Gold Badge Secondary Success Alert

Alerts & Callouts

Custom gold themed notification alert callout.

Custom transaction signed notification alert callout.

Icons Selection

UrbanHub imports Bootstrap Icons (v1.11.3) via global CDN. All menu items and dashboard status cards utilize semantic glyphs to ensure immediate intuitive recognition.

Popular Icons Registry

bi-building-up

bi-house-door

bi-people

bi-currency-exchange

bi-sliders2

bi-graph-up-arrow

Form Controls

Form fields utilize custom overrides on Bootstrap's .form-control. Input focus states exhibit a refined fade-in gold boundary ring with a subtle container glow shadow.

Form Controls Sandbox

html

<!-- Symmetrical Input Field Pattern -->
<div class="mb-3">
  <label class="form-label font-title fw-semibold text-muted" style="font-size: 0.75rem;">Premium Property Name</label>
  <input type="text" class="form-control" placeholder="e.g. Skyline Heights Penthouse" />
</div>

Bento Cards

Cards (.uh-card) represent the primary visual block of the system. Styled with a solid container panel, ultra-thin border highlights, generous inner margins, and subtle drop shadows, they stack beautifully as responsive grid grids.

Hover Bento Action

This card features .uh-card-hover, which elevates the element using an elegant upwards slide-and-shadow effect when cursors hover.

Accent Border Bento

Using border-top: 3px solid var(--uh-primary) instantly anchors status and priority highlights to specific content blocks.

Tables & Ledger

Ledgers, lists and directories utilize high-density table designs, emphasizing vertical typography alignment and custom status pill indicators.

Ledger Preview

Property Account	Broker Agent	Contract Status	Value Price
Regency Plaza Duplex	sarah@urbanhub.com	Completed	$2,450,000
Coastal Sunset Villa	david@urbanhub.com	In Progress	$4,120,000

Theme Charts

UrbanHub implements high-performance charts using Chart.js (v4.x). Charts dynamically watch for theme change events (themeChanged) and refresh their background grids, font colors, and tooltips instantly.

Active Demo Performance Chart

Animations & AOS

All page elements utilize AOS (Animate On Scroll) to enter the viewport elegantly. Layout animations are restricted to short durations (800ms) and low movement translates (fade-up, fade-down) to guarantee responsive rendering.

html

<!-- AOS Entry Fade Binding -->
<div class="uh-card" data-aos="fade-up" data-aos-delay="100">
  <h5>Animated Panel</h5>
</div>

Customization Guide

UrbanHub is highly customizable. You can adapt the visual color themes, branding, sidebars, and grid parameters with simple overrides.

Branding & Gold Accents

To modify the signature gold accent color across the entire application, simply update the CSS variables --uh-primary and --uh-primary-rgb inside the :root declaration of assets/css/style.css. For instance, to apply a luxurious deep copper accent:

css

/* Apply Copper Accent Overrides */
[data-bs-theme="dark"] {
  --uh-primary: #D35400; /* Luxury Copper */
  --uh-primary-rgb: 211, 84, 0;
}

Responsive Guide

UrbanHub is 100% mobile-fluid. The layout adapts smoothly based on Bootstrap grid breakpoints:

Viewport Breakpoint	Layout Behavior	Sidebar Interaction
Mobile (<992px)	Single-column vertical stack grid	Hidden by default. Toggle slides in full width off-screen
Tablet (992px - 1199px)	High density grids	Collapsed to thin icon-only bar automatically
Desktop (≥1200px)	Multi-column bento grids	Expanded to full 240px wide side navigation rail

Browser Support

UrbanHub leverages modern web standards (ES Modules, CSS Variables, CSS Grid, IntersectionObserver, and local memory caches). Supported engines include:

Google Chrome: v100+ (Full Support)
Apple Safari: v15.4+ (Full Support with CSS variable support)
Mozilla Firefox: v100+ (Full Support)
Microsoft Edge: v100+ (Full Support)
Opera: v85+ (Full Support)

FAQ & Support

UrbanHub is designed as a modular static client template. To link databases (such as Firestore or PostgreSQL), import your client SDKs (e.g. Firebase Admin SDK or Drizzle ORM client) and populate form validation handlers in assets/js/main.js to post to your REST API or backend services.

Absolutely. You can import extra icon frameworks (like FontAwesome or Lucide Icons) by adding their stylesheet links to the <head> of your template, and using their standard HTML class names within the side navigation lists.

We are committed to providing premium real estate design layouts. Reach our design engineering desk directly at support@urbanhub.com for concierge setup assistance or feedback.

Credits

UrbanHub would not exist without the dedication of outstanding open-source libraries and digital resource creators:

Bootstrap Framework: Powered by Bootstrap 5.3 CSS grid systems.
Chart.js: Dynamic theme-responsive HTML5 analytical charts.
AOS Animate: Scroll-triggered entry and exit animation effects.
Unsplash: Premium, high-resolution royalty-free urban design photography assets.
Google Fonts: Plus Jakarta Sans and Inter font distributions.

Version History

v1.0.1 (Current) July 10, 2026

Theme Documentation & Error Layout Integration

Created comprehensive developer documentation.html module.
Configured premium interactive copy-code blocks.
Built section search engine & custom scrollspy layout tracking.
Completed verification pages and email verify validation screens.

v1.0.0 June 1, 2026

Core Platform Initial Release

Released core executive real estate analytical dashboard.
Created Property management boards with quick filtration layers.
Added real-time messaging, calendar events logs, and dark theme variables.

Theme Documentation

Project Overview

Core Technical Specifications

Folder Structure

Assets Catalog

HTML Structure

CSS Structure

Core CSS Variables & Custom Theme Settings

JavaScript Engine

Theme and Sidebar Management Implementation

Theme System & Mode

Sidebar Layout

Header Controls

Footer Design

Bootstrap Components

Icons Selection

Form Controls

Bento Cards

Hover Bento Action

Accent Border Bento

Tables & Ledger

Theme Charts

Animations & AOS

Customization Guide

Branding & Gold Accents

Responsive Guide

Browser Support

FAQ & Support

How do I link databases to this dashboard template?

Can I add custom icons outside of Bootstrap Icons?

Where can I submit design feedback?

Credits

Version History