mirror of https://github.com/ColorlibHQ/gentelella
160 lines
4.4 KiB
Markdown
160 lines
4.4 KiB
Markdown
---
|
|
layout: default
|
|
title: Gentelella Admin Template Documentation
|
|
nav_order: 1
|
|
description: "Modern Bootstrap 5 Admin Dashboard Template with Performance Optimizations"
|
|
permalink: /
|
|
---
|
|
|
|
# Gentelella Admin Template Documentation
|
|
{: .fs-9 }
|
|
|
|
Modern Bootstrap 5 Admin Dashboard Template with Vite Build System & Performance Optimizations
|
|
{: .fs-6 .fw-300 }
|
|
|
|
[Get Started Now](#quick-start){: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 }
|
|
[View on GitHub](https://github.com/puikinsh/gentelella){: .btn .fs-5 .mb-4 .mb-md-0 }
|
|
|
|
---
|
|
|
|
## Welcome to Gentelella v2.0
|
|
|
|
Gentelella is a modern, powerful, and completely free Bootstrap 5 admin template that has been completely rebuilt with **Vite**, **performance optimizations**, and the latest web technologies.
|
|
|
|
### ⨠What's New in Version 2.0
|
|
|
|
- **đ 90% smaller initial bundle** (779KB â 79KB)
|
|
- **⥠40-70% faster page loads** with intelligent code splitting
|
|
- **đĻ Modern Build System** with Vite 6.3.5
|
|
- **đ¨ Bootstrap 5.3.6** with updated design system
|
|
- **𧊠Smart Module Loading** - Load only what you need
|
|
- **đą Mobile-First** responsive design
|
|
|
|
### đ Performance Metrics
|
|
|
|
| Metric | Before | After | Improvement |
|
|
|--------|--------|-------|-------------|
|
|
| Initial Bundle Size | 779 KB | 79 KB | **90% smaller** |
|
|
| Total Page Load | 1.3 MB | 770 KB | **40% reduction** |
|
|
| First Contentful Paint | 2.1s | 0.8s | **62% faster** |
|
|
| Time to Interactive | 3.5s | 1.2s | **66% faster** |
|
|
|
|
---
|
|
|
|
## Quick Start
|
|
|
|
### Prerequisites
|
|
- [Node.js](https://nodejs.org/) (v16 or higher)
|
|
- npm, yarn, or pnpm package manager
|
|
|
|
### Installation
|
|
|
|
```bash
|
|
# Clone the repository
|
|
git clone https://github.com/puikinsh/gentelella.git
|
|
cd gentelella
|
|
|
|
# Install dependencies
|
|
npm install
|
|
|
|
# Start development server
|
|
npm run dev
|
|
# Your server will be running at http://localhost:3000
|
|
```
|
|
|
|
### Alternative Installation
|
|
|
|
```bash
|
|
# npm package
|
|
npm install gentelella --save
|
|
|
|
# yarn package
|
|
yarn add gentelella
|
|
```
|
|
|
|
---
|
|
|
|
## Features Overview
|
|
|
|
### đ Dashboard Components
|
|
- **3 Dashboard Layouts** - Different styles for various use cases
|
|
- **Widget Cards** - Revenue, stats, progress indicators
|
|
- **Real-time Charts** - Live data visualization
|
|
- **Activity Feeds** - User activity and notifications
|
|
|
|
### đ Data Visualization
|
|
- **Chart.js Integration** - Modern, responsive charts
|
|
- **Morris.js Charts** - Beautiful time-series graphs
|
|
- **Interactive Maps** - World maps with jVectorMap
|
|
- **Gauge Charts** - Animated gauge displays
|
|
|
|
### đ Form Components
|
|
- **Multi-step Wizards** - Complex form workflows
|
|
- **Rich Text Editors** - WYSIWYG content editing
|
|
- **File Upload** - Drag & drop with progress tracking
|
|
- **Advanced Selects** - Searchable, multi-select dropdowns
|
|
|
|
### đ Table Components
|
|
- **DataTables** - Advanced sorting, filtering, pagination
|
|
- **Responsive Tables** - Mobile-optimized displays
|
|
- **Export Functions** - PDF, Excel, CSV export options
|
|
|
|
---
|
|
|
|
## Technology Stack
|
|
|
|
### Core Technologies
|
|
- **Bootstrap 5.3.6** - CSS Framework
|
|
- **Vite 6.3.5** - Build Tool
|
|
- **SASS** - CSS Preprocessor
|
|
- **jQuery 3.6.1** - DOM Manipulation*
|
|
|
|
*jQuery is being phased out in favor of vanilla JavaScript
|
|
|
|
### Chart Libraries
|
|
- **Chart.js 4.4.2** - Modern responsive charts
|
|
- **Morris.js** - Time-series line graphs
|
|
- **jVectorMap** - Interactive world maps
|
|
- **Gauge.js** - Beautiful animated gauges
|
|
|
|
### Form Libraries
|
|
- **Select2** - Enhanced dropdown selections
|
|
- **Tempus Dominus** - Bootstrap 5 date/time picker
|
|
- **Ion.RangeSlider** - Advanced range controls
|
|
- **DataTables** - Advanced table functionality
|
|
|
|
---
|
|
|
|
## Browser Support
|
|
|
|
| Browser | Version |
|
|
|---------|---------|
|
|
| Chrome | 88+ |
|
|
| Firefox | 85+ |
|
|
| Safari | 14+ |
|
|
| Edge | 88+ |
|
|
| Opera | 74+ |
|
|
|
|
**Internet Explorer is not supported** - We focus on modern browsers for the best performance and features.
|
|
|
|
---
|
|
|
|
## License
|
|
|
|
**MIT License** - Free for personal and commercial use with attribution to [Colorlib](https://colorlib.com/).
|
|
|
|
---
|
|
|
|
## Next Steps
|
|
|
|
- **[Installation Guide]({{ site.baseurl }}/installation/)** - Detailed setup instructions
|
|
- **[Configuration]({{ site.baseurl }}/configuration/)** - Customize the template
|
|
- **[Components]({{ site.baseurl }}/components/)** - Explore all available components
|
|
- **[Performance]({{ site.baseurl }}/performance/)** - Optimization strategies
|
|
- **[Deployment]({{ site.baseurl }}/deployment/)** - Deploy to production
|
|
|
|
---
|
|
|
|
<div class="text-center">
|
|
<p><strong>Made with â¤ī¸ by <a href="https://colorlib.com/">Colorlib</a></strong></p>
|
|
</div> |