### Documentation

#### Introduction

Thank you for purchasing Titan, 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 Titan 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 Titan

Titan is a fully responsive and customizable template suitable for admin dashboards. Titan contain almost all components required for this purpose.

Titan is based on bootstrap 4, the world's most popular responsive css framework.

Titan 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 Titan extensively, the template allows you to do so!

The downloaded package will have the following structure.

Titan/ ├── css/ ├── images/ ├── js/ ├── pages/ ├── scss/ ├── package.json ├── bower.json ├── gulpfile.js ├── index.html

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. npm install bower install

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 here for installing Ruby.

If you are using windows you will have to install Ruby, the Ruby Installer is 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.com website.

##### 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 Gulp site 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

npm install -g gulp-cli

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

gulp serve

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.

Layout | Class
--- | ---
Compact menu | sidebar-mini
Icon menu | sidebar-icon-only
Hidden menu (togglable) | sidebar-hidden
Absolute menu | sidebar-absolute, sidebar-hidden
Fixed menu | sidebar-fixed
Boxed layout | boxed-layout
Rtl layout | rtl
Dark sidebar | sidebar-dark

#### Basic structure

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

<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Titan Admin</title> <link rel="stylesheet" href="http://www.urbanui.com/node_modules/font-awesome/css/font-awesome.min.css" /> <link rel="stylesheet" href="http://www.urbanui.com/node_modules/perfect-scrollbar/dist/css/perfect-scrollbar.min.css" /> <link rel="stylesheet" href="http://www.urbanui.com/css/style.css" /> <link rel="shortcut icon" href="http://www.urbanui.com/images/favicon.png" /> </head> <body> <div class=" container-scroller"> <!-- Navbar --> <nav class="navbar navbar-light col-lg-12 col-12 p-0 fixed-top d-flex flex-row"> <div class="text-left navbar-brand-wrapper"> <a class="navbar-brand brand-logo" href="#"><i class="mdi mdi-cards-outline"></i>Titan</a> <a class="navbar-brand brand-logo-mini" href="#"><i class="mdi mdi-cards-outline"></i></a> </div> <div class="navbar-menu-wrapper d-flex align-self-stretch align-items-center"> <button class="navbar-toggler navbar-toggler align-self-center mr-2" type="button" data-toggle="minimize"> <span class="navbar-toggler-icon"></span> </button> <form class="form-inline mt-2 mt-md-0 d-none d-lg-block"> <input class="form-control mr-sm-2 search" type="text" placeholder="Search"> </form> <ul class="navbar-nav ml-lg-auto"> <li class="nav-item nav-profile"> <a class="nav-link" href="#"> Profile<img src="http://www.urbanui.com/images/faces/face9.jpg" /> </a> </li> <li class="nav-item dropdown"> <a class="nav-link count-indicator" id="notificationDropdown" href="#" data-toggle="dropdown"> <i class="mdi mdi-bell-outline"></i> <span class="count">7</span> </a> <div class="dropdown-menu navbar-dropdown notification-drop-down" aria-labelledby="notificationDropdown"> <a class="dropdown-item" href="#"> <i class="fa fa-birthday-cake text-success fa-fw"></i> <span class="notification-text">Today is John's birthday</span> </a> <a class="dropdown-item" href="#"> <i class="fa fa-phone text-danger fa-fw"></i> <span class="notification-text">Call John Doe</span> </a> <a class="dropdown-item" href="#"> <i class="fa fa-handshake-o text-primary fa-fw"></i> <span class="notification-text">Meeting Alisa</span> </a> <a class="dropdown-item" href="#"> <i class="fa fa-exclamation-triangle text-danger fa-fw"></i> <span class="notification-text">Server space almost full</span> </a> <a class="dropdown-item" href="#"> <i class="fa fa-bell text-warning fa-fw"></i> <span class="notification-text">Payment Due</span> </a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link count-indicator" id="MailDropdown" href="#" data-toggle="dropdown"> <i class="mdi mdi-email-outline"></i> <span class="count">4</span> </a> <div class="dropdown-menu navbar-dropdown mail-notification" aria-labelledby="MailDropdown"> <a class="dropdown-item" href="#"> <div class="sender-img"> <img src="http://www.urbanui.com/images/faces/face6.jpg" alt=""> <span class="badge badge-success"> </span> </div> <div class="sender"> <p class="Sende-name">John Doe</p> <p class="Sender-message">Hey, We have a meeting planned at the end of the day.</p> </div> </a> <a class="dropdown-item" href="#"> <div class="sender-img"> <img src="http://www.urbanui.com/images/faces/face2.jpg" alt=""> <span class="badge badge-success"> </span> </div> <div class="sender"> <p class="Sende-name">Leanne Jones</p> <p class="Sender-message">Can we schedule a call this afternoon?</p> </div> </a> <a class="dropdown-item" href="#"> <div class="sender-img"> <img src="http://www.urbanui.com/images/faces/face3.jpg" alt=""> <span class="badge badge-primary"> </span> </div> <div class="sender"> <p class="Sende-name">Stella</p> <p class="Sender-message">Great presentation the other day. Keep up the good work!</p> </div> </a> <a class="dropdown-item" href="#"> <div class="sender-img"> <img src="http://www.urbanui.com/images/faces/face4.jpg" alt=""> <span class="badge badge-warning"> </span> </div> <div class="sender"> <p class="Sende-name">James Brown</p> <p class="Sender-message">Need the updates of the project at the end of the week.</p> </div> </a> <a href="#" class="dropdown-item view-all">View all</a> </div> </li> </ul> <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas"> <span class="navbar-toggler-icon"></span> </button> </div> </nav> <!-- Navbar ends --> <div class="container-fluid page-body-wrapper"> <div class="row row-offcanvas row-offcanvas-right"> <!-- Sidebar --> <nav class="sidebar sidebar-offcanvas" id="sidebar"> <ul class="nav"> <!--main pages start--> <li class="nav-item nav-category"> <span class="nav-link">Main</span> </li> <li class="nav-item"> <a class="nav-link" data-toggle="collapse" href="#dashboardSubmenu" aria-expanded="false" aria-controls="collapseExample"> <i class="mdi mdi-compass"></i> <span class="menu-title">Dashboard</span> <i class="mdi mdi-chevron-right"></i> </a> <div class="collapse" id="dashboardSubmenu"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link active" href="http://www.urbanui.com/index.html">Dashboard 1</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/dashboard/dashboard-2.html">Dashboard 2</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/dashboard/dashboard-3.html">Dashboard 3</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/dashboard/dashboard-4.html">Dashboard 4</a> </li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" data-toggle="collapse" href="#layoutsSubmenu" aria-expanded="false" aria-controls="collapseExample"> <i class="mdi mdi-view-grid"></i> <span class="menu-title">Layouts</span> <i class="mdi mdi-chevron-right"></i> </a> <div class="collapse" id="layoutsSubmenu"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/layout/sidebar_mini.html">Compact menu</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/layout/sidebar_icon.html">Icon menu</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/layout/sidebar_toggle_display.html">Hidden menu 1</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/layout/sidebar_absolute.html">Hidden menu 2</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/layout/sidebar_fixed.html">Fixed menu</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/layout/horizontal_menu.html">Horizontal menu</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/layout/boxed_layout.html">Boxed</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/layout/rtl_layout.html">Rtl</a> </li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/widgets.html"> <i class="mdi mdi-layers"></i> <span class="menu-title">Widgets</span> </a> </li> <!--main pages end--> <!--sample pages start--> <li class="nav-item nav-category"> <span class="nav-link">Sample pages</span> </li> <li class="nav-item"> <a class="nav-link" data-toggle="collapse" href="#authSubmenu" aria-expanded="false" aria-controls="collapseExample"> <i class="mdi mdi-lock"></i> <span class="menu-title">Authentication</span> <i class="mdi mdi-chevron-right"></i> </a> <div class="collapse" id="authSubmenu"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/samples/register.html"> Register </a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/samples/register-2.html"> Register 2 </a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/samples/login.html"> Login </a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/samples/login-2.html"> Login 2 </a> </li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" data-toggle="collapse" href="#errorSubmenu" aria-expanded="false" aria-controls="collapseExample"> <i class="mdi mdi-alert-circle"></i> <span class="menu-title">Error pages</span> <i class="mdi mdi-chevron-right"></i> </a> <div class="collapse" id="errorSubmenu"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/samples/not-found.html"> 404 </a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/samples/error.html"> 500 </a> </li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" data-toggle="collapse" href="#generalSubmenu" aria-expanded="false" aria-controls="collapseExample"> <i class="mdi mdi-content-copy"></i> <span class="menu-title">General Pages</span> <i class="mdi mdi-chevron-right"></i> </a> <div class="collapse" id="generalSubmenu"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/samples/blank_page.html"> Blank Page </a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/samples/landing-page.html"> Landing Page </a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/samples/search-results.html"> Search Results </a> </li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" data-toggle="collapse" href="#ecommerceSubmenu" aria-expanded="false" aria-controls="collapseExample"> <i class="mdi mdi-cart"></i> <span class="menu-title">E-commerce</span> <i class="mdi mdi-chevron-right"></i> </a> <div class="collapse" id="ecommerceSubmenu"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/samples/invoice.html"> Invoice </a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/samples/pricing.html"> Pricing </a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/samples/orders.html"> Orders </a> </li> </ul> </div> </li> <!--sample pages end--> <!--ui features start--> <li class="nav-item nav-category"> <span class="nav-link">UI Features</span> </li> <li class="nav-item"> <a class="nav-link" data-toggle="collapse" href="#uiBasicSubmenu" aria-expanded="false" aria-controls="collapseExample"> <i class="mdi mdi-laptop"></i> <span class="menu-title">Basic Elements</span> <i class="mdi mdi-chevron-right"></i> </a> <div class="collapse" id="uiBasicSubmenu"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/ui-elements/accordions.html">Accordions</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/ui-elements/buttons.html">Buttons</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/ui-elements/dropdowns.html">Dropdowns</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/ui-elements/modals.html">Modals</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/ui-elements/pagination.html">Pagination</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/ui-elements/progress.html">Progress</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/ui-elements/typography.html">Typography</a> </li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" data-toggle="collapse" href="#uiAdvancedSubmenu" aria-expanded="false" aria-controls="collapseExample"> <i class="mdi mdi-cube"></i> <span class="menu-title">Advanced Elements</span> <i class="mdi mdi-chevron-right"></i> </a> <div class="collapse" id="uiAdvancedSubmenu"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/ui-elements/tabs.html">Tabs</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/ui-elements/clipboard.html">Clipboard</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/ui-elements/dragula.html">Dragula</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/ui-elements/listify.html">Listify</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/ui-elements/context-menu.html">Context Menu</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/ui-elements/colcade.html">Colcade</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/ui-elements/ion-range-slider.html">Ion-range slider</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/ui-elements/no-ui-slider.html">No-ui-slider</a> </li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" data-toggle="collapse" href="#uiPopupSubmenu" aria-expanded="false" aria-controls="collapseExample"> <i class="mdi mdi-forum"></i> <span class="menu-title">Popups</span> <i class="mdi mdi-chevron-right"></i> </a> <div class="collapse" id="uiPopupSubmenu"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/ui-elements/alerts.html">Alerts</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/ui-elements/avgrund.html">Avgrund</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/ui-elements/tour.html">Tour</a> </li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" data-toggle="collapse" href="#uiNotificationsSubmenu" aria-expanded="false" aria-controls="collapseExample"> <i class="mdi mdi-bell"></i> <span class="menu-title">Notifications</span> <i class="mdi mdi-chevron-right"></i> </a> <div class="collapse" id="uiNotificationsSubmenu"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/ui-elements/notifications.html">Toast</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/ui-elements/desktop-notification.html">Desktop Notification</a> </li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" data-toggle="collapse" href="#gallerySubmenu" aria-expanded="false" aria-controls="collapseExample"> <i class="mdi mdi-folder-image"></i> <span class="menu-title">Gallery</span> <i class="mdi mdi-chevron-right"></i> </a> <div class="collapse" id="gallerySubmenu"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/ui-elements/owl-carousel.html">Carousel</a> </li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" data-toggle="collapse" href="#iconsSubmenu" aria-expanded="false" aria-controls="collapseExample"> <i class="mdi mdi-emoticon-neutral"></i> <span class="menu-title">Icons</span> <i class="mdi mdi-chevron-right"></i> </a> <div class="collapse" id="iconsSubmenu"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/ui-elements/font-awesome.html">Font awesome</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/ui-elements/themify.html">Themify</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/ui-elements/flag-icons.html">Flag icons</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/ui-elements/flag-icons.html">Flag icons</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/ui-elements/simple-line-icons.html">Simple Line icons</a> </li> </ul> </div> </li> <!--ui features end--> <!--data rep start--> <li class="nav-item nav-category"> <span class="nav-link">Data representation</span> </li> <li class="nav-item"> <a class="nav-link" data-toggle="collapse" href="#chartsSubmenu" aria-expanded="false" aria-controls="collapseExample"> <i class="mdi mdi-chart-bar"></i> <span class="menu-title">Charts</span> <i class="mdi mdi-chevron-right"></i> </a> <div class="collapse" id="chartsSubmenu"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/charts/chartJs.html">ChartJs</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/charts/flotChart.html">Flot</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/charts/chartist.html">Chartist</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/charts/sparkline.html">Sparkline</a> </li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" data-toggle="collapse" href="#tablesSubmenu" aria-expanded="false" aria-controls="collapseExample"> <i class="mdi mdi-table-large"></i> <span class="menu-title">Tables</span> <i class="mdi mdi-chevron-right"></i> </a> <div class="collapse" id="tablesSubmenu"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/tables/basic-table.html">Basic</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/tables/js-grid.html">Js-grid</a> </li> </ul> </div> </li> <!--data rep end--> <!--forms start--> <li class="nav-item nav-category"> <span class="nav-link">Forms</span> </li> <li class="nav-item"> <a class="nav-link" data-toggle="collapse" href="#formsSubmenu" aria-expanded="false" aria-controls="collapseExample"> <i class="mdi mdi-clipboard-text"></i> <span class="menu-title">Form components</span> <i class="mdi mdi-chevron-right"></i> </a> <div class="collapse" id="formsSubmenu"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/forms/basic-elements.html">Basic elements</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/forms/wizard.html">Wizard</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/forms/x-editable.html">X-editable</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/forms/typeahead.html">Typeahead</a> </li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" data-toggle="collapse" href="#validationSubmenu" aria-expanded="false" aria-controls="collapseExample"> <i class="mdi mdi-checkbox-marked-circle"></i> <span class="menu-title">Validation</span> <i class="mdi mdi-chevron-right"></i> </a> <div class="collapse" id="validationSubmenu"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/forms/form-validation.html">Form validation</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/forms/bt-maxlength.html">Maxlength</a> </li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" data-toggle="collapse" href="#formsAdvancedSubmenu" aria-expanded="false" aria-controls="collapseExample"> <i class="mdi mdi-trophy"></i> <span class="menu-title">Advanced plugins</span> <i class="mdi mdi-chevron-right"></i> </a> <div class="collapse" id="formsAdvancedSubmenu"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/forms/formpickers.html">Form pickers</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/forms/cropper.html">Cropper</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/forms/icheck.html">Icheck</a> </li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" data-toggle="collapse" href="#fileUploadSubmenu" aria-expanded="false" aria-controls="collapseExample"> <i class="mdi mdi-upload"></i> <span class="menu-title">File upload</span> <i class="mdi mdi-chevron-right"></i> </a> <div class="collapse" id="fileUploadSubmenu"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/forms/dropify.html">Dropify</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/forms/dropzone.html">Dropzone</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/forms/jquery-file-upload.html">Jquery upload</a> </li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" data-toggle="collapse" href="#textEditorSubmenu" aria-expanded="false" aria-controls="collapseExample"> <i class="mdi mdi-pencil-box"></i> <span class="menu-title">Text editors</span> <i class="mdi mdi-chevron-right"></i> </a> <div class="collapse" id="textEditorSubmenu"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/forms/summernote.html">Summernote</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/forms/tinymce.html">Tinymce</a> </li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" data-toggle="collapse" href="#codeEditorSubmenu" aria-expanded="false" aria-controls="collapseExample"> <i class="mdi mdi-code-array"></i> <span class="menu-title">Code editors</span> <i class="mdi mdi-chevron-right"></i> </a> <div class="collapse" id="codeEditorSubmenu"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/forms/ace.html">Ace</a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/forms/code-mirror.html">Codemirror</a> </li> </ul> </div> </li> <!--forms end--> <!--Apps start--> <li class="nav-item nav-category"> <span class="nav-link">Applications</span> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/apps/email.html"> <i class="mdi mdi-email-open"></i> <span class="menu-title">E-mail</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/apps/calendar.html"> <i class="mdi mdi-calendar"></i> <span class="menu-title">Calendar</span> </a> </li> <!--Apps end--> <li class="nav-item nav-category"> <span class="nav-link">Documentation</span> </li> <li class="nav-item"> <a class="nav-link" href="http://www.urbanui.com/pages/documentation.html"> <i class="mdi mdi-file"></i> <span class="menu-title">Documentation</span> </a> </li> </ul> </nav> <!-- Sidebar ends --> <div class="content-wrapper"> </div> <footer class="footer"> <div class="container-fluid clearfix"> <span class="float-right"> <a href="#">Titan Admin</a> © 2017 </span> </div> </footer> </div> </div> </div> <script src="http://www.urbanui.com/node_modules/jquery/dist/jquery.min.js"></script> <script src="http://www.urbanui.com/node_modules/popper.js/dist/umd/popper.min.js"></script> <script src="http://www.urbanui.com/node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <script src="http://www.urbanui.com/node_modules/chart.js/dist/Chart.min.js"></script> <script src="http://www.urbanui.com/node_modules/perfect-scrollbar/dist/js/perfect-scrollbar.jquery.min.js"></script> <script src="http://www.urbanui.com/js/off-canvas.js"></script> <script src="http://www.urbanui.com/js/hoverable-collapse.js"></script> <script src="http://www.urbanui.com/js/misc.js"></script> </body> <!-- Mirrored from www.urbanui.com/titan/pages/documentation.html by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 02 Nov 2017 15:41:02 GMT --> </html>

