Back to home

Documentation

Introduction

CalmUI Admin is a responsive HTML template that is based on the CSS framework Bootstrap 4 and it is built with Sass. Sass compiler makes it easier to code and customize. If you are unfamiliar with Bootstrap or Sass, visit their website and read through the documentation. All of Bootstrap components have been modified to fit the style of CalmUI Admin and provide a consistent look throughout the template.

Before you start working with the template, we suggest you go through the pages that are bundled with the theme. Most of the template example pages contain quick tips on how to create or use a component which can be really helpful when you need to create something on the fly.

Note: We are trying our best to document how to use the template. If you think that something is missing from the documentation, please do not hesitate to tell us about it. If you have any questions or issues regarding this theme please use Envato support form on our profile or email us at support@urbanui.com

Getting started

You can directly use the compiled and ready-to-use the version of the template. But in case you plan to customize the template extensively the template allows you to do so.

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations:

Note: The root folder denoted further in this documentation refers to the 'template' folder inside the downloaded folder


Installation

You need to install package files/Dependencies for this project if you want to customize it. To do this, you must have node and npm installed in your computer.

Installation guide of the node can be found here. As npm comes bundled with a node, a separate installation of npm is not needed.

If you have installed them, just go to the root folder and run the following command in your command prompt or terminal (for the mac users).

This will install the dev dependencies in the local node_modules folder in your root directory.

Then you will need to install Gulp. We use the Gulp task manager for the development processes. Gulp will watch for changes to the SCSS files and automatically compile the files to CSS.

Getting started with Gulp is pretty simple. The Gulp site is a great place to get information on installing Gulp if you need more information. You need to first install Gulp-cli in your machine using the below command.

This installs Gulp-cli globally to your machine. The other thing that Gulp requires, which, is really what does all the work, is the gulpfile.js. In this file, you set up all of your tasks that you will run.

Don't worry. We have this file already created for you!

To run this project in development mode enter the following command below. This will start the file watch by gulp and whenever a file is modified, the SCSS files will be compiled to create the CSS file.

Basic structure

The below snippet shows the basic HTML structure of CalmUI Admin. Please note that all the stylesheets and script files in the below snippet should be included to render CalmUI Admin styles.

This section contains code of default vertical layout. For other layouts in vertical mode like boxed, icon-menu etc., you can follow the snippet same as below, but you have to just add the appropriate optional class to the body. More details of the classes are given in Options section

This section contains code of default vertical layout. For other layouts in vertical mode like boxed, icon-menu etc., you can follow the snippet same as below, but you have to just add the appropriate optional class to the body. More details of the classes are given in Options section

Options


Layouts

We have provided a bunch of page layouts and menu layouts that can be implemented with just a class change to body! Please refer the below table for corresponding classes.

Please note that these options are currently for vertical layouts(light and dark) only. We will be implementing layout options for horizontal menu in future.

Layout Class
Boxed layout boxed-layout
RTL layout rtl
Icon menu sidebar-icon-only
compact menu sidebar-mini
Fixed sidebar sidebar-fixed
Hidden sidebar (that appears on toggle) sidebar-toggle-display sidebar-hidden
Overlay sidebar sidebar-absolute sidebar-hidden

Theme options

We have some inbuilt themes for sidebar and navbar that can be switched with just a class change

Please note that the theme options are currenlty available for vertical light layout. We will be implementing theme options in other layouts in future updates.

Theme Class
Dark sidebar Default (No class needed)
Light sidebar sidebar-light (Add class to body)
primary navbar .navbar-primary (Add class to navbar)
info navbar .navbar-info (Add class to navbar)
success navbar .navbar-success (Add class to navbar)
warning navbar .navbar-warning (Add class to navbar)
danger navbar .navbar-danger (Add class to navbar)
dark navbar .navbar-dark (Add class to navbar)

Components


Basic UI Elements

Button with the single color
Outlined
Sizes
Bootstrap Accordion
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Bootstrap Dropdown
Dropdown Outlined
Bootstrap Tabs
Bootstrap Modal
Bootstrap Pagination
Bootstrap Badges
Default
Pill
Outlined

Basic UI Elements - 2

Bootstrap Breadcrumb
Bootstrap Progressbar
Bootstrap Tooltip

Add the following script files in <body>.

To create a clipboard, add the following code:


Advanced UI Elements

Clipboard, a modern approach to copy text to the clipboard.

Usage

Add the following script files in <body>.

To create a clipboard, add the following code:

