Awesome
Light Admin
DEMO: https://trendytech.ru/templates/light-admin/
Light Admin is a lightweight bootstrap 3.x admin panel template. It has 255.3 KB of one minified CSS (theme + bootstrap + all plugins) and 3.2 KB of minified JS.
Color themes
- Default (turquoise)
- Blue
- Red
- Purple
- Yellow
Pages
- Dashboard
- Charts
- CRUD
- Tables
- Forms
- UI Elements
- General
- Panels
- Tabs and Accordions
- Buttons
- Modals
- Modals
- Notifications
- Typography
- Icons
- Grid
- Pages
- Blank page
- 404 Page
- Login
- Sign Up
- Forgot Password
- Profile
- Calendar
- Gallery
- Layouts
- Without sidebar
- Non-fixed sidebar
- Non-fixed topbar
- Native scrollbar
- White header
- Filled topbar
Credits
Core components
- Bootstrap 3.3.7 - https://getbootstrap.com
- jQuery 3.3.1 - https://jquery.com/
- OverlayScrollbars - https://kingsora.github.io/OverlayScrollbars
- Themify Icons - https://themify.me/themify-icons
Plugins
- Datatables - https://datatables.net
- Chart.js - https://www.chartjs.org
- Select2 - https://select2.org
- Awesome bootstrap checkbox - https://github.com/flatlogic/awesome-bootstrap-checkbox
- Moment - https://momentjs.com
- Bootstrap Datetimepicker - https://eonasdan.github.io/bootstrap-datetimepicker/
- Bootstrap Notify - http://bootstrap-notify.remabledesigns.com/
- Fullcalendar - https://fullcalendar.io/
- Lightbox - https://lokeshdhakar.com/projects/lightbox2/
Directory Structure
light-admin.zip
├── dist # Complete distribution with all demo content
├── docs # Documentation
└── src # Sources
├── less # LESS source files
└── js # JavaScript source files
Getting Started
Basic Setup
This is the quickest way to setup the template, you just have to copy the dist/assets
directory and blank.html
into your project root directory and start working on the blank.html
file.
Important! Using this method you'll need to add your custom styles in a different css file, to avoid losing changes when you update the template.
Be sure to include the essentials scripts in your document to get things work properly. After that you're ready to start building.
This method is perfect if you think you are not going to make several changes to the original version and use it "as is", otherwise we suggest to use one of the following methods.
Using GULP
Install Node & Gulp
- Be sure to have the latest version of Node.js installed & running in your computer. We are going to use npm that comes with Node.js installation.
- In your terminal go to the root directory with
cd
command and then enter the following commads to install the project dependencies:
npm install
To update dependencies, run npm update
and then run gulp copy
to copy the updated dependencies into the dist/assets/vendor
directory.
Available Tasks
After install dependencies now you can run the automated taks, here are the available commands:
-
gulp
The default task will compile the LESS and JS into thedist
directory and minify the output, and it will copy all vendor libraries fromnode_modules
into thedist/assets/vendor
directory. -
gulp dev
The dev task will serve up a local version of the template and will watch the LESS and JS files for changes and reload the browser window automatically. -
gulp less
Less compiler task. -
gulp js
Copy JS into the dist directory. -
gulp minify-css
A CSS minifier task. -
gulp minify-js
A JS minifer task, -
gulp copy
Copy vendor libraries to dist directory