#### Basic UI elements

##### Button with default color

<div class="row"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> </div>

##### Outlined

<div class="row"> <button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-danger">Danger</button> </div>

##### Sizes

<div class="row"> <button type="button" class="btn btn-primary btn-lg">Small</button> <button type="button" class="btn btn-secondary">Medium</button> <button type="button" class="btn btn-success btn-sm">Large</button> </div>

##### Collapsible Group Item #1

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.

##### Collapsible Group Item #2

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.

##### Collapsible Group Item #3

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.
<div id="accordion" role="tablist" aria-multiselectable="true"> <div class="card"> <div class="card-header" role="tab" id="headingOne"> <h5 class="mb-0"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </a> </h5> </div> <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne"> <div class="card-body"> .... </div> </div> </div> <div class="card"> <div class="card-header" role="tab" id="headingTwo"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </a> </h5> </div> <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="card-body"> .... </div> </div> </div> <div class="card"> <div class="card-header" role="tab" id="headingThree"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </a> </h5> </div> <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="card-body"> .... </div> </div> </div> </div>
<div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div>

##### Dropdown Outlined

<div class="btn-group"> <button type="button" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-outline-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-outline-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-outline-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div>

##### Modal title

This is a modal with default size

<div class="modal fade" id="defaultModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>This is a modal with default size</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>

