Introduction
Thank you for purchasing Pearl Admin,a template for admin dashboards and control panels. It is a responsive HTML template that is based on the CSS framework Bootstrap 4. If you are unfamiliar with Bootstrap,visit their website and read through the documentation. All of Bootstrap components have been modified to fit the style of Pearl Admin and provide a consistent look throughout the template.
Before you start working with the template,we suggest you to 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 do not hesitate to tell us about it. If you have any questions or problems with this theme please use Envato Marketplace contact form on our profile or email us atsupport@dmaku.com.
About Pearl Admin
Pearl Admin is a fully responsive and customizable template suitable for admin dashboards. Pearl Admin contain almost all components required for this purpose.
Pearl Admin is based on bootstrap 4,the world's most popular responsive css framework.
Pearl Admin is built with Sass. Sass compiler makes it easier to code and customize. Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
Getting started
You can directly use the compiled and ready to use version of the template. But in case you plan to customize the template extensively the template allows you to do so! The Customization section will get you initiated on this.
The downloaded package will have the following structure.
Pearl Admin/├── css/├── fonts/├── images/├── js/├── pages/├── partials/├── scss/├── vendors/├── package.json├── gulpfile.js├── index.htmlThe vendor files are added as npm packages for reducing the file sizes and easier version update of the vendors.
In order to access the properties of vendors, you have to just run two commands and all the vendor files are inside your node_modules folder!.
Though 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.
To do this, you must have node and npm installed in your computer.
Installation guide of node can be found here. As npm comes bundled with node, separate installation of npm is not needed.
If you have installed them, just checkout to the root folder and run the following command.
npm installYou can see that a folder node_modules is generated in your root folder with all vendor files!
Customization
In case you plan to customize the template extensively, you can make changes to scss files. We use the gulp task manager for the build processes. Gulp will watch for changes to scss files and automatically compile the files to CSS. For this you need to install Gulp. Use of this tool is completely optional and only required if you want to modify the scss files.
Dependencies
To get started you will need to install the following item
- Gulp - for task management.
Gulp
Getting started with gulp is pretty simple. The Gulp site is a great place to get information on installing Gulp if you need more information.
You need to first install gulp-cli in your machine using the below command
npm install -g gulp-cliThis installs gulp-cli globally to your machine.
Local installation of gulp in project will be done automatically when you complete the steps in getting started section. The other thing that gulp requires, which, is really what does all the work, is the gulpfile.js. In this file you set up all of your tasks that you will run.
Don't worry. We have this file already created for you!
Compilation
Before you start modifying scss files,make sure that you go to the root folder of the template and run the following command
gulp serveThis will start the file watch by gulp and whenever a file is modified,scss files will be compiled to create the css file
Options
We have provided a bunch of layout options for you with a single class change!You can use the following classes for each layouts.
| Layout | Class |
|---|---|
| Compact menu | sidebar-mini |
| Icon menu | sidebar-icon-only |
| Hidden menu(togglable) | sidebar-hidden |
| Absolute menu | sidebar-absolute,sidebar-hidden |
| Horizontal menu | horizontal-menu(However,mega-menu requires different html. Refer pages/layout/horizontal-menu.html) |
| Boxed layout | boxed-layout |
| Rtl layout | rtl |
Basic structure
The below snippet shows the basic html structure of Pearl admin. Please note that all the stylesheets and script files in the below snippet should be included to render Pearl admin styles.
SIDEBAR SKINS
HEADER SKINS
Creating component page
build a js based app
Meeting with Alisa
Call Sarah Graves
Friends
See All-
19 minThomas Douglas
Available
-
Catherine
Away
423 min -
14 minDaniel Russell
Available
-
2 minJames Richardson
Away
-
5 minMadeline Kennedy
Available
-
47 minSarah Graves
Available
Charts
Chartjsis a simple yet flexible JavaScript charting for designers & developers.
Usage
To use chartjs in your appication,include the following files in <head>
and the following script files in <body>
To create a simple chart,add the following code
Maps
jVectorMapuses only native browser technologies like JavaScript,CSS,HTML,SVG or VML.
Usage
To use Vector map in your appication,include the following files in <head>
Add the following script files in <body>
To create a simple map,add the following code
Tabs
PSW TabsJqury plugin.
Usage
To use PSW Tabs in your appication,include the following files in <head>
Add the following script files in <body>
To create Tab,add the following code
Advanced Form Elements
noUiSlideris a range slider without bloat
Usage
To use NoUISlider in your appication,include the following files in <head>
Add the following script files in <body>
To create a slider,add the following code
Forms
The basic form elements can be added to your application as below
Advanced form elements
Jquery Knobis a Nice,downward compatible,touchable,jQuery dial.
Usage
Add the following script files in <body>
To create a knob,add the following code
Additional form elements
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
$('#defaultconfig').maxlength();Grid
Colcade is a simple Lightweight masonry layout
Usage
Add the following script files in <body>
To create a responsive, add the following code
Icons
Font awesome gives you scalable vector icons that can instantly be customized.
Usage
To use font awesome in your appication, include the following files in <head>
To create an address-book icon, add the following code
Tables
To create a basic twitter bootstrap table, add the following code
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Basic UI Elements
Button with default color
Outlined
Sizes
Advanced UI Elements
Clipboard,a modern approach to copy text to clipboard
Usage
Add the following script files in <body>
To create a,add the following code
Media
Light Galaryis a customizable,modular,responsive,lightbox gallery plugin for jQuery.
Usage
To use LightGallery in your appication,include the following files in <head>
Add the following script files in <body>
To create Lightbox Gallery,add the following code
File Upload
Dropifyis a simple drag n drop file upload.
Usage
To use dropify in your appication,include the following files in <head>
Add the following script files in <body>
To create a Dropify file upload,add the following code
$('.dropify').dropify();Form Picker
We are using Tempus Dominus pluginin our template to create beautiful time picker.
Usage
To use clock picker in your appication,include the following files in <head>
Add the following script files in <body>
To create a clock picker,add the following code
Form editors
Tinymceis a full featured web editing tool.
Usage
To use tinymce in your appication,include the following files in <body>
To create an editor using tinymce,add the following code