Documentation
Introduction
Purple Admin is a responsive HTML template that is based on the CSS framework Bootstrap 5, and it is built with Sass. Sass compiler makes it easier to code and customize. All Bootstrap components have been modified to fit the style of Purple Admin and provide a consistent look throughout the template. Read the documentation of Bootstrap or Sass if you want to learn more.
Before you start working with the template, go through the pages that are bundled with the theme. Most of the template example pages contain quick tips on how to create or use a component, which can be really helpful when you need to create something on the fly.
Note: We are trying our best to document how to use the template. If you think that something is missing from the documentation, please tell us about it. If you have any questions or issues regarding this theme please email us at support@bootstrapdash.com
Getting started
You can directly use the compiled and ready-to-use the version of the template. But in case you plan to customize the template extensively the template allows you to do so.
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations:
Folder Structure
Template Name
-
dist - contains the distribution files generated from src
-
themes
- assets - common assets for all templates
- theme_1
- theme_2
- index.html
-
- docs - contains the html,css & js files for the documentation
- node_modules - packages installed using npm
- package.json
- css - contains the css files compiled from scss
- fonts
- images
- js - js files for core functionality
- scss - sass files containing the styles
- vendors - all the necessary files copied from node_modules
- gulp-task - js files containing specific gulp tasks
- gulpfile.js - main gulpfile used to run the tasks
- index.html
- pages
- partials
- index.html
src
assets
themes - contains all the templates
theme_1
Note: The root folder denoted further in this documentation refers to the 'template' folder inside the downloaded folder
We have bundled up the vendor files needed for demo purpose into a folder 'vendors', you may not need all those vendors in your application. If you want to make any change in the vendor package files, you need to change the src path for related tasks in the file gulpfile.js and run the task bundleVendors to rebuild the vendor files.
Installation
Step 1: To begin, please download and install Node.js. If you have already installed it, please proceed to step 2.
Step 2: Install gulp-cli globally by running npm install -g gulp-cli command. If it's already installed, skip to step 3
Step 3: To get started, go to the root directory of the project and run the command npm install. This will install the necessary dependencies for the project to run smoothly.
Step 4: After installing the required dependencies, run cd src to navigate to the src folder and execute the gulp serve command.
gulp serve command from the directory where the gulpfile.js is located.
Options
We have provided a bunch of layout options for you with a single class change! You can use the following classes for each layout.
| Layout | Class |
|---|---|
| Compact menu | sidebar-mini |
| Icon menu | sidebar-icon-only |
| Sidebar Hidden (togglable) | sidebar-toggle-display, sidebar-hidden |
| Sidebar Overlay | sidebar-absolute, sidebar-hidden |
| Horizontal menu 1 | horizontal-menu (However, horizontal-menu has different HTML structure. Refer pages/layout/horizontal-menu.html) |
| Horizontal menu 2 | horizontal-menu-2 (However, horizontal-menu-2 has different HTML structure. Refer pages/layout/horizontal-menu-2.html) |
| Boxed layout | boxed-layout |
| RTL layout | rtl |
Customization
Bootstrapdash offers a flexible foundation for your web projects. This documentation guides you through the customization process, ensuring a seamless experience without modifying the core template files.
NOTE: All major customization should be carried out in the 'src' file. To avoid overrides of your custom styles, file loss, or any other conflicts during the customization, do not modify the source files of the templates directly; instead, add new files for your customizations.
Build
The command gulp build is used to generate the dist folder. Any changes made to the src should be followed by a build command. Suppose you change or create HTML, Sass or JS files, you have to run the command to ensure that the changes are reflected in the dist folder.
Sass
Step 1: Create a folder named custom in the assets/scss directory.
Step 2: Create new Sass files, preferably “_custom-variables.scss” and “_custom.scss” and write your styles in them.
NOTE: Do not name your custom scss files “_style.scss” as it will lead to the creation of a new CSS folder.
Step 3: You can find Sass files for the different layouts in the same scss directory. Now navigate to your preferred layout styles "_style.scss" file and import the _custom-variables.scss and _custom.scss.
Step 4: Import the variables in the section named /* === Import template variables === */ and the styles at the end of the file.
Step 5: Now run the script gulp sass and your custom styles will be generated.
Inject
Step 1: You can find the common components in their respective partials folder (e.g., navbar, sidebar).
Step 2: Make changes to these HTML files and inject them into all pages using gulp inject.
Step 3: Rebuild the dist folder with gulp build.
BundleVendors
When you need to add new 3rd party packages to the template or update an existing one, you can do so using the script gulp bundleVendors. This code cleans the existing vendors folder and replaces it with newly updated files.
For example: Suppose you want to add a new 3rd party package to your template, you can install them to the project using the command npm
install. Your installed package can now be found in the node_modules. Now you can import the package as a whole or just the necessary files required for the template to your vendor files located in the assets folder of your project src directory.
Step 1: Go to the gulp “vendors.js” file located in the “gulp-tasks” folder in the src.
Step 2: Add the path to the package files needed from the node_modules as a new gulp task like the one given below.
1.buildOptionalVendorScripts.(for js files)
2.buildOptionalVendorStyles.(for css files)
Step 3: Add the newly created variable to the return statement given in the respective tasks.
Step 4: Now run the gulp command gulp bundleVendors to add these to the vendors folder in your asset.
Conclusion
With these customization steps, you have the flexibility to tailor Bootstrapdash to meet your specific project requirements. Remember to follow best practices and avoid modifying core template files to ensure smooth updates in the future.
Components
Basic UI Elements
Gradient color
Button with single color
Outlined
Sizes
Bootstrap Accordion
Bootstrap Dropdown
Dropdown Outlined
Bootstrap Tabs
Bootstrap Modal
Bootstrap Pagination
Bootstrap Badges
Basic UI Elements - 2
Bootstrap Breadcrumb
Bootstrap Progressbar
Bootstrap Tooltip
Add the following script files in <body>.
To create a clipboard, add the following code:
Advanced UI Elements
Clipboard, a modern approach to copy text to clipboard.
Usage
Add the following script files in <body>.
To create a clipboard, add the following code:
Todolist is a minimal jQuery plugin to create checklist.
Usage
Add the following script files in <body>.
To create a filterable list, add the following code:
Dragula ,Drag and drop so simple it hurts.
Usage
To use Dragula in your application, include the following files in <head>.
Add the following script files in <body>.
To create a drag n drop list, add the following code:
The contextMenu Plugin was designed for web applications in need of menus on a possibly large amount of objects. Click Here to see the official documentation.
noUiSlider is a range slider without bloat.
Usage
To use NoUISlider in your application, include the following files in <head>.
Add the following script files in <body>.
To create a slider, add the following code:
Easy, flexible and responsive range slider with skin support. Click Here to see the official documentation.
Colcade is a simple lightweight masonry layout.
Usage
Add the following script files in <body>.
To create a responsive, add the following code:
Media
Light Galary is a customizable, modular, responsive, Lightbox gallery plugin for jQuery.
Usage
To use LightGallery in your application, include the following files in <head>.
Add the following script files in <body>.
To create Lightbox Gallery, add the following code:
Owl Carousel is a touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.
Usage
To use Owl Carousel in your application, include the following files in <head>.
Add the following script files in <body>.
To create a carousel, add the following code:
Tables
To create a basic Twitter Bootstrap table, add the following code.
Bootstrap-table is an extended Bootstrap table with radio, checkbox, sort, pagination, and other added features.
Usage
To use Bootstrap-table in your application, include the following files in <head>.
Add the following script files in <body>.
Activate Bootstrap table without writing JavaScript, set data-toggle="table" on a normal table.
Js-grid creates simple responsive chartsis a lightweight client-side data grid control based on jQuery.
Usage
To use Js-grid in your application, include the following files in <head>.
Add the following script files in <body>.
To create a basic table using Js-grid, add the following code:
Tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes.
Usage
To use Table in your application, include the following files in <head>.
Add the following script files in <body>.
To create a Table, add the following code:
Charts
Chart.js is a simple yet flexible JavaScript charting for designers & developers.
Usage
To use Chart.js in your application, include the following files in <head>.
and the following script files in <body>.
To create a simple chart, add the following code:
Float.js is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.
Usage
Add following script files in <body>.
To create a simple chart, add the following code:
Google chart tools are powerful, simple to use, and free. Try out our rich gallery of interactive charts and data tools.
Usage
Add the following script files in <body>.
Basic chart structure:
C3.js is a D3-based reusable chart library.
Usage
To use C3 charts in your application, include the following files in <head>.
and the following script files in <body>.
To create a simple chart, add the following code:
Chartist creates simple responsive charts.
Usage
To use Chartist in your application, include the following files in <head>.
Add the following script files in <body>.
To create a simple line chart using Chartist, add the following code:
Morris creates pretty time-series line graphs.
Usage
To use Morris in your application, include the following files in <head>.
Add the following script files in <body>.
To create a simple line chart using Morris, add the following code:
Jquery Sparkline generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via Javascript.
Usage
To use Sparkline in your application, add the following script files in <body>.
To create a line chart using Sparkline, add the following code:
Just Gage is a handy JavaScript plugin for generating and animating nice & clean gauges.
Usage
Add the following script files in <body>.
To create a gage, add the following code:
Maps
JvectorMap uses only native browser technologies like JavaScript, CSS, HTML, SVG or VML.
Usage
To use Vector map in your application, include the following files in <head>.
Add the following script files in <body>.
To create a simple map, add the following code:
Mapeal Map Ease the build of pretty data visualizations on dynamic vector maps.
Add the following script files in <body>.
To create a simple map, add the following code:
Forms
The basic form elements can be added to your application as below:
We are using Jquery validation for simple clientside form validation.
Usage
To use jquery validation in your application, include the following script files in <body>.
The following code shows validation of a simple form:
We are using Jquery steps in our template to create form addons. It is an all-in-one wizard plugin that is extremely flexible, compact and feature-rich.
Usage
To use jquery.steps in your application, include the following files <body>.
The following code generates a simple form wizard.
Jquery Repeater is an interface to add and remove a repeatable group of input elements.
Usage
Add the following script files in <body>.
To create a Repeater, add the following code:
Additional form elements
jQuery-Tags-Input magically convert a simple text input into a cool tag list with this jQuery plugin.
Usage
To use jQuery-Tags-Input in your application, include the following files in <head>.
Add the following script files in <body>.
To convert an input to tag using jQuery-Tags-Input, add the following code:
jQuery Bar Rating Plugin works by transforming a standard select field into a rating widget.
Usage
To use Purple rating in your application, include the following files in <head>.
Add the following script files in <body>.
To create a simple rating, add the following code:
Bootstrap MaxLength uses a Twitter Bootstrap label to show a visual feedback to the user about the maximum length of the field where the user is inserting text. Uses the HTML5 attribute "maxlength" to work.
Usage
Add the following script files in <body>.
To create a Maxlength input, add the following code:
Input-mask helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers etc.
Usage
To use Inputmask in your application, include the following files in <body>.
The below code shows an example of input mask for date.
Typeahead.js is a flexible JavaScript library that provides a strong foundation for building robust typeaheads.
Usage
To use Typeahead.js in your application, include the following files in <body>.
A sample typeahead can be generated as below:
Icons
Material Design Icons growing icon collection allows designers and developers targeting various platforms to download icons in the format, color and size they need for any project.
Usage
To use Material Design Icons in your application, include the following files in <head>.
To generate an icon, add the following code:
Font Awesome gives you scalable vector icons that can instantly be customized.
Usage
To use Font Awesome in your application, include the following files in <head>.
To create an address-book icon, add the following code:
Themify Icons Themify Icons is a complete set of icons for use in web design and apps.
Usage
To use themify icons in your application, include the following files in <head>.
To generate an icon, add the following code:
Simple Line Icons is a set of simple and minimal line icons.
Usage
To use Simple Line Icons in your application, include the following files in <head>.
To generate an icon, add the following code:
Flag Icons is a collection of all country flags in SVG — plus the CSS for easier integration.
Usage
To use Simple Line Icons in your application, include the following files in <head>.
To generate an icon, add the following code:
File Upload
Dropify is a simple drag n drop file upload.
Usage
To use Dropify in your application, include the following files in <head>.
Add the following script files in <body>.
To create a Dropify file upload, add the following code:
Dropzone is an open source library that provides drag’n’drop file uploads with image previews.
Usage
Add the following script files in <body>.
To create a Dropzone file upload,add the following code:
jQuery File UPload plugin provides multiple file uploads with progress bar. jQuery File Upload Plugin depends on Ajax Form Plugin, So Github contains source code with and without form plugin.
Usage
To use file upload in your application, include the following files in <head>.
Add the following script files in <body>.
To create a Jquery file upload,add the following code:
Form Picker
We are using Tempus Dominus plugin in our template to create beautiful time picker.
Usage
To use clock picker in your application, include the following files in <head>.
Add the following script files in <body>.
To create a clock picker, add the following code:
Bootstrap Date Picker provides a flexible datepicker widget in the Bootstrap style.
Usage
To use bootstrap date picker in your application, include the following files in <head>.
Add the following script files in <body>.
To create a datepicker, add the following code:
AsColor Picker is a jQuery plugin that convent input into color picker.
Usage
To use color picker in your application, include the following files in <head>.
Add the following script files in <body>.
To create a color picker, add the following code:
Editors
Tinymce is a full-featured web editing tool.
Usage
To use Tinymce in your application, include the following files in <body>.
To create an editor using tinymce, add the following code:
X-editable allows you to create editable elements on your page. It can be used with any engine (Bootstrap, jQuery-UI, jQuery only) and includes both popup and inline modes.
Usage
To use x-editable in your application, include the following files in <head>.
Add the following script files in <body>.
To create a simple editable text field, add the following code:
Summernote is a super simple WYSIWYG Editor.
Usage
To use summernote in your application, include the following files in <head>.
Add the following script files in <body>.
To create a summernote editor, add the following code:
SimpleMDE is a simple, beautiful, and embeddable JavaScript Markdown editor.
Usage
To use simpleMDE in your application, include the following files in <head>.
Add the following script files in <body>.
To create an editor using simpleMDE, add the following code:
Quill is a free, open source WYSIWYG editor built for the modern web.
Usage
To use Quill in your application, include the following files in <head>.
Add the following script files in <body>.
To create an editor using Quill, add the following code:
Ace is an embeddable code editor written in JavaScript. It matches the features and performance of native editors such as Sublime, Vim and TextMate.
Usage
To use ace editor in your application, include the following files in <body>.
To create a code editor using ace with a sample code, add the following code:
CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functionality.
Usage
To use CodeMirror in your application, include the following files in <head>.
Add the following script files in <body>.
Here is an example of an editor using CodeMirror.
Credits
We have used the following plugins in Purple admin
-
Ace editor
https://ace.c9.io/ -
Bootstrap
https://getbootstrap.com/ -
Bootstrap Datepicker
https://gitter.im/uxsolutions/bootstrap-datepicker -
Bootstrap Maxlength
http://mimo84.github.com/bootstrap-maxlength -
C3
https://travis-ci.org/c3js/c3 -
Chart.js
https://www.chartjs.org/ -
Chartist
https://gionkunz.github.io/chartist-js/ -
Clipboard
https://clipboardjs.com -
Codemirror
https://codemirror.net/ -
Colcade
https://github.com/desandro/colcade/ -
D3
https://d3js.org -
Datatables.net
https://datatables.net/ -
Dragula
https://bevacqua.github.io/dragula/ -
Dropify
http://jeremyfagis.github.io/dropify/ -
Dropzone
http://www.dropzonejs.com/ -
Flag icons
http://lipis.github.io/flag-icon-css/ -
Flot
https://www.flotcharts.org/ -
Font awesome
https://fontawesome.com/ -
Full calendar
https://fullcalendar.io/ -
Gulp
https://gulpjs.com/ -
Icheck
http://icheck.fronteed.com/ -
Inputmask
http://robinherbots.github.io/Inputmask/ -
Ion range slider
http://ionden.com/a/plugins/ion.rangeSlider/en.html -
JQuery
https://jquery.com/ -
JQuery asColorPicker
https://github.com/thecreation/jquery-asColorPicker -
JQuery bar rating
http://antenna.io/demo/jquery-bar-rating/examples/ -
JQuery context menu
http://swisnl.github.io/jQuery-contextMenu/ -
JQuery file upload
http://hayageek.com/docs/jquery-upload-file.php -
JQuery Mapael
https://github.com/neveldo/mapael-maps -
JQuery sparklin
http://omnipotent.net/jquery.sparkline/ -
JQuery-steps
http://www.jquery-steps.com/ -
JQuery Tags Input
http://xoxco.com/projects/code/tagsinput/
-
JQuery Toast
https://kamranahmed.info/toast -
JQuery Validation
https://jqueryvalidation.org/ -
JQuery Avgrund
https://github.com/voronianski/jquery.avgrund.js -
JQuery Repeater
http://briandetering.net/repeater -
JSgrid
http://js-grid.com/ -
JSgrid
http://js-grid.com/ -
Justgage
http://justgage.com/ -
JVector Map
http://jvectormap.com/ -
Light gallery
http://sachinchoolur.github.io/lightGallery/ -
Material Design Icons
https://materialdesignicons.com/ -
Moment.js
https://momentjs.com/ -
Morris.js
https://momentjs.com/ -
NoUISlider
https://refreshless.com/nouislider/ -
Owl carousel
https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html -
Perfect scrollbar
http://utatti.github.io/perfect-scrollbar/ -
Popper.js
https://popper.js.org/ -
Progressbar.js
https://progressbarjs.readthedocs.io -
PWS Tabs
https://alexchizhov.com/pwstabs/ -
Quill Editor
https://quilljs.com/ -
Rapheal
http://dmitrybaranovskiy.github.io/raphael/ -
Select 2
https://select2.org/ -
Simple line icons
http://simplelineicons.com/ -
SimpleMDE
https://simplemde.com/ -
Summernote
https://summernote.org/ -
Sweetalert
http://sweetalert.js.org -
Tempusdominus-bootstrap-4
https://tempusdominus.github.io/bootstrap-4/ -
Themify icons
https://themify.me/themify-icons -
TinyMCE
https://www.tiny.cloud/ -
TWBS pagination
https://esimakin.github.io/twbs-pagination/ -
Typeahead
https://twitter.github.io/typeahead.js/ -
Xeditable
https://vitalets.github.io/x-editable/