##### Bootstrap Pagination

<nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> </nav>

#### Advanced UI elements

##### Bootstrap Tabs

<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="../index.html">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="../index.html">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>

Clipboard, a modern approach to copy text to clipboard

#### Usage

Add the following script files in <body>

<script src="path-to/node_modules/clipboard/dist/clipboard.min.js"></script>

To create a ,add the following code

<textarea id="clipboardExample2" class="form-control">Hello</textarea> <button type="button" class="btn btn-primary btn-clipboard" data-clipboard-action="copy" data-clipboard-target="#clipboardExample2">Copy</button> <button type="button" class="btn btn-danger btn-clipboard" data-clipboard-action="cut" data-clipboard-target="#clipboardExample2">Cut</button> <script> var clipboard = new Clipboard('.btn-clipboard'); clipboard.on('success', function(e) { console.log(e); }); clipboard.on('error', function(e) { console.log(e); }); </script>

#### Popups

We are using sweetalert in our template to create beautiful alert messages.

#### Usage

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

<link rel="stylesheet" href="path-to/node_modules/sweetalert2/dist/sweetalert2.min.html" />

Add the following script files in <body>

<script src="path-to/node_modules/sweetalert2/dist/sweetalert2.min-2.html"></script>

To create a simple alert, add the following code

