Thank you for purchasing Zoom, a template for admin dashboards and control panels. It is a responsive HTML template that is based on the CSS framework Bootstrap 4. If you are unfamiliar with Bootstrap, visit their website and read through the documentation. All of Bootstrap components have been modified to fit the style of Zoom and provide a consistent look throughout the template.
Before you start working with the template, we suggest you to go through the pages that are bundled with the template.This documentation contain quick tips on how to create or use a component which can be really helpful when you need to create something on the fly.
Note: We are trying our best to document how to use the template. If you think that something is missing from the documentation, please do not hesitate to tell us about it. If you have any questions or problems with this template please use Envato Marketplace contact form on our profile or email us at support@urbanui.com
Zoom is a fully responsive and customizable template suitable for admin dashboards. Zoom contain almost all components required for this purpose.
Zoom is based on bootstrap 4, the world's most popular responsive css framework.
Zoom is built with Sass. Sass compiler makes it easier to code and customize. Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
You can directly use the compiled and ready-to-use version of the template. But in case you plan to customize Zoom extensively, the template allows you to do so!
The downloaded package will have the following structure.
The vendor files are added as npm packages and bower packages for reducing the file sizes and easier version update of the vendors. Inorder to access the properties of vendors, you have to just run two commands and all the vendor files are inside your node_modules and bower_components folder!.
To do this, you must have node, npm and bower installed in your computer.
If you have installed them, just checkout to the root folder and run the following commands.
Now, you can open the index.html file in a browser and you are ready to go.
In case you wish to customize the styles you may do it by modifying .scss files provided in the 'scss' folder. More details on this is provided in the next section.
In case you plan to customize the template extensively, you can make changes to .scss files. We use the gulp task manager for the build processes. Gulp will watch for changes to .scss files and automatically compile the files to CSS. For this you need to install Gulp. Use of this tool is completely optional and only required if you want to modify the .scss files.
To get started you will need to install the following items
You can use several tools to install Ruby. Follow instructions herefor installing Ruby.
If you are using windows you will have to install Ruby, the Ruby Installeris pretty painless, be sure to check the “Add Ruby executable to your PATH” option.
To install Sass on your computer, simply follow the instructions on the sass-lang.comwebsite.
You can download Node.js from here. Npm comes bundled with Node.js
Getting started with gulp is pretty simple. The Gulpsite is a great place to get information on installing Gulp if you need more information.
You need to first install Gulp using the below command
This installs the Gulp commandline interface globally to your machine so that you can access it.
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.
Before you start modifying .scss files, make sure that you go to the root folder of the template and run the following command
This will start the file watch by gulp and whenever a file is modified .scss files will be compiled to create the css file
We have provided a bunch of layout options for you with a single class change! You can use the following classes for each layouts.
| Layout | Class |
|---|---|
| Compact menu | sidebar-mini |
| Icon menu | sidebar-icon-only |
| Hidden menu (togglable) | sidebar-hidden |
| Absolute menu | sidebar-absolute, sidebar-hidden |
| Horizontal menu | horizontal-menu |
| Horizontal menu on top | horizontal-menu, horizontal-menu-top |
| Boxed layout | boxed-layout |
| Rtl layout | rtl |
The below snippet shows the basic html structure of zoom admin. Please note that all the stylesheets and script files in the below snippet should be included to render zoom styles.
Chartjsis a simple yet flexible JavaScript charting for designers & developers.
To use chartjs in your appication, include the following files in <head>
and the following script files in <body>
To create a simple chart, add the following code
C3.jsis a D3-based reusable chart library.
To use c3 charts in your appication, include the following files in <head>
and the following script files in <body>
To create a simple chart, add the following code
Float Jsis a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.
Add following script files in <body>
To create a simple chart, add the following code
Chartistcreates simple responsive charts
To use chartist in your appication, 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
Googlechart tools are powerful, simple to use, and free. Try out our rich gallery of interactive charts and data tools.
Add the following script files in <body>
Basic Chart Structure
Morriscreates Pretty time-series line graphs
To use morris in your appication, 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
Rickshawis a JavaScript toolkit for creating interactive time series graphs.
To use rickshaw in your appication, include the following files in <head>
Add the following script files in <body>
To create a simple chart using rickshaw, add the following code
Jquery sparklinegenerates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.
To use sparkline in your appication, add the following script files in <body>
To create a line chart using sparkline, add the following code
Font awesomegives you scalable vector icons that can instantly be customized.
To use font awesome in your appication, include the following files in <head>
To create an address-book icon, add the following code
Themify iconsThemify Icons is a complete set of icons for use in web design and apps.
To use themify icons in your appication, include the following files in <head>
To generate an icon, add the following code
Simple line iconsis a set of simple and minimal line icons.
To use simple line icons in your appication, include the following files in <head>
To generate an icon, add the following code
Flag iconsis a A collection of all country flags in SVG — plus the CSS for easier integration.
To use simple line icons in your appication, include the following files in <head>
To generate an icon, add the following code
Clipboard, a modern approach to copy text to clipboard
Add the following script files in <body>
To create a ,add the following code
Listify is a simple filterable listing jQuery plugin.
Add the following script files in <body>
To create a filterable list,add the following code
Todolistis a minimal jQuery plugin to create checklist.
Add the following script files in <body>
To create a filterable list,add the following code
Just Gageis a handy JavaScript plugin for generating and animating nice & clean gauges.
Add the following script files in <body>
To create a gage, add the following code
Bootstrap Touris the easiest way to show people how to use your website
To use bootstrap tour in your appication, include the following files in <head>
Add the following script files in <body>
To create a filterable list,add the following code
Dragula,Drag and drop so simple it hurts
To use Dragula in your appication, include the following files in <head>
Add the following script files in <body>
To create a drag n drop list,add the following code
Ion-rangeslideris a easy, flexible and responsive range slider with skin support
To use ion-rangeslider in your appication, include the following files in <head>
Add the following script files in <body>
To create a slider,add the following code
To create a basic twitter bootstrap table, add the following code
Bootstrap-tableis an extended Bootstrap table with radio, checkbox, sort, pagination, and other added features.
To use bootstrap-table in your appication, 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-gridcreates simple responsive chartsis a lightweight client-side data grid control based on jQuery.
To use Js-grid in your appication, 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
Tablesorteris a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes.
To use Table in your appication, include the following files in <head>
Add the following script files in <body>
To create a Table, add the following code
jVectorMapuses only native browser technologies like JavaScript, CSS, HTML, SVG or VML.
To use Vector map in your appication, include the following files in <head>
Add the following script files in <body>
To create a simple map, add the following code
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
The basic form elements can be added to your application as below
We are using Jquery validationfor simple clientside form validation.
To use jquery validation in your appication, include the following script files in <body>
The following code shows validation of a simple form
We are using Jquery stepsin our template to create form addons. It is an all-in-one wizard plugin that is extremely flexible, compact and feature-rich.
To use jquery.steps in your appication, include the following files <body>
The following code generates a simple form wizard
Jquery Repeateris a an interface to add and remove a repeatable group of input elements.
Add the following script files in <body>
To create a Repeater, add the following code
Jquery Knobis a Nice, downward compatible, touchable, jQuery dial.
Add the following script files in <body>
To create a knob, add the following code
Easy pie chart is a jQuery plugin that uses the canvas element to render simple pie charts for single values.
Add the following script files in <body>
To create a easy pie chart, add the following code
Switchery is a simple component that helps you turn your default HTML checkbox inputs into switches
To use Switchery in your appication, include the following files in <head>
Add the following script files in <body>
To create a sample switchery, add the following code
jQuery-Tags-Inputmagically convert a simple text input into a cool tag list with this jQuery plugin.
To use jQuery-Tags-Input in your appication, 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
With ProgressBar.js,it's easy to create responsive and stylish progress bars for the web.
To use progressbar.js in your appication, include the following files in <body>
To create a progress bar using progressbar.js, add the following code
jquery-circle-progressis a jQuery Plugin to draw animated circular progress bars.
To use jquery-circle-progress in your appication, include the following files in <body>
To create a circular progress using jquery-circle-progress, add the following code
noUiSlideris a range slider without bloat
To use NoUISlider in your appication, include the following files in <head>
Add the following script files in <body>
To create a slider, add the following code
jQuery Bar RatingPlugin works by transforming a standard select field into a rating widget.
To use Star rating in your appication, include the following files in <head>
Add the following script files in <body>
To create a simple rating, add the following code
Bootstrap MaxLengthuses 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.
Add the following script files in <body>
To create a Maxlength input, add the following code
Input-maskhelps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers etc.
To use inputmask in your appication, include the following files in <body>
The below code shows an example of input mask for date.
Icheckis a set of highly customizable checkboxes and radio buttons.
To use icheck in your appication, include the following files in <head>
Add the following script files in <body>
The following code gives a minimal skin checkbox and radio using icheck.
Typeahead.jsis a flexible JavaScript library that provides a strong foundation for building robust typeaheads
To use typeahead.js in your appication, include the following files in <body>
A sample typeahead can be generated as below
Cropperis a simple jQuery image cropping plugin.
To use cropper in your appication, include the following files in <head>
Add the following script files in <body>
To crop an image using cropper, add the following code
Bootstrap Multiselect Splitteris a simple jQuery plugin
Add the following script files in <body>
To create a Table, add the following code
Dropifyis a simple drag n drop file upload.
To use dropify in your appication, include the following files in <head>
Add the following script files in <body>
To create a Dropify file upload,add the following code
Dropzoneis an open source library that provides drag’n’drop file uploads with image previews.
Add the following script files in <body>
To create a Dropzone file upload, add the following code
jQuery File UPloadplugin 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.
To use file upload in your appication, include the following files in <head>
Add the following script files in <body>
To create a Jquery file upload,add the following code
jQuery Clock Pickeris a clock-style timepicker for Bootstrap.
To use clock picker in your appication, include the following files in <head>
Add the following script files in <body>
To create a clock picker,add the following code
Bootstrap Date Pickerprovides a flexible datepicker widget in the Bootstrap style.
To use bootstrap date picker in your appication, include the following files in <head>
Add the following script files in <body>
To create a color picker,add the following code
AsColor Pickeris a jquery plugin that convent input into color picker.
To use color picker in your appication, include the following files in <head>
Add the following script files in <body>
To create a color picker,add the following code
Tinymceis a full featured web editing tool.
To use tinymce in your appication, include the following files in <body>
To create an editor using tinymce, add the following code
Wysihtmlis an open source rich text editor for the modern web.
To use Wysihtml in your appication, include the following files in <body>
To create an editor with rich toolbar using wysihtml, add the following code
X-editableallows 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.
To use x-editable in your appication, include the following files in <head>
Add the following script files in <body>
To create a simple editable text field, add the following code
Summernoteis a super simple WYSIWYG Editor.
To use summernote in your appication, include the following files in <head>
Add the following script files in <body>
To create a summernote editor, add the following code
SimpleMDEis a simple, beautiful, and embeddable JavaScript Markdown editor.
To use simpleMDE in your appication, include the following files in <head>
Add the following script files in <body>
To create an editor using simpleMDE, add the following code
Quillis a free, open source WYSIWYG editor built for the modern web.
To use quill in your appication, include the following files in <head>
Add the following script files in <body>
To create an editor using Quill, add the following code
Aceis an embeddable code editor written in JavaScript. It matches the features and performance of native editors such as Sublime, Vim and TextMate.
To use ace editor in your appication, include the following files in <body>
To create a code editor using ace with a sample code, add the following code
CodeMirroris 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.
To use CodeMirror in your appication, include the following files in <head>
Add the following script files in <body>
Here is an example of an editor using CodeMirror.