Documentation

Introduction

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

About Zoom

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.

Getting started

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.

Customization

In case you plan to customize the template extensively, you can make changes to .scss files. We use the gulp task manager for the build processes. Gulp will watch for changes to .scss files and automatically compile the files to CSS. For this you need to install Gulp. Use of this tool is completely optional and only required if you want to modify the .scss files.

Dependencies

To get started you will need to install the following items

  • Ruby - to get Sass
  • NodeJs - to get npm (For managing our dependences)
  • Gulp - for task management.
Ruby and Sass

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.

Node.js and NPM

You can download Node.js from here. Npm comes bundled with Node.js

Gulp

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

Options

We have provided a bunch of layout options for you with a single class change! You can use the following classes for each layouts.

LayoutClass
Compact menusidebar-mini
Icon menusidebar-icon-only
Hidden menu (togglable)sidebar-hidden
Absolute menusidebar-absolute, sidebar-hidden
Horizontal menuhorizontal-menu
Horizontal menu on tophorizontal-menu, horizontal-menu-top
Boxed layoutboxed-layout
Rtl layoutrtl

Basic structure

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.

Charts

Chartjsis a simple yet flexible JavaScript charting for designers & developers.

Usage

To use chartjs in your appication, include the following files in <head>

and the following script files in <body>

To create a simple chart, add the following code

Icons

Font awesomegives you scalable vector icons that can instantly be customized.

Usage

To use font awesome in your appication, include the following files in <head>

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

Basic UI elements

Button with default color
Outlined
Sizes

Advanced UI elements

Clipboard, a modern approach to copy text to clipboard

Usage

Add the following script files in <body>

To create a ,add the following code

Tables

To create a basic twitter bootstrap table, add the following code

Maps

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

Usage

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

Add the following script files in <body>

To create a simple map, add the following code

Forms

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

Advanced form elements

Jquery Knobis a Nice, downward compatible, touchable, jQuery dial.

Usage

Add the following script files in <body>

To create a knob, add the following code

Additional form elements

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

Usage

Add the following script files in <body>

To create a Maxlength input, add the following code

File upload

Dropifyis a simple drag n drop file upload.

Usage

To use dropify in your appication, include the following files in <head>

Add the following script files in <body>

To create a Dropify file upload,add the following code

Form pickers

jQuery Clock Pickeris a clock-style timepicker for Bootstrap.

Usage

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

Add the following script files in <body>

To create a clock picker,add the following code

Form editors

Tinymceis a full featured web editing tool.

Usage

To use tinymce in your appication, include the following files in <body>

To create an editor using tinymce, add the following code