<button class="btn btn-primary" onclick="showSwal('basic')">Try me!</button> <script> showSwal = function(type){ if(type === 'basic'){ swal('Any fool can use a computer') } } </script>

#### Notifications

We are using Jquery Toast Plugin in our template for creating toast notifications.

#### Usage

To use Jquery Toast Plugin in your appication, include the following files in <head>

<link rel="stylesheet" href="path-to/node_modules/jquery-toast-plugin/dist/jquery.toast.min.html" />

Add the following script files in <body>

<script src="path-to/node_modules/jquery-toast-plugin/dist/jquery.toast.min-2.html"></script>

To create a simple success toast, add the following code

<button type="button" class="btn btn-success" onclick="showSuccessToast()">Success</button> <script> showSuccessToast = function(){ 'use strict'; $.toast({ heading: 'Success', text: 'And these were just the basic demos! Scroll down to check further details on how to customize the output.', showHideTransition: 'slide', icon: 'success', loaderBg: '#d9534f' }) }; </script>

#### Gallery

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

#### Usage

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

<link rel="stylesheet" href="path-to/node_modules/owl-carousel-2/assets/owl.carousel.min.html" />

Add the following script files in <body>

<script src="path-to/node_modules/owl-carousel-2/owl.carousel.min.html"></script>

To create a carousel, add the following code

<div class="owl-carousel owl-theme nonloop"> <div class="item"><h4>1</h4></div> <div class="item"><h4>2</h4></div> <div class="item"><h4>3</h4></div> <div class="item"><h4>4</h4></div> <div class="item"><h4>5</h4></div> <div class="item"><h4>6</h4></div> <div class="item"><h4>7</h4></div> <div class="item"><h4>8</h4></div> <div class="item"><h4>9</h4></div> <div class="item"><h4>10</h4></div> <div class="item"><h4>11</h4></div> <div class="item"><h4>12</h4></div> </div> <script> $('.owl-carousel').owlCarousel(); </script>

#### Charts

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

###### Usage

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

<link rel="stylesheet" href="path-to/node_modules/perfect-scrollbar/dist/css/perfect-scrollbar.min.html" />

and the following script files in <body>

<script src="path-to/node_modules/chart.js/dist/Chart.min.html"></script>

To create a simple chart, add the following code

<canvas id="lineChart" style="height:250px"></canvas> <script> var data = { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }; var options = { scales: { yAxes: [{ ticks: { beginAtZero:true } }] }, legend: { display: false }, elements: { point: { radius: 0 } } }; if($("#lineChart").length) { var lineChartCanvas = $("#lineChart").get(0).getContext("2d"); var lineChart = new Chart(lineChartCanvas, { type: 'line', data: data, options: options }); } </script>

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>

<script src="path-to/node_modules/flot/jquery.flot.html"></script> <script src="path-to/node_modules/flot/jquery.flot.resize.html"></script>

To create a simple chart, add the following code

<div class="float-chart-container"> <div id="placeholder-basic" class="float-chart"></div> </div> <script> $(function() { var d1 = []; for (var i = 0; i < Math.PI * 2; i += 0.25) { d1.push([i, Math.sin(i)]); } var d2 = []; for (var i = 0; i < Math.PI * 2; i += 0.25) { d2.push([i, Math.cos(i)]); } var d3 = []; for (var i = 0; i < Math.PI * 2; i += 0.1) { d3.push([i, Math.tan(i)]); } $.plot("#placeholder-basic-option", [{ label: "sin(x)", data: d1 }, { label: "cos(x)", data: d2 }, { label: "tan(x)", data: d3 } ], { series: { lines: { show: true }, points: { show: true } }, xaxis: { ticks: [ 0, [Math.PI / 2, "\u03c0/2"], [Math.PI, "\u03c0"], [Math.PI * 3 / 2, "3\u03c0/2"], [Math.PI * 2, "2\u03c0"] ] }, yaxis: { ticks: 10, min: -2, max: 2, tickDecimals: 3 }, grid: { backgroundColor: { colors: ["#fff", "#eee"] }, borderWidth: { top: 1, right: 1, bottom: 2, left: 2 } } }); }); </script>

Chartist creates simple responsive charts

#### Usage

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

<link rel="stylesheet" href="path-to/bower_components/chartist/dist/chartist.min.html" />

Add the following script files in <body>

<script src="path-to/bower_components/chartist/dist/chartist.min-2.html"></script>

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

