Result Verifier Service

Welcome

To start integrating Xpresspay, you need an xpresspay account. See how to setup here:
Live: Verifier

Therefore we’ve tried to make it as easy as possible to let you apply your own overrides (in case you would like to) to both Sass (_scss/) or JavaScript (_es6/) files without altering the original files. Please check Sass and JavaScript section for more info!

In general, the following core folders/files will have to be updated with each update:

API Introduction

The Verifier API gives you access which pretty much allows you to integrate with it in your application. It strives to be RESTful and is organized around the main resources you would be interacting with - with a few notable exceptions.

Before you do anything, you should create a free Verifier account that you can test the API against. We will provide you with test keys that you can use to make API calls.

Sample Requests

We provide sample API calls next to each method using cURL. All you need to do is drop in your specific parameters, and you can test the calls from the command line. See this tutorial on using cURL with APIs. Of course you can use POSTMAN as well if cURL isn't your cup of tea. POSTMAN is an easy to use API development environment for making HTTP requests. You can also download the Xpresspay Postman Collection to make testing the API easier.

Input/Output Format

Both request body data and response data are formatted as JSON. Content type for responses will always be application/json.

01 - Dashmix Source (HTML)
Includes the abstract HTML version. This version can be used with any server side language/framework you prefer or currently working with.
02 - Dashmix Source (PHP)
Includes the abstract PHP version. This version can come really handy as a starting point if you would like to build a custom PHP application. It can help you in many ways:
- It enables you to change various options of the layout just by updating the main variables found in src/inc/_global/config.php. Each template section (eg backend or dashboards sections) has also its own folder with its own config file which can be used to overwrite the main variables of your choice for the pages in that section. For example, the extra config file for all backend pages (be_*.php) can be found in src/inc/backend/config.php.
- It uses basic templating for separating common used code (header, sidebar, footer etc). The main views which are used in every page can be found in src/inc/_global/views/*. Each template section (eg backend or dashboards sections) also has its own folder with its own views which can be used for common code, used only in the pages in that section. For example, the extra views for all backend pages (be_*.php) can be found in src/inc/backend/views/*.
- It features a recursive function that can build main navigation on the fly (with as many levels as you like) from a multidimensional array you can set in the config file of each section.
- It features various functions that can populate your pages with dummy content for testing and showcasing purposes src/inc/_classes/Template.php
- In general, this version can also give you a good idea of how you could implement your own templating in the language/framework of your choice.
03 - Dashmix Source (Laravel Starter Kit)
If you are using Laravel to build your next project, then this starter kit is the perfect fit. It features a clean Laravel installation with all Dashmix assets ready to work with Laravel Mix and a few example pages to get you started. You can either take the parts you want and integrate them into your current project or you can run the following commands to install all dependencies and start building with Laravel like you would normally do.
- composer install
- npm install
- php artisan key:generate
Afterwards, you can use the following Laravel commands you already now and love:
- php artisan serve
  Serves your project
- npm run watch
  Watches your files and compiles your assets on the fly (also auto reloads your browser)
- npm run dev
  Compiles your assets
- npm run prod
  Compiles and prepares your assets for production
Please have in mind that you have to already be familiar with Laravel to use this version. If you are interest to learn Laravel, you can have a look at the official documentation.
Documentation
Of course, it includes current documentation!

You don’t have to use Node.js or Gulp with the template if you don't like. You can ignore .babelrc, gulpfile.babel.js, package.json and package-lock.json and work directly with the files found in the src/ folder of each version. In that case, you won't be able to take advantage of our premade tasks and if for example you would like to work with and compile the Sass/ES6 files, you will just have to use your own compiling method or tasks. Alternatively, you can just use the minimized production ready files (which are used by default in all pages) and work as usual.

Bootstrap

Bootstrap is the world's most popular front-end component library. It is easy to use and offers a large variety of CSS as well as JavaScript components. Dashmix uses this framework at its core and builds on top its unique layout and features. It redesigns/extends the original components and introduces new ones, featuring a modern and clean design.

If you are unfamiliar with the framework, its official website will help you out a lot but if you just want to start quickly, you can easily replicate any feature or component we already present in Dashmix pages. If you find a feature in the official Bootstrap Docs you would like to use, feel free to, since they are almost all available in Dashmix.

Please have in mind that by default we don’t include the navbar, card, jumbotron and carousel components since we use our own but you can easily include them if you need them by uncommenting them in _scss/main.scss and re-compiling to CSS.

Gulp Tasks

Gulp is a JavaScript Task Runner. It enables you to automate repetitive tasks like minification, compilation, unit testing, linting, etc, which makes your life easier.

In Dashmix, we've created many Gulp tasks which take care of everything for you! They set up a web server which auto refreshes on file changes, compile on the fly your Sass and ES6 files into CSS and ES5 respectively and build your production ready project.

To use it with the template (HTML or PHP version), you will first have to:

Download and install Node.js
Prefer the LTS version just to make sure there won't be any incompatibilities
Install gulp-cli globally by running the command npm install -g gulp-cli in your system’s console.
(Optional step for running the PHP web server for the PHP version) Make sure that you've installed PHP on your system and that PHP is included in your system's PATH. You can try running php --version in your console to see if it is already installed.
Install all required dependencies in your project’s folder by running the command npm install in your system’s console - You will have to run it from your project’s root folder which will have to include src/ folder, .babelrc, gulpfile.babel.js, package.json and package-lock.json files.

After you’ve successfully completed the previous steps, you will be able to run the following commands in your system’s console from your project’s root folder and start working:

Command Description

Main Tasks

gulp run-html

Sets up a custom static HTML Web server at http://localhost:3000 which auto refreshes when you update any vital file in the project. It also starts watching for changes in the Sass and ES6 files and auto recompiles them to CSS and ES5 respectively if there is a change.

gulp run-php

Sets up a custom PHP Web server at http://localhost:3000 which auto refreshes when you update any vital file in the project. It also starts watching for changes in the Sass and ES6 files and auto recompiles them to CSS and ES5 respectively if there is a change.

gulp build

It will prepare and build your custom, minimized and production ready Dashmix project. After it completes, you will be able to find it under a new dist/ folder in your project’s root folder.

Additional Tasks (on demand)

gulp css

Compiles from Sass to CSS (Autoprefixer auto adds required browser CSS prefixes).

Entry	Output
`assets/_scss/main.scss`	`assets/css/dashmix.css` `assets/css/dashmix.min.css`
`assets/_scss/dashmix/themes/*`	`assets/css/themes/.css` `assets/css/themes/.min.css`

gulp js

Webpack bundles JS modules together and Babel compiles from ES6 to ES5:

Entry	Output
`assets/_es6/main/app.js`	`assets/js/dashmix.app.min.js`
`assets/_es6/pages/*`	`assets/js/pages/*.min.js`

gulp js-dev

Webpack bundles JS modules together and Babel compiles from ES6 to ES5:

Entry	Output
`assets/_es6/main/app.js`	`assets/js/dashmix.app.min.js`
`assets/_es6/pages/*`	`assets/js/pages/*.min.js`

Webpack runs with development mode and produces development friendly files as well:

Entry	Output
`assets/_es6/main/app.js`	`assets/js/dashmix.app.js`
`assets/_es6/pages/*`	`assets/js/pages/*.js`

gulp watch

It starts watching for changes in Sass and ES6 files and auto recompiles them to CSS and ES5 respectively if there is a change. Useful if you would like to run it separately since it automatically runs when you use the run-html and run-php tasks.

HTML

Dashmix features a super flexible, smart and powerful layout which can be used to create dashboard and website pages with minimum effort using the same resources.

The layout offers many options which can be enabled just by adding or removing a class in the #page-container element. If you play around with the PHP version, you will be able to set these options from the src/inc/_global/config.php file.

Let’s have a quick look at the generic HTML structure and get familiar with the layout:

<!doctype html>
<html lang="en">
    <head>
        <!-- Title and Meta -->
        ...
        <!-- END Title and Meta -->

        <!-- Icons -->
        <!-- The following icons can be replaced with your own, they are used by desktop and mobile browsers -->
        ...
        <!-- END Icons -->

        <!-- Stylesheets -->
        <!-- Page JS Plugins CSS go here -->

        <!-- Fonts and Dashmix framework -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,400i,600,700">
        <link rel="stylesheet" id="css-main" href="assets/css/dashmix.min.css">

        <!-- You can include a specific file from css/themes/ folder to alter the default color theme of the template. eg: -->
        <!-- <link rel="stylesheet" id="css-theme" href="assets/css/themes/xwork.min.css"> -->
        <!-- END Stylesheets -->
    </head>
    <body>
        <!-- Page loader -->
        <!-- If #page-loader markup and also the "show" class is added, the loading screen will be enabled and auto hide once the page loads -->
        <!-- <div id="page-loader" class="show"></div> -->

        <!-- Page Container -->
        <!--
            Available classes for #page-container:

            GENERIC

                'enable-cookies'                            Remembers active color theme between pages (when set through color theme helper Template._uiHandleTheme())

            SIDEBAR & SIDE OVERLAY

                'sidebar-r'                                 Right Sidebar and left Side Overlay (default is left Sidebar and right Side Overlay)
                'sidebar-mini'                              Mini hoverable Sidebar (screen width > 991px)
                'sidebar-o'                                 Visible Sidebar by default (screen width > 991px)
                'sidebar-o-xs'                              Visible Sidebar by default (screen width < 992px)
                'sidebar-dark'                              Dark themed sidebar

                'side-overlay-hover'                        Hoverable Side Overlay (screen width > 991px)
                'side-overlay-o'                            Visible Side Overlay by default

                'enable-page-overlay'                       Enables a visible clickable Page Overlay (closes Side Overlay on click) when Side Overlay opens

                'side-scroll'                               Enables custom scrolling on Sidebar and Side Overlay instead of native scrolling (screen width > 991px)

            HEADER

                ''                                          Static Header if no class is added
                'page-header-fixed'                         Fixed Header

            Footer

                ''                                          Static Footer if no class is added
                'page-footer-fixed'                         Fixed Footer (please have in mind that the footer has a specific height when is fixed)

            HEADER STYLE

                ''                                          Classic Header style if no class is added
                'page-header-dark'                          Dark themed Header
                'page-header-glass'                         Light themed Header with transparency by default
                                                            (absolute position, perfect for light images underneath - solid light background on scroll if the Header is also set as fixed)
                'page-header-glass page-header-dark'         Dark themed Header with transparency by default
                                                            (absolute position, perfect for dark images underneath - solid dark background on scroll if the Header is also set as fixed)

            MAIN CONTENT LAYOUT

                ''                                          Full width Main Content if no class is added
                'main-content-boxed'                        Full width Main Content with a specific maximum width (screen width > 1200px)
                'main-content-narrow'                       Full width Main Content with a percentage width (screen width > 1200px)
            -->
        <div id="page-container">
            <!-- Side Overlay-->
            <aside id="side-overlay">
                ...
            </aside>
            <!-- END Side Overlay -->

            <!-- Sidebar -->
            <nav id="sidebar">
                ...
            </nav>
            <!-- END Sidebar -->

            <!-- Header -->
            <header id="page-header">
                ...
            </header>
            <!-- END Header -->

            <!-- Main Container -->
            <main id="main-container">
                ...
            </main>
            <!-- END Main Container -->

            <!-- Footer -->
            <footer id="page-footer">
                ...
            </footer>
            <!-- END Footer -->
        </div>
        <!-- END Page Container -->

        <!-- Dashmix JS Core -->
        <script src="assets/js/dashmix.core.min.js"></script>

        <!-- Dashmix JS Custom -->
        <script src="assets/js/dashmix.app.min.js"></script>

        <!-- Page JS Plugins + Page JS Code -->
    </body>
</html>

As you can see, we kept the HTML structure as simple as possible, so we hope that you find it easy to understand and implement in your own pages. Furthermore, have in mind that you can remove #side-overlay, #sidebar, #page-header or #page-footer markup if you would like to not have them in some of your pages. Everything will work as expected, just make sure that you don’t use any related classes (to the element you removed) in #page-container.

Sass

Dashmix was built with Sass using the latest SCSS syntax. It is a powerful CSS pre-processor which extends the CSS language, adding features that allow variables, mixins, functions and many other techniques, enabling you to make CSS that is more maintainable and extendable.

If you would like to extend the framework and add your own styles or UI components, feel free to use the Sass files included in the source (HTML and PHP version) under src/assets/_scss/* folder. You can also use the included Gulp tasks to auto compile to CSS every time you make a change (any required browser prefixes will be auto added after compilation, so you don’t have to).

It is highly recommended though, to use the custom files we created for you to add your own styles and make the updating process easier. They can be found in assets/_scss/custom/. In assets/_scss/custom/_variables.scss you will be able to override any variables you want and in assets/_scss/custom/_main.scss you will be able to add your own styles or override current ones.

Let’s have a better look at the Sass files structure:

Files	Description
`bootstrap/*`	Includes all original unaltered Bootstrap 4 Sass files. The concept is to never touch those files, so that a framework update is possible.
`dashmix/*`	Includes all Dashmix Sass files which follow the structure Bootstrap 4 uses. All Bootstrap 4 overrides can also be found in here (variables/mixins/functions/styles). We basically override what we can (using the available Bootstrap 4 variables) or want (functions/mixins) to match our needs. Then we override the styles we can’t alter with variables and add our own components. This method allows us to easily update Bootstrap, resuse its features in our styles and also export a smaller main CSS file with fewer style overrides.
`vendor/*`	Includes all third party styles (eg animation.css, fontawesome icons, simple line icons). In here, you will also find all style overrides for the integrated jQuery plugins.
`custom/*`	This is your own folder in which you can add your own styles or overrides. Making your own changes in here will enable you to just update all other folders (when an update becomes available) without worrying of erasing your changes.
`main.scss`	This file is compiled to the main CSS stylesheet `dashmix.css`. From here you could easily update the compiled CSS file by commenting out the components you won’t use in your project. This way, you can achieve the smallest possible footprint for your main CSS file by only including what you need.

JavaScript

Dashmix custom JS functionality was built from scratch with ES6 (ECMAScript 2015). This enabled us to take advantage of many new features which weren't available in ES5 (the version most web browsers support and run) and write clean and more maintainable code.

We use webpack to bundle together separate JS files and Babel to compile ES6 to ES5. You can take advantage of webpack and use it to also import plugins and libraries from the node_modules folder directly in the custom code since all third party plugins used in Dashmix will be installed with npm, too, after running npm install.

ES6 JS code can be found under assets/_es6/ folder. These files have to be compiled to ES5 first before we include them in our pages and this is completely automated through the tasks we've created.

Files	Description
`main/*`	Custom Dashmix JS functionality that is vital and used in all pages. If you would like to add own functionality or overrides, you can do so in `assets/_es6/main/app.js` (the inline comments will guide you through).
`pages/*`	Files with custom code showcasing various plugin examples. They are used separately only in specific pages.

Please make sure that you don’t use snippets from ES6 code directly in your pages since older browsers won't be able to run them.

Now, let’s have a better look at the JavaScript folder (assets/js/*) which includes the compiled ES6 files as well as other JS resources:

Files	Description
`core/*` and `dashmix.core.min.js`	All vital libraries and plugins can be found here. These must be included in all pages because they are used for various features by the custom Dashmix JS functionality. The minimized file is included by default in all pages but you can include the files from the core folder separately if you want to. Moreover, you can also completely bypass those files and not include them in your pages separately but bundle them together with webpack. To achieve this, please have a look at `assets/_es6/main/bootstrap.js` where you can import them directly from the `node_modules` folder. They will then be included in the `dashmix.app.min.js` after compilation.
`dashmix.app.min.js`	The main file containing all custom JS code needed for Dashmix features including layout and blocks API. It also includes various helper functions which you can call per page for enabling extra features (eg Table Helpers) or repetitive init code of various third party plugins. This file is compiled from `assets/_es6/main/app.js`.
`plugins/*`	All supported and integrated third-party plugins are included here. Some of them require from you to add their stylesheet as well, in the page you would like to use them (always before `dashmix.css` because for some plugins we include a few style overrides). All those plugins will also be downloaded in `node_modules` folder after you run `npm install`. That means that you could also import and bundle them in the custom code if this is something you want.
`pages/*`	Custom JS code used in specific pages demonstrating the usage of various plugins and functionality. These files are compiled from `assets/_es6/pages/*`.

At the following section, we showcase various JS helpers for third party plugins. These are snippets of code which init plugins' functionality in the related markup. We have created many helpers to let you init various plugins easily without repeating the same JS code over and over again in your pages.

Let’s have a better look at the core JavaScript files:

Name	Helper	Version	Online
jQuery		3.3.1
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
Bootstrap.js		4.1.3
Bootstrap plugins offer extra functionality such as modals, tabs, tooltips & popovers. All plugins can be used directly in the template. Some of them init automatically from Bootstrap (eg modals) but others need to be initialized on demand. Helpers: There are 3 available helpers for Bootstrap components: tooltips, popovers and tabs. These helpers are already called by default on page load. You only must call them again if you inject new markup to the page and would like to init the related functionality on it. `// Tooltip Dashmix.helpers('core-bootstrap-tooltip'); // Popover Dashmix.helpers('core-bootstrap-popover'); // Tabs Dashmix.helpers('core-bootstrap-tabs');` Usage (add data-* attributes to an element or use .js-* classes): `<!-- Tooltip with data-toggle --> <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip Text"> Show Tooltip </button> <!-- Tooltip with class --> <button type="button" class="js-tooltip btn btn-primary" data-placement="top" title="Tooltip Text"> Show Tooltip </button>` `<!-- Popover with data-toggle --> <button type="button" class="btn btn-primary" data-toggle="popover" data-placement="top" title="Popover title." data-content="Popover content."> Show Popover </button> <!-- Popover with class --> <button type="button" class="js-popover btn btn-primary" data-placement="top" title="Popover title." data-content="Popover content."> Show Popover </button>` <!-- Tabs with data-toggle --> <div class="block block-rounded block-bordered"> <ul class="nav nav-tabs nav-tabs-block" data-toggle="tabs" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#profile">Profile</a> </li> </ul> <div class="block-content tab-content"> <div class="tab-pane active" id="home" role="tabpanel"> <p>Home Content</p> </div> <div class="tab-pane" id="profile" role="tabpanel"> <p>Profile Content</p> </div> </div> </div> <!-- Tabs with class --> <div class="block block-rounded block-bordered"> <ul class="js-tabs nav nav-tabs nav-tabs-block" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#profile">Profile</a> </li> </ul> <div class="block-content tab-content"> <div class="tab-pane active" id="home" role="tabpanel"> <p>Home Content</p> </div> <div class="tab-pane" id="profile" role="tabpanel"> <p>Profile Content</p> </div> </div> </div>
SimpleBar		2.6.1
Custom scrollbars vanilla javascript library with native scroll, done simple, lightweight, easy to use and cross-browser.
Scroll Lock		3.1.3
Scroll Lock locks mouse wheel scroll inside container, preventing it from propagating to parent element.
jQuery Appear		1.0.0
jQuery plugin to call a function when an element appears. We use it to make an element visible on scrolling. Helper: This helper is already called by default on page load. You only must call it again if you inject new markup to the page and would like to init the functionality on it. `Dashmix.helpers('core-appear');` Usage (add data-* attributes to an element and the `invisible` class): `<div class="invisible" data-toggle="appear"> Content.. </div>` You can also use more options: `<div class="invisible" data-toggle="appear" data-class="animated fadeInUp" data-timeout="250" data-offset="-100"> Content.. </div>`
JS Cookie		2.2.0
A simple, lightweight JavaScript API for handling cookies. We use it to save the active color theme client-side.

Let’s have a better look at all the other third-party plugins:

Name	CSS	Helper	Version	Online
Bootstrap Colorpicker			3.0.3
A nice and customizable colorpicker plugin for Bootstrap. Required CSS files (include before main CSS): `<link rel="stylesheet" href="assets/js/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css">` Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>` Helper (call it after all JS scripts are added): `<script> jQuery(function(){ Dashmix.helpers('colorpicker'); }); </script>` Usage (add `js-colorpicker` class to an input): `<input type="text" class="js-colorpicker form-control" value="#db4a39">`
Bootstrap Datepicker			1.8.0
A nice and customizable datepicker plugin for Bootstrap. Required CSS files (include before main CSS): `<link rel="stylesheet" href="assets/js/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css">` Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>` Helper (call it after all JS scripts are added): `<script> jQuery(function(){ Dashmix.helpers('datepicker'); }); </script>` Usage (add `js-datapicker` class to an input): `<input type="text" class="js-datepicker form-control">`
Bootstrap Maxlength			1.6.0
This plugin integrates by default with Bootstrap using badges to display the maximum length of the field where the user is inserting text. Uses the HTML5 attribute "maxlength" to work. Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/bootstrap-maxlength/bootstrap-maxlength.min.js"></script>` Helper (call it after all JS scripts are added): `<script> jQuery(function(){ Dashmix.helpers('maxlength'); }); </script>` Usage (add `js-maxlength` class to a text `input`): `<input type="text" class="js-maxlength form-control" maxlength="20">`
Bootstrap Notify			3.1.3
Turns standard Bootstrap alerts into "Growl-like" notifications. Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/bootstrap-notify/bootstrap-notify.min.js"></script>` Helper (call it after all JS scripts are added): `<script> jQuery(function(){ Dashmix.helpers('notify'); }); </script>` Usage: Please check out the Notifications page under Components for usage examples.
Chart.js			2.7.2
Simple, clean and engaging charts for designers and developers. Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/chart.js/Chart.bundle.min.js"></script>` Usage: Please check out Charts page under Components for usage examples.
CKEditor			4.10.0
CKEditor is a ready-for-use HTML text editor designed to simplify web content creation. It's a WYSIWYG editor that brings common word processor features directly to your web pages. Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/ckeditor/ckeditor.js"></script>` Helper (call it after all JS scripts are added): `<script> jQuery(function(){ Dashmix.helpers('ckeditor'); }); </script>` Usage (add `js-ckeditor` id to a `textarea` or `js-ckeditor-inline` to a `div` for an inline editor): `<textarea id="js-ckeditor" name="ckeditor">Hello CKEditor!</textarea> <div id="js-ckeditor-inline">Hello inline CKEditor!</div>`
Cropper.js			1.4.1
Cropper.js is a JavaScript image cropper. Required CSS files (include before main CSS): `<link rel="stylesheet" href="assets/js/plugins/cropperjs/cropper.min.css">` Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/cropperjs/cropper.min.js"></script>` Usage: Please check out Image Cropper page under Components for usage examples.
DataTables			1.10.19
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table. Required CSS files (include before main CSS): `<link rel="stylesheet" href="assets/js/plugins/datatables/dataTables.bootstrap4.css">` Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/datatables/jquery.dataTables.min.js"></script> <script src="assets/js/plugins/datatables/dataTables.bootstrap4.min.js"></script>` Usage: Please check out DataTables page under Tables for usage examples.
Dropzone.js			5.5.1
DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews. Required CSS files (include before main CSS): `<link rel="stylesheet" href="assets/js/plugins/dropzone/dist/min/dropzone.min.css">` Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/dropzone/dropzone.min.js"></script>` Usage (add `dropzone` class to a `form`): `<form class="dropzone" action=""></form>`
Easy Pie Chart			2.1.7
Easy Pie Chart is a lightweight plugin to draw simple, animated pie charts for single values. Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/easy-pie-chart/jquery.easypiechart.min.js"></script>` Helper (call it after all JS scripts are added): `<script> jQuery(function(){ Dashmix.helpers('easy-pie-chart'); }); </script>` Usage (add `js-pie-chart` class to a `div` element): `<div class="js-pie-chart pie-chart" data-percent="25" data-line-width="2" data-size="100" data-bar-color="#ef5350" data-track-color="#e9e9e9" data-scale-color="#d9d9d9"> <span>..Content..</span> </div>`
FullCalendar			3.9.0
FullCalendar is a jQuery plugin that provides a full-sized, drag & drop event calendar. It uses AJAX to fetch events on-the-fly and is easily configured to use your own feed format. It is visually customizable with a rich API. Required CSS files (include before main CSS): `<link rel="stylesheet" href="assets/js/plugins/fullcalendar/fullcalendar.min.css">` Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/jquery-ui/jquery-ui.min.js"></script> <script src="assets/js/plugins/moment/moment.min.js"></script> <script src="assets/js/plugins/fullcalendar/fullcalendar.min.js"></script>` Usage: Please check out Calendar page under Components for usage examples.
Gmaps.js			0.4.24
The easiest way to use Google Maps. Google Maps API requires an API key to work correctly! To obtain your own key and be able to use them, please head over at Google and follow the instructions. Required JS files (include after all other JS scripts): `<script src="https://maps.googleapis.com/maps/api/js?key=your-api-key"></script> <script src="assets/js/plugins/gmaps/gmaps.min.js"></script>` Usage: Please check out Google Maps page under Components for usage examples.
Highlight.js			9.10.0
JavaScript syntax highlighter. Required CSS files (include before main CSS - You can also include some other file from `styles` folder for alternative syntax highlighting): `<link rel="stylesheet" href="assets/js/plugins/highlightjs/styles/atom-one-light.css">` Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/highlightjs/highlight.pack.min.js"></script>` Helper (call it after all other scripts are added): `<script> jQuery(function(){ Dashmix.helpers('highlightjs'); }); </script>` Usage: Please check out Syntax Highlighting page under Components for usage examples.
Ion Range Slider			2.2.0
Easy, flexible and responsive range sliders. Required CSS files (include before main CSS): `<link rel="stylesheet" href="assets/js/plugins/ion-rangeslider/css/ion.rangeSlider.css"> <link rel="stylesheet" href="assets/js/plugins/ion-rangeslider/css/ion.rangeSlider.skinHTML5.css">` Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/ion-rangeslider/js/ion.rangeSlider.min.js"></script>` Helper (call it after all JS scripts are added): `<script> jQuery(function(){ Dashmix.helpers('rangeslider'); }); </script>` Usage (add `js-rangeslider` class to a text `input`): `<input type="text" class="js-rangeslider form-control" value="50">`
jQuery Bootstrap Wizard			1.4.2*
It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually. Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/jquery-bootstrap-wizard/bs4/jquery.bootstrap.wizard.min.js"></script>` Usage: Please check out the Wizard page under Forms for usage examples. *We've made a few customizations to make it compatible with Bootstrap 4.
jQuery Countdown			2.2.0
The Final Countdown plugin for jQuery. Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/jquery-countdown/jquery.countdown.min.js"></script>` Usage: Please check out Coming Soon page for usage example.
jQuery Sparkline			2.4.1
This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via JavaScript. Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/jquery-sparkline/jquery.sparkline.min.js"></script>` Helper (call it after all JS scripts are added): `<script> jQuery(function(){ Dashmix.helpers('sparkline'); }); </script>` Usage: `<span class="js-sparkline" data-type="line" data-points="[9,5,2,4,6,1,3,5]"></span>` Please check out Charts page under Components for more usage examples.
jQuery Validation			1.17.0
The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy. Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/jquery-validation/jquery.validate.min.js"></script> <script src="assets/js/plugins/jquery-validation/additional-methods.js"></script>` Usage: Please check out Validation page under Forms for usage examples.
jQuery Masked Input			1.4.1
This is a masked input plugin for the jQuery JavaScript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates, phone numbers, etc). Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/jquery.maskedinput/jquery.maskedinput.min.js"></script>` Helper (call it after all JS scripts are added): `<script> jQuery(function(){ Dashmix.helpers('masked-inputs'); }); </script>` Usage (the helper inits various classes to work with): Please check out Plugins page under Forms for usage examples.
jQuery Raty			2.8.0
A star rating plugin. Required CSS files (include before main CSS): `<link rel="stylesheet" href="assets/js/plugins/raty-js/jquery.raty.css">` Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/jquery-raty/jquery.raty.min.js"></script>` Usage: Please check out Rating page under Components for usage examples.
jVectorMap			3.0.0
Vector Maps component. Required CSS files (include before main CSS): `<link rel="stylesheet" href="assets/js/plugins/jvectormap/dist/jquery-jvectormap.css">` Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/jvectormap/dist/jquery-jvectormap.min.js"></script> <script src="assets/js/plugins/jvectormap/maps/__map-file__.js"></script>` Usage: Please check out Vector Maps page under Components for usage examples.
Magnific Popup			1.1.0
Light and responsive lightbox script with focus on performance. Required CSS files (include before main CSS): `<link rel="stylesheet" href="assets/js/plugins/magnific-popup/magnific-popup.css">` Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/magnific-popup/jquery.magnific-popup.min.js"></script>` Helper (call it after all JS scripts are added): `<script> jQuery(function(){ Dashmix.helpers('magnific-popup'); }); </script>` Usage (with `js-gallery` class): Please check out Gallery page under Components for usage examples.
Select2			4.0.6
Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. Required CSS files (include before main CSS): `<link rel="stylesheet" href="assets/js/plugins/select2/css/select2.min.css">` Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/select2/js/select2.full.min.js"></script>` Helper (call it after all JS scripts are added): `<script> jQuery(function(){ Dashmix.helpers('select2'); }); </script>` Usage (add `js-select2` class to a `select` element): `<select class="js-select2 form-control" style="width: 100%;" data-placeholder="Choose one.."> <option></option><!-- Required for data-placeholder attribute to work with Select2 plugin --> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>`
SimpleMDE Markdown Editor			1.11.2
A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking. Required CSS files (include before main CSS): `<link rel="stylesheet" href="assets/js/plugins/simplemde/simplemde.min.css">` Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/simplemde/simplemde.min.js"></script>` Helper (call it after all JS scripts are added): `<script> jQuery(function(){ Dashmix.helpers('simplemde'); }); </script>` Usage (add `js-simplemde` class to a `textarea`): `<textarea class="js-simplemde" id="simplemde" name="simplemde">Hello SimpleMDE!</textarea>`
Slick			1.8.1
The last carousel you'll ever need. Required CSS files (include before main CSS): `<link rel="stylesheet" href="assets/js/plugins/slick-carousel/slick.css"> <link rel="stylesheet" href="assets/js/plugins/slick-carousel/slick-theme.css">` Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/slick-carousel/slick.min.js"></script>` Helper (call it after all JS scripts are added): `<script> jQuery(function(){ Dashmix.helpers('slick'); }); </script>` Usage (with `js-slider` class): `<div class="js-slider"> <div> Slide #1 </div> <div> Slide #2 </div> <div> Slide #3 </div> </div>` Please check out Sliders page under Components for more usage examples.
Summernote			0.8.10
Summernote is a JavaScript library that helps you create WYSIWYG editors online. Required CSS files (include before main CSS): `<link rel="stylesheet" href="assets/js/plugins/summernote/summernote-bs4.css">` Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/summernote/summernote-bs4.min.js"></script>` Helper (call it after all JS scripts are added): `<script> jQuery(function(){ Dashmix.helpers('summernote'); }); </script>` Usage (add `js-summernote` or `js-summernote-air` class to a `div` element): `<div class="js-summernote">Hello Summernote!</div> <div class="js-summernote-air">Hello Summernote Inline Editor!</div>`
SweetAlert2			7.26.11
An awesome replacement for JavaScript's alert. Required CSS files (include before main CSS): `<link rel="stylesheet" href="assets/js/plugins/sweetalert2/sweetalert2.min.css">` Required JS files (include after all core JS scripts - es6-promise.auto.min.js is required for IE10 and up support): `<script src="assets/js/plugins/es6-promise/es6-promise.auto.min.js"></script> <script src="assets/js/plugins/sweetalert2/sweetalert2.min.js"></script>` Usage: Please check out Dialogs page under Components for usage examples.
Vide			0.5.1
Easy as hell jQuery plugin for video backgrounds. Required JS files (include after all other JS scripts): `<script src="assets/js/plugins/vide/jquery.vide.min.js"></script>` Usage: Please check out the Hero Video pages under Layout for usage examples. Note: If you are having issues with the auto video playback in Safari 11, please have a look at https://github.com/vodkabears/Vide/issues/206

Finally, let’s have a better look at few custom helpers:

Print Page

A helper which prints the main content of the current page.

Helper (just by calling the following function):

Dashmix.helpers('print');

Class Toggle

A helper which allows you to toggle a custom class on the element of your choice on button click.

Helper:

This helper is already called by default on page load. You only must call it again if you inject new markup to the page and would like to init the functionality on it.

Dashmix.helpers('core-toggle-class');

Usage:

Your target element

<div class="js-target-class"></div>

Your button

<button type="button" data-toggle="class-toggle" data-target=".js-target-class" data-class="your-class">
    Toggle
</button>

In this specific example, each button click will toggle the class 'your-class' on the element with class 'js-target-class'.

Ripple

A helper which animates a ripple on button click.

Helper:

This helper is already called by default on page load. You only must call it again if you inject new markup to the page and would like to init the functionality on it.

Dashmix.helpers('core-ripple');

Usage (add data-* attributes to a button):

<button type="button" class="btn btn-primary" data-toggle="click-ripple">Primary</button>

Scroll To

A helper which allows you to animate scrolling to a specific element in the same page.

Helper:

This helper is already called by default on load. You only must call it again if you inject new markup to the page and would like to init the functionality on it.

Dashmix.helpers('core-scroll-to');

Usage:

Your target element

<div id="your-section">
    ..Content..
</div>

Your link..

<a href="#your-section" data-toggle="scroll-to" data-speed="500">
    Scroll to the element
</a>

..or your button

<button type="button" data-toggle="scroll-to" data-speed="500" data-target="#your-section">
    Scroll to the element
</button>

Table Sections

A helper which allows you to create table sections that toggle on row click (like an accordion component).

Helper (call it after all JS scripts are added):

<script>
    jQuery(function(){
        Dashmix.helpers('table-tools-sections');
    });
</script>

Usage:

1. Add the class js-table-sections to your table

<table class="js-table-sections table table-hover">
...
</table>

2. Use the follow markup in your table to create clickable header rows and their content

...
<tbody class="js-table-sections-header">One row</tbody>
<tbody>Multiple rows which show/hide on previous tbody’s row click</tbody>
<tbody class="js-table-sections-header">One row</tbody>
<tbody>Multiple rows which show/hide on previous tbody’s row click</tbody>
<tbody class="js-table-sections-header">One row</tbody>
<tbody>Multiple rows which show/hide on previous tbody’s row click</tbody>
...

Please check out Helpers page under Tables for usage examples.

Checkable Table

A helper which allows you to create a table with checkable rows.

Helper (call it after all JS scripts are added):

<script>
    jQuery(function(){
        Dashmix.helpers('table-tools-checkable');
    });
</script>

Usage:

1. Add the class js-table-checkable to your table

<table class="js-table-checkable table table-hover">
...
</table>

2. Use similar markup in your table to create checkable rows

...
<thead>
    <tr>
        <th>
            <input type="checkbox" id="check-all" name="check-all">
        </th>
        <th>Name</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            <input type="checkbox" id="row_1" name="row_1">
        </td>
        <td>Name 2</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" id="row_2" name="row_2">
        </td>
        <td>Name 2</td>
    </tr>
</tbody>
...

Please check out Helpers page under Tables for usage examples.

You can load multiple helpers in a page by using an array:
Dashmix.helpers(['helper1', 'helper2', 'helper3']);

Feel free to ignore the provided helpers and use your own plugin inits after you’ve included the resources of the ones you need in your page.

When a helper is called and functionality/plugin is initialized, a class js-HELPER_NAME-enabled is auto added to the element. This ensures that if you add a similar element dynamically to your page and call the helper again, the functionality/plugin will be initialized only on the new element. It’s a nice convenient solution but please have in mind that if you copy-paste an element to your markup from your browser’s developer tools, then you will also copy this extra class, so remember to remove it!

Quick Tips

CSS Prefixes for older browsers

You can update the following array in package.json accordingly if you would like the Autoprexifer to auto add CSS prefixes for older browser versions (when using the Gulp tasks to compile from Sass to CSS). By default, we use the same as Bootstrap 4 does.

"browserslist": [
    ">= 1%",
    "last 1 major version",
    "not dead",
    "Chrome >= 45",
    "Firefox >= 38",
    "Edge >= 12",
    "Explorer >= 10",
    "iOS >= 9",
    "Safari >= 9",
    "Android >= 4.4",
    "Opera >= 30"
]

Retina Support

The UI will look crispy clear on retina screens and if you would like your images to look great, too, then you will have to use the srcset attribute of the <img> element. For example, if you have an image assets/media/my_image.jpg and its retina version assets/media/my_image@2x.jpg you will have to use the following markup:

<img src="assets/media/my_image.jpg" srcset="assets/media/my_image@2x.jpg 2x" alt="Image Description">

The browser will auto select the best version and load it accordingly. Older browsers will ignore the srcset attribute and will load the regular image as usual.

Border-Box

The Bootstrap framework makes use of the border-box CSS model. That means that if you want to alter the width of an element with CSS, you can do it without worrying about the padding or the border size of that element (they will be adjusted to the width you will set).

Demo Forms

Please remember to remove onsubmit="return false;" from <form> tags if you are using a form from the example pages. It is just added to prevent forms from submitting in case you click on a submit button while previewing the pages.

Favicons

If you would like to auto create your favicons from your image/logo, you can use the free service over at http://realfavicongenerator.net

Google Maps API key

Google Maps API requires an API key to work correctly! To obtain your own key and be able to use them, please head over at Google and follow the instructions. You will be able to load the Google Maps API by using the following code with your own key: <script src="https://maps.googleapis.com/maps/api/js?key=your-api-key"></script>. Afterwards, you will be able to use the gmaps.js plugin and init your maps. If you are using the PHP version, you can simply add your API Key in the inc/_global/config.php file.

User Avatars

All avatars used in the online demo are not available for commercial use, so we couldn't include them in the final package (they can only be used for demonstration). If you would like them for mockup purposes, you can either replace the images in assets/media/avatars/ folder with avatars from uifaces.com or you can contact us to send you the ones we've used in the online demo (also from uifaces.com). Have in mind that they can only be used for demo purposes (mockup or online).

User Names

All user names used in the template are fictional and only used for demonstration. They were randomly generated at uinames.com, so if you are in need of random names for your mockups, it is a great choice.

Credits

We’ve used the following resources as listed. Special thanks to all the authors for their hard work!

Frameworks
Bootstrap
Animate.css

Photos
MyPhotoPack
Unsplash

Videos
Pexels

Icons
Font Awesome 5
Simple Line Icons

Libraries/Scripts
jQuery
jQuery UI
jQuery Appear
jQuery Countdown
jQuery Validation
jQuery Masked Input
jQuery Sparklines
Bootstrap Colorpicker
Bootstrap Datepicker
Bootstrap Notify
JS Cookie
SimpleBar
Scroll Lock
Chart.js
CKEditor
Datatables
Dropzone
Easy Pie Chart
FullCalendar
MomentJS
Gmaps.js
Highlight.js
Magnific Popup
Select2
Slick
Ion Range Slider
jQuery Raty
Bootstrap Maxlength
jVectorMap
SimpleMDE
ES6-Promise
SweetAlert2
Vide
Popper.js
Cropper.js
Bootstrap Wizard
Summernote

Misc
uifaces.com (avatars used on online demo for template demonstration purposes only)
uinames.com (randomly generated names used for template demonstration purposes only)

Thank You!

Thank you so much for supporting our work by choosing one of our products! We wish you all the best with your upcoming projects and endeavours in life! If you would like to check out more of our products, be sure to visit our website.

Have a great day and happy coding!