gentelella/docs/_site/index.html

582 lines
21 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="stylesheet" href="/gentelella/assets/css/just-the-docs-default.css">
<link rel="stylesheet" href="/gentelella/assets/css/just-the-docs-head-nav.css" id="jtd-head-nav-stylesheet">
<style id="jtd-nav-activation">
.site-nav > ul.nav-list:first-child > li:not(:nth-child(1)) > a,
.site-nav > ul.nav-list:first-child > li > ul > li a {
background-image: none;
}
.site-nav > ul.nav-list:not(:first-child) a,
.site-nav li.external a {
background-image: none;
}
.site-nav > ul.nav-list:first-child > li:nth-child(1) > a {
font-weight: 600;
text-decoration: none;
}.site-nav > ul.nav-list:first-child > li:nth-child(1) > button svg {
transform: rotate(-90deg);
}.site-nav > ul.nav-list:first-child > li.nav-list-item:nth-child(1) > ul.nav-list {
display: block;
}
</style>
<script src="/gentelella/assets/js/vendor/lunr.min.js"></script>
<script src="/gentelella/assets/js/just-the-docs.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/gentelella/favicon.ico" type="image/x-icon">
<!-- Begin Jekyll SEO tag v2.8.0 -->
<title>Gentelella Admin Template Documentation | Gentelella Admin Template</title>
<meta name="generator" content="Jekyll v3.9.5" />
<meta property="og:title" content="Gentelella Admin Template Documentation" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="Modern Bootstrap 5 Admin Dashboard Template with Performance Optimizations" />
<meta property="og:description" content="Modern Bootstrap 5 Admin Dashboard Template with Performance Optimizations" />
<link rel="canonical" href="http://localhost:4000/gentelella/" />
<meta property="og:url" content="http://localhost:4000/gentelella/" />
<meta property="og:site_name" content="Gentelella Admin Template" />
<meta property="og:image" content="http://localhost:4000/gentelella/assets/images/gentelella-preview.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="http://localhost:4000/gentelella/assets/images/gentelella-preview.jpg" />
<meta property="twitter:title" content="Gentelella Admin Template Documentation" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebSite","description":"Modern Bootstrap 5 Admin Dashboard Template with Performance Optimizations","headline":"Gentelella Admin Template Documentation","image":"http://localhost:4000/gentelella/assets/images/gentelella-preview.jpg","name":"Gentelella Admin Template","url":"http://localhost:4000/gentelella/"}</script>
<!-- End Jekyll SEO tag -->
</head>
<body>
<a class="skip-to-main" href="#main-content">Skip to main content</a>
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="svg-link" viewBox="0 0 24 24">
<title>Link</title>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link">
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
</svg>
</symbol>
<symbol id="svg-menu" viewBox="0 0 24 24">
<title>Menu</title>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
<line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line>
</svg>
</symbol>
<symbol id="svg-arrow-right" viewBox="0 0 24 24">
<title>Expand</title>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</symbol>
<!-- Feather. MIT License: https://github.com/feathericons/feather/blob/master/LICENSE -->
<symbol id="svg-external-link" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link">
<title id="svg-external-link-title">(external link)</title>
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line>
</symbol>
<symbol id="svg-doc" viewBox="0 0 24 24">
<title>Document</title>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file">
<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline>
</svg>
</symbol>
<symbol id="svg-search" viewBox="0 0 24 24">
<title>Search</title>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search">
<circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</symbol>
<!-- Bootstrap Icons. MIT License: https://github.com/twbs/icons/blob/main/LICENSE.md -->
<symbol id="svg-copy" viewBox="0 0 16 16">
<title>Copy</title>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
</svg>
</symbol>
<symbol id="svg-copied" viewBox="0 0 16 16">
<title>Copied</title>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-check-fill" viewBox="0 0 16 16">
<path d="M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3Zm3 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3Z"/>
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5v-1Zm6.854 7.354-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708.708Z"/>
</svg>
</symbol>
</svg>
<div class="side-bar">
<div class="site-header" role="banner">
<a href="/gentelella/" class="site-title lh-tight">
Gentelella Admin Template
</a>
<button id="menu-button" class="site-button btn-reset" aria-label="Toggle menu" aria-pressed="false">
<svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><use xlink:href="#svg-menu"></use></svg>
</button>
</div>
<nav aria-label="Main" id="site-nav" class="site-nav">
<ul class="nav-list"><li class="nav-list-item"><a href="/gentelella/" class="nav-list-link">Gentelella Admin Template Documentation</a></li><li class="nav-list-item"><a href="/gentelella/installation/" class="nav-list-link">Installation Guide</a></li><li class="nav-list-item"><a href="/gentelella/configuration/" class="nav-list-link">Configuration</a></li><li class="nav-list-item"><a href="/gentelella/components/" class="nav-list-link">Components Guide</a></li><li class="nav-list-item"><a href="/gentelella/performance/" class="nav-list-link">Performance Guide</a></li><li class="nav-list-item"><a href="/gentelella/deployment/" class="nav-list-link">Deployment Guide</a></li><li class="nav-list-item"><a href="/gentelella/customization/" class="nav-list-link">Customization Guide</a></li><li class="nav-list-item"><a href="/gentelella/api-integration/" class="nav-list-link">API Integration</a></li></ul>
</nav>
<footer class="site-footer">
This site uses <a href="https://github.com/just-the-docs/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.
</footer>
</div>
<div class="main" id="top">
<div id="main-header" class="main-header">
<div class="search" role="search">
<div class="search-input-wrap">
<input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search Gentelella Admin Template" aria-label="Search Gentelella Admin Template" autocomplete="off">
<label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label>
</div>
<div id="search-results" class="search-results"></div>
</div>
<nav aria-label="Auxiliary" class="aux-nav">
<ul class="aux-nav-list">
<li class="aux-nav-list-item">
<a href="//github.com/puikinsh/gentelella" class="site-button"
>
Gentelella on GitHub
</a>
</li>
<li class="aux-nav-list-item">
<a href="//colorlib.com" class="site-button"
>
Colorlib
</a>
</li>
</ul>
</nav>
</div>
<div class="main-content-wrap">
<div id="main-content" class="main-content">
<main>
<h1 class="fs-9" id="gentelella-admin-template-documentation">
<a href="#gentelella-admin-template-documentation" class="anchor-heading" aria-labelledby="gentelella-admin-template-documentation"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Gentelella Admin Template Documentation
</h1>
<p class="fs-6 fw-300">Modern Bootstrap 5 Admin Dashboard Template with Vite Build System &amp; Performance Optimizations</p>
<p><a href="#quick-start" class="btn btn-primary fs-5 mb-4 mb-md-0 mr-2">Get Started Now</a>
<a href="https://github.com/puikinsh/gentelella" class="btn fs-5 mb-4 mb-md-0">View on GitHub</a></p><hr />
<h2 id="welcome-to-gentelella-v20">
<a href="#welcome-to-gentelella-v20" class="anchor-heading" aria-labelledby="welcome-to-gentelella-v20"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Welcome to Gentelella v2.0
</h2>
<p>Gentelella is a modern, powerful, and completely free Bootstrap 5 admin template that has been completely rebuilt with <strong>Vite</strong>, <strong>performance optimizations</strong>, and the latest web technologies.</p>
<h3 id="-whats-new-in-version-20">
<a href="#-whats-new-in-version-20" class="anchor-heading" aria-labelledby="-whats-new-in-version-20"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> ✨ Whats New in Version 2.0
</h3>
<ul>
<li><strong>🚀 90% smaller initial bundle</strong> (779KB → 79KB)</li>
<li><strong>⚡ 40-70% faster page loads</strong> with intelligent code splitting</li>
<li><strong>📦 Modern Build System</strong> with Vite 6.3.5</li>
<li><strong>🎨 Bootstrap 5.3.6</strong> with updated design system</li>
<li><strong>🧩 Smart Module Loading</strong> - Load only what you need</li>
<li><strong>📱 Mobile-First</strong> responsive design</li>
</ul>
<h3 id="-performance-metrics">
<a href="#-performance-metrics" class="anchor-heading" aria-labelledby="-performance-metrics"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 📊 Performance Metrics
</h3>
<div class="table-wrapper"><table>
<thead>
<tr>
<th>Metric</th>
<th>Before</th>
<th>After</th>
<th>Improvement</th>
</tr>
</thead>
<tbody>
<tr>
<td>Initial Bundle Size</td>
<td>779 KB</td>
<td>79 KB</td>
<td><strong>90% smaller</strong></td>
</tr>
<tr>
<td>Total Page Load</td>
<td>1.3 MB</td>
<td>770 KB</td>
<td><strong>40% reduction</strong></td>
</tr>
<tr>
<td>First Contentful Paint</td>
<td>2.1s</td>
<td>0.8s</td>
<td><strong>62% faster</strong></td>
</tr>
<tr>
<td>Time to Interactive</td>
<td>3.5s</td>
<td>1.2s</td>
<td><strong>66% faster</strong></td>
</tr>
</tbody>
</table></div><hr />
<h2 id="quick-start">
<a href="#quick-start" class="anchor-heading" aria-labelledby="quick-start"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Quick Start
</h2>
<h3 id="prerequisites">
<a href="#prerequisites" class="anchor-heading" aria-labelledby="prerequisites"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Prerequisites
</h3>
<ul>
<li><a href="https://nodejs.org/">Node.js</a> (v16 or higher)</li>
<li>npm, yarn, or pnpm package manager</li>
</ul>
<h3 id="installation">
<a href="#installation" class="anchor-heading" aria-labelledby="installation"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Installation
</h3>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"># Clone the repository</span>
git clone https://github.com/puikinsh/gentelella.git
<span class="nb">cd </span>gentelella
<span class="c"># Install dependencies</span>
npm <span class="nb">install</span>
<span class="c"># Start development server</span>
npm run dev
<span class="c"># Your server will be running at http://localhost:3000</span>
</code></pre></div></div>
<h3 id="alternative-installation">
<a href="#alternative-installation" class="anchor-heading" aria-labelledby="alternative-installation"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Alternative Installation
</h3>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"># npm package</span>
npm <span class="nb">install </span>gentelella <span class="nt">--save</span>
<span class="c"># yarn package </span>
yarn add gentelella
</code></pre></div></div><hr />
<h2 id="features-overview">
<a href="#features-overview" class="anchor-heading" aria-labelledby="features-overview"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Features Overview
</h2>
<h3 id="-dashboard-components">
<a href="#-dashboard-components" class="anchor-heading" aria-labelledby="-dashboard-components"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 🏠 Dashboard Components
</h3>
<ul>
<li><strong>3 Dashboard Layouts</strong> - Different styles for various use cases</li>
<li><strong>Widget Cards</strong> - Revenue, stats, progress indicators</li>
<li><strong>Real-time Charts</strong> - Live data visualization</li>
<li><strong>Activity Feeds</strong> - User activity and notifications</li>
</ul>
<h3 id="-data-visualization">
<a href="#-data-visualization" class="anchor-heading" aria-labelledby="-data-visualization"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 📊 Data Visualization
</h3>
<ul>
<li><strong>Chart.js Integration</strong> - Modern, responsive charts</li>
<li><strong>Morris.js Charts</strong> - Beautiful time-series graphs</li>
<li><strong>Interactive Maps</strong> - World maps with jVectorMap</li>
<li><strong>Gauge Charts</strong> - Animated gauge displays</li>
</ul>
<h3 id="-form-components">
<a href="#-form-components" class="anchor-heading" aria-labelledby="-form-components"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 📝 Form Components
</h3>
<ul>
<li><strong>Multi-step Wizards</strong> - Complex form workflows</li>
<li><strong>Rich Text Editors</strong> - WYSIWYG content editing</li>
<li><strong>File Upload</strong> - Drag &amp; drop with progress tracking</li>
<li><strong>Advanced Selects</strong> - Searchable, multi-select dropdowns</li>
</ul>
<h3 id="-table-components">
<a href="#-table-components" class="anchor-heading" aria-labelledby="-table-components"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 📋 Table Components
</h3>
<ul>
<li><strong>DataTables</strong> - Advanced sorting, filtering, pagination</li>
<li><strong>Responsive Tables</strong> - Mobile-optimized displays</li>
<li><strong>Export Functions</strong> - PDF, Excel, CSV export options</li>
</ul><hr />
<h2 id="technology-stack">
<a href="#technology-stack" class="anchor-heading" aria-labelledby="technology-stack"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Technology Stack
</h2>
<h3 id="core-technologies">
<a href="#core-technologies" class="anchor-heading" aria-labelledby="core-technologies"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Core Technologies
</h3>
<ul>
<li><strong>Bootstrap 5.3.6</strong> - CSS Framework</li>
<li><strong>Vite 6.3.5</strong> - Build Tool</li>
<li><strong>SASS</strong> - CSS Preprocessor</li>
<li><strong>jQuery 3.6.1</strong> - DOM Manipulation*</li>
</ul>
<p>*jQuery is being phased out in favor of vanilla JavaScript</p>
<h3 id="chart-libraries">
<a href="#chart-libraries" class="anchor-heading" aria-labelledby="chart-libraries"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Chart Libraries
</h3>
<ul>
<li><strong>Chart.js 4.4.2</strong> - Modern responsive charts</li>
<li><strong>Morris.js</strong> - Time-series line graphs</li>
<li><strong>jVectorMap</strong> - Interactive world maps</li>
<li><strong>Gauge.js</strong> - Beautiful animated gauges</li>
</ul>
<h3 id="form-libraries">
<a href="#form-libraries" class="anchor-heading" aria-labelledby="form-libraries"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Form Libraries
</h3>
<ul>
<li><strong>Select2</strong> - Enhanced dropdown selections</li>
<li><strong>Tempus Dominus</strong> - Bootstrap 5 date/time picker</li>
<li><strong>Ion.RangeSlider</strong> - Advanced range controls</li>
<li><strong>DataTables</strong> - Advanced table functionality</li>
</ul><hr />
<h2 id="browser-support">
<a href="#browser-support" class="anchor-heading" aria-labelledby="browser-support"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Browser Support
</h2>
<div class="table-wrapper"><table>
<thead>
<tr>
<th>Browser</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chrome</td>
<td>88+</td>
</tr>
<tr>
<td>Firefox</td>
<td>85+</td>
</tr>
<tr>
<td>Safari</td>
<td>14+</td>
</tr>
<tr>
<td>Edge</td>
<td>88+</td>
</tr>
<tr>
<td>Opera</td>
<td>74+</td>
</tr>
</tbody>
</table></div>
<p><strong>Internet Explorer is not supported</strong> - We focus on modern browsers for the best performance and features.</p><hr />
<h2 id="license">
<a href="#license" class="anchor-heading" aria-labelledby="license"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> License
</h2>
<p><strong>MIT License</strong> - Free for personal and commercial use with attribution to <a href="https://colorlib.com/">Colorlib</a>.</p><hr />
<h2 id="next-steps">
<a href="#next-steps" class="anchor-heading" aria-labelledby="next-steps"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Next Steps
</h2>
<ul>
<li><strong><a href="/gentelella/installation/">Installation Guide</a></strong> - Detailed setup instructions</li>
<li><strong><a href="/gentelella/configuration/">Configuration</a></strong> - Customize the template</li>
<li><strong><a href="/gentelella/components/">Components</a></strong> - Explore all available components</li>
<li><strong><a href="/gentelella/performance/">Performance</a></strong> - Optimization strategies</li>
<li><strong><a href="/gentelella/deployment/">Deployment</a></strong> - Deploy to production</li>
</ul><hr />
<div class="text-center">
<p><strong>Made with ❤️ by <a href="https://colorlib.com/">Colorlib</a></strong></p>
</div>
</main>
<hr>
<footer>
<p><a href="#top" id="back-to-top">Back to top</a></p>
<p class="text-small text-grey-dk-100 mb-0">Copyright &copy; {{ 'now' | date: '%Y' }} Colorlib. Distributed under the <a href="https://github.com/puikinsh/gentelella/blob/master/LICENSE.txt">MIT license</a>.</p>
</footer>
</div>
</div>
<div class="search-overlay"></div>
</div>
</body>
</html>