Thank you for choosing OneUI

We are very excited to release OneUI Remastered as a free update to all of you who supported the project all these years and keep supporting it with new purchases! It's our way of thanking you for choosing one of our templates for your projects! We hope you like it and put it into good use by building new awesome projects! Wish you all the best and happy coding!

Changelog

September 12, 2019

New Features

  • Elements/Components
    • Datetimepicker
    • Horizontal Navigation
  • eCommerce Store Pages
    • Home
    • Search Results
    • Products List
    • Product
    • Checkout

Improvements

  • Max width set to main content (can be changed with a Sass variable in _scss/oneui/_variables.scss)
  • Docs: Instructions were added for recreating demo pages in Laravel Starter Kit from the HTML version

Fixes

  • Enabled enter key in textareas in Form Wizard & Validation examples

Updates

  • jQuery 3.4.1 (3.3.1)
  • FontAwesome 5.10.2 (5.8.1) - 58 new icons!
  • Bootstrap Colorpicker 3.1.2 (3.1.1)
  • Bootstrap Datepicker 1.9.0 (1.8.0)
  • SweetAlert2 8.17.1 (8.8.1)
  • Cropper.js 1.5.5 (1.5.1)
  • CKEditor 4.12.1 (4.11.3)
  • Select2 4.0.10 (4.0.5)
  • Simplebar 4.2.1 (2.6.1)
  • Summernote 0.8.12 (0.8.11)
  • JS Cookie 2.2.1 (2.2.0)
  • FullCalendar 3.10.1 (3.10.0)
  • jQuery Validation 1.19.1 (1.19.0)
  • Laravel Starter Kit: Laravel 6.0 (5.8)

