mirror of https://github.com/ColorlibHQ/gentelella
305 lines
10 KiB
Markdown
305 lines
10 KiB
Markdown
# Gentelella Admin Template
|
|
|
|
**Modern Bootstrap 5 Admin Dashboard Template with Vite Build System**
|
|
|
|
Gentelella is a powerful, free-to-use Bootstrap 5 admin template that has been completely modernized with Vite, performance optimizations, and the latest web technologies. This template provides a comprehensive foundation for building admin panels, dashboards, and back-end applications.
|
|
|
|
|
|
|
|
## ⨠What's New in v2.0
|
|
|
|
- **đ Vite Build System** - Lightning-fast development and optimized production builds
|
|
- **đĻ Bootstrap 5** - Latest Bootstrap with modern design system
|
|
- **⥠Performance Optimized** - 90% smaller initial bundle size with smart code splitting
|
|
- **đ§ Modern JavaScript** - ES6+ modules with dynamic imports
|
|
- **đ¯ TypeScript Ready** - Full TypeScript support available
|
|
- **đą Mobile First** - Responsive design optimized for all devices
|
|
|
|
## đ Performance Improvements
|
|
|
|
- **Before**: 779 KB monolithic JavaScript bundle
|
|
- **After**: 79 KB initial load + smart chunk loading
|
|
- **Result**: **90% smaller initial bundle** with **40-70% faster page loads**
|
|
|
|
## đ Quick Start
|
|
|
|
### Prerequisites
|
|
|
|
- [Node.js](https://nodejs.org/) (v16 or higher)
|
|
- [npm](https://npmjs.com/) or [yarn](https://yarnpkg.com/)
|
|
|
|
### 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
|
|
|
|
# Build for production
|
|
npm run build
|
|
|
|
# Preview production build
|
|
npm run preview
|
|
```
|
|
|
|
### Development Commands
|
|
|
|
```bash
|
|
# Development with hot reload
|
|
npm run dev
|
|
|
|
# Production build with optimizations
|
|
npm run build
|
|
|
|
# Preview production build locally
|
|
npm run preview
|
|
```
|
|
|
|
## đī¸ Project Structure
|
|
|
|
```
|
|
gentelella/
|
|
âââ production/ # HTML templates and static assets
|
|
â âââ *.html # 42 pre-built admin pages
|
|
â âââ images/ # Image assets
|
|
âââ src/ # Source files
|
|
â âââ main-core.js # Core essentials (79 KB)
|
|
â âââ main.scss # Styles entry point
|
|
â âââ js/ # Custom JavaScript
|
|
â âââ scss/ # Custom SASS files
|
|
â âââ modules/ # Feature-specific modules
|
|
â âââ charts.js # Chart functionality (219 KB)
|
|
â âââ forms.js # Form enhancements (200 KB)
|
|
â âââ tables.js # DataTables functionality
|
|
â âââ dashboard.js # Dashboard widgets
|
|
âââ dist/ # Production build output
|
|
âââ vite.config.js # Vite configuration
|
|
âââ package.json # Dependencies and scripts
|
|
```
|
|
|
|
## đ¯ Smart Loading System
|
|
|
|
The template now uses intelligent code splitting:
|
|
|
|
- **Core Bundle** (79 KB): Essential libraries loaded on every page
|
|
- **Chart Module** (219 KB): Only loads on pages with charts
|
|
- **Form Module** (200 KB): Only loads on pages with advanced forms
|
|
- **Table Module**: Only loads on pages with DataTables
|
|
- **Dashboard Module**: Only loads dashboard-specific widgets
|
|
|
|
## đą Responsive Design
|
|
|
|
Built with mobile-first approach:
|
|
- **Phones**: Optimized touch interfaces
|
|
- **Tablets**: Adaptive layouts
|
|
- **Desktops**: Full-featured experience
|
|
- **Large Screens**: Enhanced productivity layouts
|
|
|
|
## đ ī¸ Customization
|
|
|
|
### Adding New Pages
|
|
|
|
1. Create HTML file in `production/` directory
|
|
2. Add entry to `vite.config.js` input configuration
|
|
3. Reference appropriate modules for functionality needed
|
|
|
|
### Custom Styling
|
|
|
|
```scss
|
|
// src/scss/custom.scss
|
|
.my-custom-component {
|
|
// Your custom styles
|
|
}
|
|
```
|
|
|
|
### Adding Features
|
|
|
|
```javascript
|
|
// Load modules conditionally
|
|
if (document.querySelector('.chart-container')) {
|
|
const charts = await loadModule('charts');
|
|
}
|
|
```
|
|
|
|
## đĻ Available Components
|
|
|
|
### Dashboard Features
|
|
- **Multiple Dashboard Layouts** - 3 different dashboard designs
|
|
- **Widgets** - Various dashboard widgets and cards
|
|
- **Charts** - Chart.js, Morris.js, Sparklines integration
|
|
- **Maps** - Interactive world maps with jVectorMap
|
|
|
|
### Form Components
|
|
- **Advanced Forms** - Multi-step wizards, validation
|
|
- **Form Elements** - Rich text editors, date pickers
|
|
- **File Upload** - Drag & drop file upload with progress
|
|
- **Input Enhancements** - Autocomplete, tags, switches
|
|
|
|
### UI Elements
|
|
- **Tables** - DataTables with sorting, filtering, pagination
|
|
- **Typography** - Comprehensive typography system
|
|
- **Icons** - Font Awesome 6 + Glyphicons
|
|
- **Media Gallery** - Image gallery with lightbox
|
|
- **Calendar** - Full-featured calendar component
|
|
|
|
### Additional Pages
|
|
- **E-commerce** - Product listings, shopping cart
|
|
- **User Management** - Profiles, contacts, projects
|
|
- **Authentication** - Login, registration pages
|
|
- **Error Pages** - 403, 404, 500 error pages
|
|
|
|
## đ¨ Built With
|
|
|
|
### Core Technologies
|
|
- **Bootstrap 5.3.6** - Modern CSS framework
|
|
- **Vite 6.3.5** - Next generation build tool
|
|
- **SASS** - CSS preprocessor
|
|
- **jQuery 3.6.1** - DOM manipulation (being phased out)
|
|
|
|
### Charts & Visualization
|
|
- **Chart.js 4.4.2** - Modern charting library
|
|
- **Sparklines** - Mini charts and graphs
|
|
- **jVectorMap** - Interactive world maps
|
|
- **Gauge.js** - Beautiful gauge charts
|
|
|
|
### Form & UI Libraries
|
|
- **Select2** - Enhanced select dropdowns
|
|
- **Tempus Dominus** - Bootstrap 5 date/time picker
|
|
- **Ion Range Slider** - Range slider component
|
|
- **Switchery** - iOS-style toggle switches
|
|
- **DataTables** - Advanced table functionality
|
|
|
|
### Utilities
|
|
- **Day.js** - Lightweight date library
|
|
- **NProgress** - Progress bars for page loading
|
|
- **Autosize** - Auto-resizing textareas
|
|
- **Font Awesome 6** - Icon library
|
|
|
|
## đ§ Configuration
|
|
|
|
### Vite Configuration
|
|
|
|
The template includes optimized Vite configuration with:
|
|
- Smart code splitting for optimal loading
|
|
- Asset optimization with cache-busting
|
|
- Development server with hot reload
|
|
- Production builds with compression
|
|
|
|
### Performance Features
|
|
|
|
- **Tree Shaking** - Removes unused code
|
|
- **Code Splitting** - Loads only what's needed
|
|
- **Caching Strategy** - Optimized for browser caching
|
|
|
|
## đ Deployment
|
|
|
|
### Build for Production
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
### Deploy to Various Platforms
|
|
|
|
- **Netlify**: Drag and drop the `dist` folder
|
|
- **Vercel**: Connect your GitHub repository
|
|
- **GitHub Pages**: Use the built-in GitHub Actions
|
|
- **Traditional Hosting**: Upload `dist` folder contents
|
|
|
|
## đ¤ Contributing
|
|
|
|
We welcome contributions! To contribute:
|
|
|
|
1. **Fork** the repository
|
|
2. **Create** a feature branch (`git checkout -b feature/amazing-feature`)
|
|
3. **Commit** your changes (`git commit -m 'Add amazing feature'`)
|
|
4. **Push** to the branch (`git push origin feature/amazing-feature`)
|
|
5. **Open** a Pull Request
|
|
|
|
### Development Setup
|
|
|
|
```bash
|
|
git clone https://github.com/your-username/gentelella.git
|
|
cd gentelella
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
## đ Documentation & Demo
|
|
|
|
- **[Live Demo](https://colorlib.com/polygon/gentelella/index.html)** - See the template in action
|
|
- **[Component Documentation](https://colorlibhq.github.io/gentelella/)** - Detailed component guide
|
|
- **[Performance Guide](PERFORMANCE_OPTIMIZATIONS.md)** - Optimization details
|
|
- **[Componentization Plan](COMPONENTIZATION_GAMEPLAN.md)** - Future modularization
|
|
|
|
## đŧ Showcase Your Work
|
|
|
|
We would love to see how you use this awesome admin template. You can notify us about your site, app or service by tweeting to [@colorlib](https://twitter.com/colorlib). Once the list grows long enough we will write a post similar to [this showcase](https://colorlib.com/wp/avada-theme-examples/) to feature the best examples.
|
|
|
|
## đĻ Installation via Package Managers
|
|
|
|
```bash
|
|
# npm
|
|
npm install gentelella --save
|
|
|
|
# yarn
|
|
yarn add gentelella
|
|
|
|
# bower (legacy)
|
|
bower install gentelella --save
|
|
```
|
|
|
|
## đ Community Integrations
|
|
|
|
Gentelella has been integrated into various frameworks:
|
|
|
|
- **[Rails](https://github.com/mwlang/gentelella-rails)** - Ruby on Rails integration
|
|
- **[Laravel](https://github.com/Labs64/laravel-boilerplate)** - PHP Laravel boilerplate
|
|
- **[Django](https://github.com/GiriB/django-gentelella)** - Python Django app
|
|
- **[Angular](https://github.com/kmkatsma/angular2-webpack-starter-gentelella)** - Angular integration
|
|
- **[React](https://github.com/thomaslwq/react-admin)** - React implementation
|
|
- **[Symfony](https://github.com/mamless/Gentella-admin-Symfony-6)** - Symfony 6 integration
|
|
- **[Yii](https://github.com/yiister/yii2-gentelella)** - Yii framework integration
|
|
- **[Flask](https://github.com/afourmy/flask-gentelella)** - Python Flask app
|
|
- **[CakePHP](https://github.com/backstageel/cakephp-gentelella-theme)** - CakePHP integration
|
|
- **[Aurelia](https://github.com/kmkatsma/aurelia-gentelella)** - Aurelia TypeScript integration
|
|
- **[Gentelella RTL](https://github.com/mortezakarimi/gentelella-rtl)** - Right-to-left language support
|
|
|
|
Let us know if you have done integration for this admin template on other platforms and frameworks and we'll be happy to share your work.
|
|
|
|
## đ¨ Other Templates and Resources by Colorlib
|
|
|
|
- **[Free Bootstrap Admin Templates](https://colorlib.com/wp/free-bootstrap-admin-dashboard-templates/)** - Collection of the best free Bootstrap admin dashboard templates
|
|
- **[Free Admin Templates](https://colorlib.com/wp/free-html5-admin-dashboard-templates/)** - Comprehensive list of free HTML5 admin dashboard templates
|
|
- **[Angular Templates](https://colorlib.com/wp/angularjs-admin-templates/)** - Popular admin templates based on Angular
|
|
- **[WordPress Admin Templates](https://colorlib.com/wp/wordpress-admin-dashboard-themes-plugins/)** - WordPress admin dashboard templates and plugins
|
|
- **[WordPress Themes](https://colorlib.com/wp/free-wordpress-themes/)** - Large selection of free WordPress themes
|
|
- **[Colorlib Blog](https://colorlib.com/)** - Web design and development resources
|
|
|
|
## đ License
|
|
|
|
Gentelella is licensed under **The MIT License (MIT)**. You can use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software.
|
|
|
|
**Attribution Required**: [Colorlib](https://colorlib.com/) must be credited as the original author.
|
|
|
|
## đĨ Maintainers
|
|
|
|
- **[Colorlib](https://colorlib.com/)** - Original design and development
|
|
- **[Aigars Silkalns](https://github.com/silkalns)** - Lead developer and maintainer
|
|
|
|
## đ Acknowledgments
|
|
|
|
- Bootstrap team for the amazing CSS framework
|
|
- All contributors who have helped improve this template
|
|
- The open-source community for the excellent libraries
|
|
|
|
---
|
|
|
|
**Made with â¤ī¸ by [Colorlib](https://colorlib.com/)**
|