SphereX Documentation
Thank you for purchasing SphereX. This guide explains installation, customization, project structure and best practices.
Tip: Add a dashboard screenshot here for a more professional documentation page.
Introduction
SphereX is a modern Bootstrap 5 HTML Admin Dashboard template for CRM, Analytics, SaaS, eCommerce and other admin applications.
Requirements
- Modern browser
- VS Code recommended
- Live Server optional
- No build process required
Getting Started
- Extract ZIP.
- Open the SphereX folder.
- Open index.html or use Live Server.
- Start customizing.
Folder Structure
SphereX/ ├── assets/ │ ├── css/ │ ├── js/ │ ├── images/ │ ├── vendor/ │ └── fonts/ ├── documentation/ ├── index.html └── ...
HTML Structure
<body> Sidebar Topbar Main Content Footer </body>
CSS Architecture
SphereX uses modular CSS imported via style.css.
- variable.css
- layout.css
- sidebar.css
- topbar.css
- buttons.css
- card.css
- forms.css
- tables.css
- calendar.css
- chat.css
- dark-mode.css
- utilities.css
- print.css
JavaScript
Custom scripts are in assets/js. Vendor libraries are stored separately.
Components
- Dashboard
- Cards
- Forms
- Tables
- Charts
- Calendar
- Chat
- Kanban
- Authentication
Pages Included
Dashboard, Analytics, Calendar, Chat, Products, Orders, Customers, Users, Advanced Tables, Kanban, Pricing, Invoice, Login, Register and Forgot Password.
Customization
- Edit colors in variable.css.
- Customize layouts in layout.css.
- Edit components in their own CSS files.
- Keep Bootstrap files unchanged.
Plugins
- Bootstrap 5
- Bootstrap Icons
- ApexCharts
- FullCalendar
- DataTables
- SortableJS
Support
Email: support@devspherex.com
Response time: 1–2 business days.
Credits
- Bootstrap
- Bootstrap Icons
- Montserrat
Changelog
v1.0.0 – Initial Release.