Todolist is a minimal jQuery plugin to create checklist.

Usage

Add the following script files in <body>.

To create a filterable list, add the following code:

Dragula ,Drag and drop so simple it hurts.

Usage

To use Dragula in your application, include the following files in <head>.

Add the following script files in <body>.

To create a drag n drop list, add the following code:

The contextMenu Plugin was designed for web applications in need of menus on a possibly large amount of objects. Click Here to see the official documentation.

noUiSlider is a range slider without bloat.

Usage

To use NoUISlider in your application, include the following files in <head>.

Add the following script files in <body>.

To create a slider, add the following code:

Easy, flexible and responsive range slider with skin support. Click Here to see the official documentation.

Colcade is a simple lightweight masonry layout.

Usage

Add the following script files in <body>.

To create a responsive, add the following code:


Media

Light Gallery is a customizable, modular, responsive, Lightbox gallery plugin for jQuery.

Usage

To use LightGallery in your application, include the following files in <head>.

Add the following script files in <body>.

To create Lightbox Gallery, add the following code:

Owl Carousel is a touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.

Usage

To use Owl Carousel in your application, include the following files in <head>.

Add the following script files in <body>.

To create a carousel, add the following code:


Tables

To create a basic Twitter Bootstrap table, add the following code.

Bootstrap-table is an extended Bootstrap table with radio, checkbox, sort, pagination, and other added features.

Usage

To use Bootstrap-table in your application, include the following files in <head>.

Add the following script files in <body>.

Activate Bootstrap table without writing JavaScript, set data-toggle="table" on a normal table.

Js-grid creates simple responsive chartsis a lightweight client-side data grid control based on jQuery.

Usage

To use Js-grid in your application, include the following files in <head>.

Add the following script files in <body>.

To create a basic table using Js-grid, add the following code:

Tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes.

Usage

To use Table in your application, include the following files in <head>.

Add the following script files in <body>.

To create a Table, add the following code:


Charts

Chart.js is a simple yet flexible JavaScript charting for designers & developers.

Usage

To use Chart.js in your application, include the following files in <head>.

and the following script files in <body>.

To create a simple chart, add the following code:

Float.js is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.

Usage

Add following script files in <body>.

To create a simple chart, add the following code:

Google chart tools are powerful, simple to use, and free. Try out our rich gallery of interactive charts and data tools.

Usage

Add the following script files in <body>.

Basic chart structure:

C3.js is a D3-based reusable chart library.

Usage

To use C3 charts in your application, include the following files in <head>.

and the following script files in <body>.

To create a simple chart, add the following code:

Chartist creates simple responsive charts.

Usage

To use Chartist in your application, include the following files in <head>.

Add the following script files in <body>.

To create a simple line chart using Chartist, add the following code:

Morris creates pretty time-series line graphs.

Usage

To use Morris in your application, include the following files in <head>.

Add the following script files in <body>.

To create a simple line chart using Morris, add the following code:

Jquery Sparkline generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via Javascript.

Usage

To use Sparkline in your application, add the following script files in <body>.

To create a line chart using Sparkline, add the following code:

Just Gage is a handy JavaScript plugin for generating and animating nice & clean gauges.

Usage

Add the following script files in <body>.

To create a gage, add the following code:


Maps

JvectorMap uses only native browser technologies like JavaScript, CSS, HTML, SVG or VML.

Usage

To use Vector map in your application, include the following files in <head>.

Add the following script files in <body>.

To create a simple map, add the following code:

Mapeal Map Ease the build of pretty data visualizations on dynamic vector maps.

Add the following script files in <body>.

To create a simple map, add the following code:


Forms

The basic form elements can be added to your application as below:

We are using Jquery validation for simple clientside form validation.

Usage

To use jquery validation in your application, include the following script files in <body>.

The following code shows validation of a simple form:

We are using Jquery steps in our template to create form addons. It is an all-in-one wizard plugin that is extremely flexible, compact and feature-rich.

Usage

To use jquery.steps in your application, include the following files <body>.

The following code generates a simple form wizard.

Jquery Repeater is an interface to add and remove a repeatable group of input elements.

Usage

Add the following script files in <body>.

To create a Repeater, add the following code:


Additional form elements

jQuery-Tags-Input magically convert a simple text input into a cool tag list with this jQuery plugin.

Usage

To use jQuery-Tags-Input in your application, include the following files in <head>.

Add the following script files in <body>.

To convert an input to tag using jQuery-Tags-Input, add the following code:

jQuery Bar Rating Plugin works by transforming a standard select field into a rating widget.

Usage

To use CalmUI rating in your application, include the following files in <head>.

Add the following script files in <body>.

To create a simple rating, add the following code:

Bootstrap MaxLength uses a Twitter Bootstrap label to show a visual feedback to the user about the maximum length of the field where the user is inserting text. Uses the HTML5 attribute "maxlength" to work.

Usage

Add the following script files in <body>.

To create a Maxlength input, add the following code:

Input-mask helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers etc.

Usage

To use Inputmask in your application, include the following files in <body>.

The below code shows an example of input mask for date.

Typeahead.js is a flexible JavaScript library that provides a strong foundation for building robust typeaheads.

Usage

To use Typeahead.js in your application, include the following files in <body>.

A sample typeahead can be generated as below:


Icons

Material Design Icons growing icon collection allows designers and developers targeting various platforms to download icons in the format, color and size they need for any project.

Usage

To use Material Design Icons in your application, include the following files in <head>.

To generate an icon, add the following code:

Font Awesome gives you scalable vector icons that can instantly be customized.

Usage

To use Font Awesome in your application, include the following files in <head>.

To create an address-book icon, add the following code:

Themify Icons Themify Icons is a complete set of icons for use in web design and apps.

Usage

To use themify icons in your application, include the following files in <head>.

To generate an icon, add the following code:

Simple Line Icons is a set of simple and minimal line icons.

Usage

To use Simple Line Icons in your application, include the following files in <head>.

To generate an icon, add the following code:

Flag Icons is a collection of all country flags in SVG — plus the CSS for easier integration.

Usage

To use Simple Line Icons in your application, include the following files in <head>.

To generate an icon, add the following code:


File Upload

Dropify is a simple drag n drop file upload.

Usage

To use Dropify in your application, include the following files in <head>.

Add the following script files in <body>.

To create a Dropify file upload, add the following code:

Dropzone is an open source library that provides drag’n’drop file uploads with image previews.

Usage

Add the following script files in <body>.

To create a Dropzone file upload,add the following code:

jQuery File UPload plugin provides multiple file uploads with progress bar. jQuery File Upload Plugin depends on Ajax Form Plugin, So Github contains source code with and without form plugin.

Usage

To use file upload in your application, include the following files in <head>.

Add the following script files in <body>.

To create a Jquery file upload,add the following code:


Form Picker

We are using Tempus Dominus plugin in our template to create beautiful time picker.

Usage

To use clock picker in your application, include the following files in <head>.

Add the following script files in <body>.

To create a clock picker, add the following code:

Bootstrap Date Picker provides a flexible datepicker widget in the Bootstrap style.

Usage

To use bootstrap date picker in your application, include the following files in <head>.

Add the following script files in <body>.

To create a datepicker, add the following code:

AsColor Picker is a jQuery plugin that convent input into color picker.

Usage

To use color picker in your application, include the following files in <head>.

Add the following script files in <body>.

To create a color picker, add the following code:


Editors

Tinymce is a full-featured web editing tool.

Usage

To use Tinymce in your application, include the following files in <body>.

To create an editor using tinymce, add the following code:

X-editable allows you to create editable elements on your page. It can be used with any engine (Bootstrap, jQuery-UI, jQuery only) and includes both popup and inline modes.

Usage

To use x-editable in your application, include the following files in <head>.

Add the following script files in <body>.

To create a simple editable text field, add the following code:

Summernote is a super simple WYSIWYG Editor.

Usage

To use summernote in your application, include the following files in <head>.

Add the following script files in <body>.

To create a summernote editor, add the following code:

SimpleMDE is a simple, beautiful, and embeddable JavaScript Markdown editor.

Usage

To use simpleMDE in your application, include the following files in <head>.

Add the following script files in <body>.

To create an editor using simpleMDE, add the following code:

Quill is a free, open source WYSIWYG editor built for the modern web.

Usage

To use Quill in your application, include the following files in <head>.

Add the following script files in <body>.

To create an editor using Quill, add the following code:

Ace is an embeddable code editor written in JavaScript. It matches the features and performance of native editors such as Sublime, Vim and TextMate.

Usage

To use ace editor in your application, include the following files in <body>.

To create a code editor using ace with a sample code, add the following code:

CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functionality.

Usage

To use CodeMirror in your application, include the following files in <head>.

Add the following script files in <body>.

Here is an example of an editor using CodeMirror.

Credits

We have used the following plugins in CalmUI admin