<div class="ct-chart ct-perfect-fourth" id="ct-chart-line"></div> <script> new Chartist.Line('#ct-chart-line', { labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'], series: [ [12, 9, 7, 8, 5], [2, 1, 3.5, 7, 3], [1, 3, 4, 5, 6] ] }, { fullWidth: true, chartPadding: { right: 40 } }); </script>

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 appication, add the following script files in <body>

<script src="http://www.urbanui.com/node_modules/jquery-sparkline/jquery.sparkline.min.js"></script>

To create a line chart using sparkline, add the following code

<div id="sparkline-line-chart"></div> <script> $("#sparkline-line-chart").sparkline([5,6,7,9,9,5,3,2,2,4,6,7], { type: 'line', width: '100%', height: '100%' }); </script>

#### Tables

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

<table class="table"> <thead> <tr class=""> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td scope="row">1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td scope="row">2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td scope="row">3</td> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table>

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

#### Usage

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

<link rel="stylesheet" href="path-to/bower_components/jsgrid/dist/jsgrid.min.html" /> <link rel="stylesheet" href="path-to/bower_components/jsgrid/dist/jsgrid-theme.min.html" />

Add the following script files in <body>

<script src="path-to/bower_components/jsgrid/dist/jsgrid.min-2.html"></script>

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

<div id="js-grid"></div> <script> $("#js-grid").jsGrid({ height: "500px", width: "100%", filtering: true, editing: true, inserting: true, sorting: true, paging: true, autoload: true, pageSize: 15, pageButtonCount: 5, deleteConfirm: "Do you really want to delete the client?", controller: db, fields: [{ name: "Name", type: "text", width: 150 }, { name: "Age", type: "number", width: 50 }, { name: "Address", type: "text", width: 200 }, { name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" }, { name: "Married", type: "checkbox", title: "Is Married", sorting: false }, { type: "control" } ] }); </script>

#### Icons

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

#### Usage

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

<link rel="stylesheet" href="path-to/node_modules/font-awesome/css/font-awesome.min.html" />

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

<i class="fa fa-address-book">

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

#### Usage

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

<link rel="stylesheet" href="path-to/bower_components/themify-icons/css/themify-icons.html" />

To generate an icon, add the following code

<i class="ti-arrow-up"></i>

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

#### Usage

To use simple line icons in your appication, include the following files in <head>

<link rel="stylesheet" href="path-to/node_modules/flag-icon-css/css/flag-icon.min.html"/>

To generate an icon, add the following code

<i class="flag-icon flag-icon-ad" title="ad" id="ad"></i>

#### Maps

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

<link rel="stylesheet" href="path-to/node_modules/jqvmap/dist/jqvmap.min.html" />

Add the following script files in <body>

<script src="path-to/node_modules/jqvmap/dist/jquery.vmap.min.html"></script>

To create a simple map, add the following code

<div id="vmap" class="vector-map" style="width: 100%; height:500px"></div> <script> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8 }); } $(function() { jQuery('#vmap').vectorMap({ map: 'world_en' }); }); </script>

#### Forms

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

<form class="forms-sample"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control p-input" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted text-success"><span class="fa fa-info mt-1"></span> We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control p-input" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleTextarea">Example textarea</label> <textarea class="form-control p-input" id="exampleTextarea" rows="3"></textarea> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp"> <small id="fileHelp" class="form-text text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small> </div> <fieldset class="form-group"> <legend class="mb-4 mt-5">Radio buttons</legend> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option one is this and that—be sure to include why it's great </label> </div> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one </label> </div> <div class="form-check disabled"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled> Option three is disabled </label> </div> </fieldset> <div class="form-check col-12"> <label class="form-check-label"> <input type="checkbox" class="form-check-input"> Check me out </label> </div> <div class="col-12"> <button type="submit" class="btn btn-primary">Submit</button> </div> </form>

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

#### Usage

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

<script src="path-to/bower_components/jquery.steps/build/jquery.steps.min.html"></script>

The following code generates a simple form wizard

<form id="example-form" action="#"> <div> <h3>Account</h3> <section> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputPassword1">Confirm Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Confirm password"> </div> </section> <h3>Profile</h3> <section> <div class="form-group"> <label for="exampleInputEmail1">First name</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter first name"> </div> <div class="form-group"> <label>Last name</label> <input type="password" class="form-control" placeholder="Last name"> </div> <div class="form-group"> <label>Profession</label> <input type="password" class="form-control" placeholder="Profession"> </div> </section> <h3>Comments</h3> <section> <div class="form-group"> <label>Comments</label> <textarea class="form-control" rows="3"></textarea> </div> </section> <h3>Finish</h3> <section> <div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input"> I agree terms and conditions </label> </div> </section> </div> </form> <script> var form = $("#example-form"); form.children("div").steps({ headerTag: "h3", bodyTag: "section", transitionEffect: "slideLeft", onFinished: function (event, currentIndex) { alert("Submitted!"); } }); </script>

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 appication, include the following files in <head>

<link rel="stylesheet" href="path-to/bower_components/x-editable/dist/bootstrap3-editable/css/bootstrap-editable.html" />

Add the following script files in <body>

<script src="path-to/bower_components/x-editable/dist/bootstrap3-editable/js/bootstrap-editable.html"></script>

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

<a href="#" id="username" data-type="text" data-pk="1">awesome</a> <script> $.fn.editable.defaults.mode = 'inline'; $.fn.editableform.buttons = '<button type="submit" class="btn btn-primary btn-sm editable-submit">' + '<i class="fa fa-fw fa-check"></i>' + '</button>' + '<button type="button" class="btn btn-default btn-sm editable-cancel">' + '<i class="fa fa-fw fa-times"></i>' + '</button>'; $('#username').editable({ type: 'text', pk: 1, name: 'username', title: 'Enter username' }); </script>

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

#### Usage

To use typeahead.js in your appication, include the following files in <body>

<script src="path-to/bower_components/typeahead.js/dist/typeahead.bundle.min.html"></script>

A sample typeahead can be generated as below

<div id="typeahead sample"> <input class="typeahead" type="text" placeholder="States of USA"> </div> <script> //Define substring matcher function var substringMatcher = function (strs) { return function findMatches(q, cb) { var matches, substringRegex; // an array that will be populated with substring matches matches = []; // regex used to determine if a string contains the substring `q` substrRegex = new RegExp(q, 'i'); // iterate through the pool of strings and for any string that // contains the substring `q`, add it to the `matches` array $.each(strs, function (i, str) { if (substrRegex.test(str)) { matches.push(str); } }); cb(matches); }; }; //dataset var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming' ]; //Initialisation $('#typeahead-sample .typeahead').typeahead({ hint: true, highlight: true, minLength: 1 }, { name: 'states', source: substringMatcher(states) }); </script>

#### Form validation

We are using Jquery validation for simple clientside form validation.

#### Usage

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

<script src="path-to/bower_components/chartist/dist/chartist.min-2.html"></script>

The following code shows validation of a simple form

<form class="cmxform" id="commentForm" method="get" action="#"> <fieldset> <div class="form-group"> <label for="cname">Name (required, at least 2 characters)</label> <input id="cname" class="form-control" name="name" minlength="2" type="text" required> </div> <div class="form-group"> <label for="cemail">E-Mail (required)</label> <input id="cemail" class="form-control" type="email" name="email" required> </div> <div class="form-group"> <label for="curl">URL (optional)</label> <input id="curl" class="form-control" type="url" name="url"> </div> <div class="form-group"> <label for="ccomment">Your comment (required)</label> <textarea id="ccomment" class="form-control" name="comment" required></textarea> </div> <input class="btn btn-primary" type="submit" value="Submit"> </fieldset> </form> <script> $.validator.setDefaults({ submitHandler: function() { alert("submitted!"); } }); $(function() { // validate the comment form when it is submitted $("#commentForm").validate({ errorPlacement: function(label, element) { label.addClass('text-danger'); label.insertAfter(element); }, highlight: function(element, errorClass) { $(element).parent().addClass('has-danger') $(element).addClass('form-control-danger') } }); }); </script>

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>

<script src="path-to/node_modules/bootstrap-maxlength/bootstrap-maxlength.min.html"></script>

To create a Maxlength input, add the following code

<input class="form-control" maxlength="25" name="defaultconfig" id="defaultconfig" type="text"> <script> $('#defaultconfig').maxlength(); </script>

#### Advanced form elements

Icheck is a set of highly customizable checkboxes and radio buttons.

#### Usage

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

<link rel="stylesheet" href="path-to/node_modules/icheck/skins/all.html" />

Add the following script files in <body>

<script src="path-to/node_modules/icheck/icheck.min.html"></script>

The following code gives a minimal skin checkbox and radio using icheck.

<div class="icheck"> <input tabindex="5" type="checkbox" id="minimal-checkbox-1"> <label for="minimal-checkbox-1">Checkbox 1</label> </div> <div class="icheck"> <input tabindex="7" type="radio" id="minimal-radio-1" name="minimal-radio"> <label for="minimal-radio-1">Radio button 1</label> </div> <script> $('.icheck input').iCheck({ checkboxClass: 'icheckbox_minimal-blue', //You can change the skin color as needed radioClass: 'iradio_minimal', increaseArea: '20%' }); </script>

Cropper is a simple jQuery image cropping plugin.

#### Usage

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

<link rel="stylesheet" href="path-to/node_modules/cropper/dist/cropper.min.html" />

Add the following script files in <body>

<script src="path-to/node_modules/cropper/dist/cropper.min-2.html"></script>

To crop an image using cropper, add the following code

<div class="cropper-wrapper"> <img id="cropperExample" src="http://www.urbanui.com/images/profile.jpg"> </div> <script> $('#cropperExample').cropper({ aspectRatio: 16 / 9 }); </script>

#### Form pickers

jQuery Clock Picker is a clock-style timepicker for Bootstrap.

#### Usage

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

<link rel="stylesheet" href="path-to/bower_components/clockpicker/dist/jquery-clockpicker.min.html" />

Add the following script files in <body>

<script src="path-to/bower_components/clockpicker/dist/jquery-clockpicker.min-2.html"></script>

To create a clock picker,add the following code

<div class="input-group clockpicker"> <input type="text" class="form-control" value="09:30"> <span class="input-group-addon"> <span class="glyphicon glyphicon-time"></span> </span> </div> <script> $('.clockpicker').clockpicker(); </script>

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

#### Usage

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

<link rel="stylesheet" href="path-to/node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.html" />

Add the following script files in <body>

<script src="path-to/node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.html"></script>

To create a color picker,add the following code

<div class="input-group date datepicker"> <input type="text" class="form-control"> <div class="input-group-addon"> <span class="fa fa-calendar"></span> </div> </div> <script> $('.datepicker').datepicker(); </script>

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

#### Usage

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

<link rel="stylesheet" href="path-to/node_modules/jquery-asColorPicker/dist/css/asColorPicker.min.html" />

Add the following script files in <body>

<script src="path-to/node_modules/jquery-asColor/dist/jquery-asColor.min.html"></script> <script src="path-to/node_modules/jquery-asColorPicker/dist/jquery-asColorPicker.min.html"></script> <script src="path-to/node_modules/jquery-asGradient/dist/jquery-asGradient.min.html"></script> //optional

To create a color picker,add the following code

<input type='text' class="color-picker" value="#ffe74c" /> <script> $('.color-picker').asColorPicker() </script>

#### File upload

Dropify is a simple drag n drop file upload.

#### Usage

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

<link rel="stylesheet" href="path-to/node_modules/dropify/dist/css/dropify.min.html">

Add the following script files in <body>

<script src="path-to/node_modules/dropify/dist/js/dropify.min.html"></script>

To create a Dropify file upload,add the following code

<input type="file" class="dropify"/> <script> $('.dropify').dropify(); </script>

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

#### Usage

Add the following script files in <body>

<script src="path-to/node_modules/dropzone/dist/dropzone.html"></script>

To create a Dropzone file upload, add the following code

<form action="http://www.urbanui.com/file-upload" class="dropzone" id="my-awesome-dropzone"></form> <script> $("#my-awesome-dropzone").dropzone({ url: "/file/post" }); </script>

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 appication, include the following files in <head>

<link rel="stylesheet" href="path-to/node_modules/jquery-file-upload/css/uploadfile.html">

Add the following script files in <body>

<script src="path-to/node_modules/jquery-file-upload/js/jquery.uploadfile.min.html"></script>

To create a Jquery file upload,add the following code

<div class="file-upload-wrapper"> <div id="fileuploader">Upload</div> </div> <script> $("#fileuploader").uploadFile({ url: "YOUR_FILE_UPLOAD_URL", fileName: "myfile" }); </script>

#### Text editors

Tinymce is a full featured web editing tool.

#### Usage

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

<script src="path-to/node_modules/tinymce/tinymce.min.html"></script>

To create an editor using tinymce, add the following code

<textarea id='tinyMceExample'></textarea> <script> tinymce.init({ selector: '#tinyMceExample', height: 500, theme: 'modern', plugins: [ 'advlist autolink lists link image charmap print preview hr anchor pagebreak', 'searchreplace wordcount visualblocks visualchars code fullscreen', 'insertdatetime media nonbreaking save table contextmenu directionality', 'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc help' ], toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', toolbar2: 'print preview media | forecolor backcolor emoticons | codesample help', image_advtab: true, templates: [{ title: 'Test template 1', content: 'Test 1' }, { title: 'Test template 2', content: 'Test 2' } ], content_css: [ '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i', 'http://www.tinymce.com/css/codepen.min.css' ] }); </script>

Summernote is a super simple WYSIWYG Editor.

#### Usage

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

<link rel="stylesheet" href="path-to/node_modules/summernote-bootstrap4/dist/summernote.html" />

Add the following script files in <body>

<script src="path-to/node_modules/summernote-bootstrap4/dist/summernote.min.html"></script>

To create a summernote editor, add the following code

<div id="summernoteExample"></div> <script> $('#summernoteExample').summernote({ height: 300, tabsize: 2 }); </script>

#### Code editors

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 appication, include the following files in <body>

<script src="path-to/bower_components/ace-builds/src/ace.html"></script> <script src="path-to/bower_components/ace-builds/src-min/mode-javascript.html"></script> <script src="path-to/bower_components/ace-builds/src-min/theme-chaos.html"></script><!--Choose any theme you wish-->

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

<div id="aceExample" class="ace-editor"> var x = add(4, 3); // Function is called, return value will end up in x function add(a, b) { return a + b; // Function returns the sum of a and b } var y = mul(4, 3); // Function is called, return value will end up in y function add(a, b) { return a * b; // Function returns the product of a and b } </div> <script> var editor = ace.edit("aceExample"); editor.setTheme("ace/theme/chaos"); //set theme editor.getSession().setMode("ace/mode/javascript"); //set mode document.getElementById('aceExample').style.fontSize='1rem'; //styling </script>

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 appication, include the following files in <head>

<link rel="stylesheet" href="path-to/node_modules/codemirror/lib/codemirror.html" /> <link rel="stylesheet" href="path-to/node_modules/codemirror/theme/ambiance.html" /><!--Choose a theme you wish-->

Add the following script files in <body>

<script src="path-to/node_modules/codemirror/lib/codemirror-2.html"></script> <script src="path-to/node_modules/codemirror/mode/javascript/javascript.html"></script>

Here is an example of an editor using CodeMirror.

<textarea rows="4" cols="50" name="code-editable" id="code-editable"> <script> var x = 3; var y = 4; var z = x + y; </script> </textarea> <script> var editableCodeMirror = CodeMirror.fromTextArea(document.getElementById('code-editable'), { mode: "javascript", theme: "ambiance", lineNumbers: true }); </script>

#### Applications

We provide you with a sample template for inbox that can help you organize your messages.

#### Usage

To use our custom made inbox application, add the following script files in <body>

<script src="path-to/js/mail.html"></script>

The markup for our custom inbox is given below. Insert this code as our content-wrapper inside the basic template structure provided.

<div class="content-wrapper p-0"> <!-- MAIL BODY STARTS HERE --> <div class="email-wrapper wrapper col-12"> <div class="row"> <div class="mail-sidebar col-lg-3 col-md-3 col-sm-12 col-12"> <div class="menu-bar"> <span class="logo">Email</span> <!-- SIDE MENU END --> <ul class="menu-items"> <li class="compose"><a href="#"><i class="flaticon-draw"></i> Compose</a></li> <li class="active"><a href="#"><i class="flaticon-chat-3"></i> Inbox</a><span class="badges green">8</span></li> <li><a href="#"><i class="flaticon-email"></i> Sent</a></li> <li><a href="#"><i class="flaticon-work-tray"></i> Draft</a><span class="badges orange">14</span></li> <li><a href="#"><i class="flaticon-outbox"></i> Outbox</a><span class="badges red">3</span></li> <li><a href="#"><i class="flaticon-star"></i> Starred</a></li> <li><a href="#"><i class="flaticon-garbage"></i> Trash</a></li> </ul> <!-- CHAT LIST --> <div class="col-12"> <div class="online-status d-flex justify-content-between align-items-center"> <p class="chat">Chats</p> <span class="status offline online"></span> </div> </div> <ul class="mail-chats"> <li class="chat-persons"> <a href="#"> <span class="pro-pic"><img src="http://www.urbanui.com/images/faces/face1.jpg" alt=""></span> <div class="user"> <p class="u-name">David</p> <p class="u-designation">Python Developer</p> </div> </a> </li> <!-- list person --> <li class="chat-persons"> <a href="#"> <span class="pro-pic"><img src="http://www.urbanui.com/images/faces/face2.jpg" alt=""></span> <div class="user"> <p class="u-name">Stella Johnson</p> <p class="u-designation">SEO Expert</p> </div> </a> </li> <!-- list person --> <li class="chat-persons"> <a href="#"> <span class="pro-pic"><img src="http://www.urbanui.com/images/faces/face3.jpg" alt=""></span> <div class="user"> <p class="u-name">Marina Michel</p> <p class="u-designation">Business Development</p> </div> </a> </li> <!-- list person --> <li class="chat-persons"> <a href="#"> <span class="pro-pic"><img src="http://www.urbanui.com/images/faces/face4.jpg" alt=""></span> <div class="user"> <p class="u-name">Edward Fletcher</p> <p class="u-designation">UI/UX Designer</p> </div> </a> </li> <!-- list person --> <li class="chat-persons"> <a href="#"> <span class="pro-pic"><img src="http://www.urbanui.com/images/faces/face5.jpg" alt=""></span> <div class="user"> <p class="u-name">Sophia</p> <p class="u-designation">Business Development</p> </div> </a> </li> <!-- list person --> <li class="chat-persons"> <a href="#"> <span class="pro-pic"><img src="http://www.urbanui.com/images/faces/face6.jpg" alt=""></span> <div class="user"> <p class="u-name">Gabriel</p> <p class="u-designation">UI/UX Designer</p> </div> </a> </li> <!-- list person --> </ul> <!-- CHAT --> <!-- SIDE MENU END --> </div> </div> <!-- side bar ends --> <div class="mail-body col-lg-9 col-md-9 col-sm-12 col-12 pt-5"> <!-- HEADER --> <div class="row body-header"> <div class="container w-100"> <div class="header-top row pl-5"> <div class="col-8 search-wrapper wrapper d-flex"> <input class="form-control mail-search" type="search" placeholder="Search mail" id="Mail-rearch"> <input class="btn" type="submit" value="Find"> </div> </div> <div class="checkbox-wrapper selectall-checkbox-btn"> <input class="checkbox-dib" type="checkbox" id="select-all-check-box"> <label for="select-all-check-box"> Select all</label> <i class="flaticon-garbage"></i> </div> </div> </div> <!-- HEADER --> <div class="row mail-container"> <div class="col-12 p-0"> <div class="mail-list"> <div class="checkbox-wrapper label-clone"> <input class="checkbox-dib" type="checkbox" id="box-1"> </div> <div class="content"> <p class="sender-name">David</p> <p class="message_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est quod accusamus tempore perspiciatis sint odit doloremque hic reiciendis, vel illum.</p> </div> <div class="details"> <p class="date">3 Hr ago</p> <i class="flaticon-star"></i> </div> </div> </div> <!-- mail list ends --> <div class="col-12 p-0"> <div class="mail-list new_mail"> <div class="checkbox-wrapper label-clone"> <input class="checkbox-dib" type="checkbox" id="box-2"> </div> <div class="content"> <p class="sender-name">Microsoft</p> <p class="message_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est quod accusamus tempore perspiciatis sint odit doloremque hic reiciendis, vel illum.</p> </div> <div class="details"> <p class="date">8 Hr ago</p> <i class="flaticon-star favorite"></i> </div> </div> </div> <!-- mail list ends --> <div class="col-12 p-0"> <div class="mail-list"> <div class="checkbox-wrapper label-clone"> <input class="checkbox-dib" type="checkbox" id="box-3"> </div> <div class="content"> <p class="sender-name">Sophia</p> <p class="message_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est quod accusamus tempore perspiciatis sint odit doloremque hic reiciendis, vel illum.</p> </div> <div class="details"> <p class="date">2 Days ago</p> <i class="flaticon-star"></i> </div> </div> </div> <!-- mail list ends --> <div class="col-12 p-0"> <div class="mail-list"> <div class="checkbox-wrapper label-clone"> <input class="checkbox-dib" type="checkbox" id="box-4"> </div> <div class="content"> <p class="sender-name">Stella</p> <p class="message_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est quod accusamus tempore perspiciatis sint odit doloremque hic reiciendis, vel illum.</p> </div> <div class="details"> <p class="date">7 Days ago</p> <i class="flaticon-star"></i> </div> </div> </div> <!-- mail list ends --> <div class="col-12 p-0"> <div class="mail-list"> <div class="checkbox-wrapper label-clone"> <input class="checkbox-dib" type="checkbox" id="box-5"> </div> <div class="content"> <p class="sender-name">David</p> <p class="message_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est quod accusamus tempore perspiciatis sint odit doloremque hic reiciendis, vel illum.</p> </div> <div class="details"> <p class="date">13/8/17</p> <i class="flaticon-star favorite"></i> </div> </div> </div> <!-- mail list ends --> <div class="col-12 p-0"> <div class="mail-list"> <div class="checkbox-wrapper label-clone"> <input class="checkbox-dib" type="checkbox" id="box-6" checked> </div> <div class="content"> <p class="sender-name">Daniel Russell</p> <p class="message_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est quod accusamus tempore perspiciatis sint odit doloremque hic reiciendis, vel illum.</p> </div> <div class="details"> <p class="date">13/8/17</p> <i class="flaticon-star"></i> </div> </div> </div> <!-- mail list ends --> <div class="col-12 p-0"> <div class="mail-list"> <div class="checkbox-wrapper label-clone"> <input class="checkbox-dib" type="checkbox" id="box-7"> </div> <div class="content"> <p class="sender-name">Sarah Graves</p> <p class="message_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est quod accusamus tempore perspiciatis sint odit doloremque hic reiciendis, vel illum.</p> </div> <div class="details"> <p class="date">10/8/17</p> <i class="flaticon-star"></i> </div> </div> </div> <!-- mail list ends --> <div class="col-12 p-0"> <div class="mail-list"> <div class="checkbox-wrapper label-clone"> <input class="checkbox-dib" type="checkbox" id="box-8"> </div> <div class="content"> <p class="sender-name">John Doe</p> <p class="message_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est quod accusamus tempore perspiciatis sint odit doloremque hic reiciendis, vel illum.</p> </div> <div class="details"> <p class="date">8/8/17</p> <i class="flaticon-star"></i> </div> </div> </div> <!-- mail list ends --> <div class="col-12 p-0"> <div class="mail-list"> <div class="checkbox-wrapper label-clone"> <input class="checkbox-dib" type="checkbox" id="box-9"> </div> <div class="content"> <p class="sender-name">Bruno</p> <p class="message_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est quod accusamus tempore perspiciatis sint odit doloremque hic reiciendis, vel illum.</p> </div> <div class="details"> <p class="date">3/8/17</p> <i class="flaticon-star favorite"></i> </div> </div> </div> <!-- mail list ends --> </div> </div> <!-- MAIL BODY --> </div> <!-- ROW ENDS --> </div> <!-- WRAPPER-ENDS --> <!-- MAIL BODY ENDS HERE--> </div>

FullCalendar is a customizable and open source JavaScript event calendar.

#### Usage

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

<link rel="stylesheet" href="path-to/node_modules/fullcalendar/dist/fullcalendar.min.html" />

Add the following script files in <body>

<script src="path-to/node_modules/fullcalendar/dist/fullcalendar.min-2.html"></script>

To create a calendar, add the following code

<div id="calendar"></div> <script> $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,basicWeek,basicDay' }, defaultDate: '2017-07-12', navLinks: true, // can click day/week names to navigate views editable: true, eventLimit: true, // allow "more" link when too many events events: [{ title: 'All Day Event', start: '2017-07-01' }, { title: 'Long Event', start: '2017-07-07', end: '2017-07-10' }, { id: 999, title: 'Repeating Event', start: '2017-07-09T16:00:00' }, { id: 999, title: 'Repeating Event', start: '2017-07-16T16:00:00' }, { title: 'Conference', start: '2017-07-11', end: '2017-07-13' }, { title: 'Meeting', start: '2017-07-12T10:30:00', end: '2017-07-12T12:30:00' }, { title: 'Lunch', start: '2017-07-12T12:00:00' }, { title: 'Meeting', start: '2017-07-12T14:30:00' }, { title: 'Happy Hour', start: '2017-07-12T17:30:00' }, { title: 'Dinner', start: '2017-07-12T20:00:00' }, { title: 'Birthday Party', start: '2017-07-13T07:00:00' }, { title: 'Click for Google', url: 'http://google.com/', start: '2017-07-28' } ] }) </script>