Changes

  • A few changes were made in assets/_scss/main.scss
    • @import 'vendor/flatpickr'; was added
  • Laravel Starter Kit
    • resources/assets/sass/* files were moved to resources/sass/* to match with Laravel's default structure
    • resources/assets/js/oneui/* files were moved to resources/js/oneui/* to match with Laravel's default structure
    • resources/assets/js/laravel/* files were moved to resources/js/* to match with Laravel's default structure
    • In Laravel 6, you will need to add the laravel/ui package for Auth/JS/CSS scaffolding
April 8, 2019

New Features

  • Ribbons
  • Generic Pages
    • Team
    • Contact
    • Support
    • Upgrade Plan
    • Status
    • Maintenance
  • Authentication Pages
    • Sign In 2
    • Sign Up 2
    • Lock Screen 2
    • Password Reminder 2
  • Laravel Starter Kit: DataTables Page Example

Improvements

  • Better font sizing for large buttons/forms

Fixes

  • Added fade hide classes to toasts examples in notifications page

Updates

  • Bootstrap 4.3.1 (4.2.1)
  • FontAwesome 5.8.1 (5.7.1) - 72 new icons!
  • Chart.js 2.8.0 (2.7.3)
  • Bootstrap Colorpicker 3.1.1 (3.0.3)
  • CKEditor 4.11.3 (4.11.2)
  • Cropper.js 1.5.1 (1.4.3)
  • Popper.js 1.15.0 (1.14.7)
  • SweetAlert2 8.8.1 (8.0.6)
  • es6-promise 4.2.6 (4.2.5)
  • Laravel Starter Kit: Laravel 5.8 (5.7)

Changes

  • The following lines were added in _scss/main.scss:
    • @import 'oneui/ribbon';
  • SweetAlert2 Plugin
    • Use of customClass instead of individual attributes (they will be deprecated in the next major release)
February 7, 2019

New Features

  • Bootstrap 4.2.1
    • Switches
    • Toasts
    • Spinners
    • Modal XL
  • Forum Pages
    • Categories
    • Topics
    • Discussion
  • Blog Pages
    • Classic
    • List
    • Grid
    • Story
    • Story Cover
  • e-Learning Pages
    • Courses
    • Course
    • Lesson

Improvements

  • Form validation helper is now added and can be used to apply default options before your custom rules (optional)
  • Font Awesome 5 Pro support out of the box

Fixes

  • SweetAlert2 console deprecations messages
  • Removed outline style from links (visible on Firefox)

Updates

  • Bootstrap 4.2.1 (4.1.3)
  • FontAwesome 5.7.1 (5.3.1) - 219 new icons!
  • Ion Range Slider 2.3.0 (2.2.0)
  • Raty.js 2.9.0 (2.8.0)
  • SweetAlert2 8.0.6 (7.28.2)
  • CropperJS 1.4.3 (1.4.1)
  • Chart.js 2.7.3 (2.7.2)
  • CKEditor 4.11.2 (4.10.1)
  • Highlight.js 9.12.0 (9.10.0)
  • Summernote 0.8.11 (0.8.10)
  • es6 Promise 4.2.5 (4.2.4)
  • Moment 2.24.0 (2.22.2)
  • jQuery Validation 1.19.0 (1.17.0)
  • Full Calendar 3.10.0 (3.9.0)
  • Laravel Starter Kit: Laravel 5.7.25 (5.7.6)
  • Laravel Starter Kit: Laravel Mix 4.0.14 (2.1.14)

Changes

  • The following lines were added in _scss/main.scss:
    • @import 'bootstrap/toasts';
    • @import 'bootstrap/spinners';
  • SweetAlert JS init demo code was updated to fulfill newer version's requirements
  • ion.rangeSlider.skinHTML5.css file is no longer required when using Ion Range Slider Plugin in your pages
  • Laravel Starter Kit: Laravel Mix was updated to 4 version, so make sure to delete your node_modules folder before running npm install to prevent any possible issues. Also, please check out its online changelog for any breaking changes.
4.0 Release
October 2, 2018

Updating

OneUI might receive additional free updates in the future. One of the main goals was to make sure the update progress is going to be as easy as possible. Due to its nature (template), updating can become an unpleasant task.

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:

HTML/PHP Versions

  • assets/css/
    • themes/*
    • oneui.css
    • oneui.min.css
  • assets/js/
    • core/*
      If you are using the minified version of core files - oneui.core.min.js, you don't have to update them
    • plugins/*
    • oneui.app.min.js
    • oneui.core.min.js
  • assets/fonts/*

Laravel Starter Kit (run the command npm install after updating with the new files)

  • public/css/
    • themes/*
    • oneui.css
  • public/js/
    • plugins/*
    • oneui.app.js
  • public/fonts/*
  • resources/
    • js/oneui/modules/*
    • sass/*

      Except custom/ folder where you can make your own modifications

  • webpack.mix.js

    Please make sure you don’t override any custom additions you might have introduced

  • package.json

    Please make sure you don’t override any custom packages you might have installed

  • package-lock.json

If you are working with source files (Sass and/or ES6), you will have to update the following as well:

HTML/PHP Versions

  • assets/_es6/main/modules/*
  • assets/_scss/*
    Except custom/ folder where you can make your own modifications

Moreover, if you are using Gulp tasks, remember to update the following files in your project’s root folder and then run the command npm install from your console to install/update any new dependencies:

HTML/PHP Versions

  • .babelrc
  • gulpfile.babel.js
  • package.json
  • package-lock.json

Remember that it’s always a good idea to backup your work before updating to a new version!

When a new update becomes available, you will be able to download it from Themeforest. You can check the checkbox under the product ( Get notified by email if this item is updated), follow us on Twitter or subscribe to our news to stay up to date about the availability of new updates.

Package

OneUI was built with extra care based on the valuable feedback we keep receiving over the past years working full-time on dashboard templates. It follows the best practices using the latest technologies and we really hope that you will enjoy working with it. OneUI will enable you to build fast, beautiful, user friendly web applications and websites that will work seamlessly across various screens and devices.

Let's have a look at the contents of the current package:

  • 01 - OneUI 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 - OneUI 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. The backend section 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/*. The backend section 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 - OneUI 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 OneUI 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. If you would like to recreate a demo page from the HTML version, you can check out the Laravel Starter Kit section for more info.
  • 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. OneUI 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 OneUI 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 OneUI.

Please have in mind that by default we don’t include the navbar, card and carousel components since we use our own and third party ones 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 OneUI, 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:

  1. Download and install Node.js
    Prefer the LTS version just to make sure there won't be any incompatibilities
  2. Install gulp-cli globally by running the command npm install -g gulp-cli in your system’s console.
  3. (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.
  4. 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 OneUI 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/oneui.css
assets/css/oneui.min.css
assets/_scss/oneui/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/oneui.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/oneui.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/oneui.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

OneUI 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 OneUI framework -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400italic,600,700%7COpen+Sans:300,400,400italic,600,700">
        <link rel="stylesheet" id="css-main" href="assets/css/oneui.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/amethyst.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

            HEADER STYLE

                ''                                          Light themed Header
                'page-header-dark'                          Dark themed Header

            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 -->

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

        <!-- OneUI JS Custom -->
        <script src="assets/js/oneui.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

OneUI 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.

oneui/*

Includes all OneUI 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 oneui.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

OneUI 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 OneUI 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 OneUI JS functionality that is vital and used in all pages. If you would like to add your 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
oneui.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 OneUI 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 oneui.app.min.js after compilation.

oneui.app.min.js

The main file containing all custom JS code needed for OneUI 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 oneui.css because for a few plugins we include 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.4.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.3.1

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
One.helpers('core-bootstrap-tooltip');

// Popover
One.helpers('core-bootstrap-popover');

// Tabs
One.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 4.2.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. 

One.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.1

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.1.2

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(){
        One.helpers('colorpicker');
    });
</script>

Usage (add js-colorpicker class to an input): 

<input type="text" class="js-colorpicker form-control" value="#db4a39">
Bootstrap Datepicker 1.9.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(){
        One.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(){
        One.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(){
        One.helpers('notify');
    });
</script>

Usage:

Please check out the Notifications page under Components for usage examples.

Chart.js 2.8.0

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.12.1

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(){
        One.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.5.5

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(){
        One.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>
Flatpickr 4.6.2

Lightweight, powerful JavaScript datetimepicker with no dependencies.

Required CSS files (include before main CSS): 

<link rel="stylesheet" href="assets/js/plugins/flatpickr/flatpickr.min.css">

Required JS files (include after all other JS scripts): 

<script src="assets/js/plugins/flatpickr/flatpickr.min.js"></script>

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

<script>
    jQuery(function(){
        Dashmix.helpers('flatpickr');
    });
</script>

Usage (add js-flatpickr class to a text input): 

<input type="text" class="js-flatpickr form-control">
FullCalendar 3.10.1

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.12.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/github-gist.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(){
        One.helpers('highlightjs');
    });
</script>

Usage:

Please check out Syntax Highlighting page under Components for usage examples.

Ion Range Slider 2.3.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">

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(){
        One.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(){
        One.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.19.1

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>

Helper (call it before setting up your custom validation rules - it will load the default options for you): 

<script>
    jQuery(function(){
        One.helpers('validation');
    });
</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(){
        One.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(){
        One.helpers('magnific-popup');
    });
</script>

Usage (with js-gallery class):

Please check out Gallery page under Components for usage examples.

Select2 4.0.10

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(){
        One.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(){
        One.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(){
        One.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.12

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(){
        One.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 8.17.1

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 (set the url of your video in the data-vide-bg attribute of a div similar to the following): 

<div class="bg-video" data-vide-bg="url/to/your/video/without/the/file/extension"
                      data-vide-options="posterType: jpg">
    ...
</div>

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): 

One.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. 

One.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. 

One.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. 

One.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(){
        One.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(){
        One.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:
One.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!

Laravel Starter Kit

The provided Blade Templates under resources/views/ folder have everything you need to recreate any demo page we showcase in the PHP and HTML versions. If you are not familiar with Blade Templates, you can have a look at the official docs where they explained in detail. They can help us in many ways but most importantly, they enable us to create master layouts, so that we don’t repeat the same content in each one of our pages.

Blade Layout Templates

First of all, it’s important to know that we provide 2 main layouts, the simple and the backend layout. As you must have already seen from the HTML Structure section, the simple layout is actually just a subset of the backend layout (the main structure). It is the same layout without a header, sidebar, side overlay and footer.

Files Description
resources/views/layouts/simple.blade.php

This is the simple layout which is ideal to recreate the one-page layout pages such as Sign In or Error pages. A page example using this layout can be found at resources/views/landing.blade.php.

resources/views/layouts/backend.blade.php

This is the backend layout which includes all main elements (header, sidebar, side overlay and footer) and it is ideal for recreating full backend pages. A page example using this layout can be found at resources/views/dashboard.blade.php.

Before adding your own pages, you can create your custom layout based on your preferences or use the existing ones to recreate any layout you want. You will just have to find the page from the HTML version with the layout you are interested in, use the same classes used in #page-container element and replace the HTML content of the main sections (header, sidebar, side overlay and footer) by copying over the HTML markup you find in each related element.

Recreating a page from the HTML version

It is a simple process and we provide related page examples for each occasion under resources/views/examples/ folder. Let’s have a better look:

  1. Static content (example in blank.blade.php)

    If the page you are interested in doesn’t use plugins, you will have to:

    • Copy over the HTML markup found in your #main-container element to your @section('content') section.
  2. Static content with a plugin using a JS helper (example in plugin_helper.blade.php)

    If the page you are interested in use plugins for which we provide JS helpers, you will have to:

    • Copy over the HTML markup found in your #main-container element to your @section('content') section.
    • Include plugins’ required CSS assets in your @section('css_before') section.
    • Include plugins’ required JS assets and run the JS helper in your @section('js_after') section.
  3. Static content with a plugin using custom JS init code (example in plugin_init.blade.php)

    If the page you are interested in uses plugins for which you have to use custom JS to init it, you will have to:

    • Copy over the HTML markup found in your #main-container element to your @section('content') section.
    • Include plugins’ required CSS assets in your @section('css_before') section.
    • Include plugins’ required JS assets in your @section('js_after') section.
    • Copy over the JS init code (found under assets/_es6/pages/ folder) used in the page from the HTML version, in the resources/js/pages/ folder and add it in your webpack.mix.js file to be compiled with Laravel Mix (eg .js('resources/js/pages/tables_datatables.js', 'public/js/pages/tables_datatables.js')). Afterwards, include it in your @section('js_after') section and edit it accordingly based on your preferences.

You can have a look at the JavaScript Structure section where we include info about all integrated plugins, their required assets and their JS helper availability. Moreover, it’s worth mentioning that if you are more experienced, you could use dynamic imports which is a method of code-splitting and enables us to split JavaScript code into separate files.

Quick Tips

Wrapping #page-container

If you would like to wrap the main layout div#page-container with another div, then you should add the class h-100 to your wrapping div element to ensure that the flexbox layout will keep working as expected and your main elements (eg footer), will be positioned accordingly.

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
Flatpickr
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!