Thank you for purchase.

Thank you for purchasing the theme. This document is intended for information about the theme setup and theme.

Get Started

1) NodeJS

Download and install the NodeJS package according to your operating system.

Run the following commands in the Command Line (CMD) to check if it is installed.

node --version
npm --version

2) Install Gulp

NodeJS (NPM) must be installed before installing gulp. Please check if it is installed.
Install gulp using the command below.

npm install --global gulp

3) Run Tovvl

In order to run the theme and install add-ons in package.json, you will need to go to the root folder where the theme is located. From the command line, go to /template and run the following command.. 

npm install

You can run the following command and see the preview.

gulp

File Structure

This section contains information about the Tovvl file structure.


tovvl/
|——template
|  |——app/
|  |  |——assets/
|  |  |  |——js/                         -- core js files / chat.popup.js, app.todo.js etc.
|  |  |  |  |——main.js                  
|  |  |  |  |——...
|  |  |  |——css/
|  |  |  |  |——tovvl.css                -- main style light
|  |  |  |  |——tovvl.dark.css		-- dark style
|  |  |  |  |——...
|  |  |  |——less/
|  |  |  |  |——app/                     -- chat, inbox, to-do app.
|  |  |  |  |——forms/                   -- inputs, controls etc.
|  |  |  |  |——helpers/                 -- variables.less and helper.less
|  |  |  |  |——page/                    -- login, register, calendar, invoice, profile etc.
|  |  |  |  |——partials/		-- header, menu, footer, widgets etc.
|  |  |  |  |——plugins/                 -- 3rd vendors plugin styles.
|  |  |  |  |——skins/			-- dark skin style.
|  |  |  |  |——uikit/			-- alerts, buttons, modals, table etc.
|  |  |  |  |——utility/			-- colors, sizing, spacing etc.
|  |  |  |  |——tovvl.less               -- main less file
|  |  |  |—-vendor/                     -- List of 3rd party vendor's plugins.
|  |  |  |—-images/
|  |  |——index.html
|  |——gulpfile.js                       
|  |——package.json			-- npm package manager config file.
|  |——package-lock.json

LESS Structure

Dark / Light skin and general color settings can be made from below.

less

You can edit general typography settings of the template.

less

Header Structure

<div class="header">
   <div class="container">
      <div class="header-left">...</div>
      <div class="header-middle">...</div>
      <div class="header-right">...</div>
   </div>
</div>
Class Description
.header Parent class to create a header field.
.container
.container-fluid		 .container has one fixed width for each screen size;
.container-fluid expands to fill the available width.
.header-left Wrapper element class in the left of header. (logo)
.header-middle Wrapper element class in the center of header. (search)
.header-right Wrapper element class in the right of header. (messsage, notification, user)

Menu Structure

The structure of the main menu is shown below. This menu is also not shown on mobile devices.

<div class="main-menu"><!-- main menu-->
   <div class="container">
      <ul class="nav">
         <li class="nav-item sub-item">
            <a href="#" class="nav-link sub-item-toggle">Tovvl Menu</a>
            <div class="sub-menu">
               <ul>
                  <li><a href="#">Sub Menu</a></li>
                  <li><a href="#">....</a></li>
               </ul>
            </div>
         </li>
      </ul>
   </div>
</div><!-- end / main menu-->
Class Description
.main-menu The top element wrapper the navigation bar.
.container
.container-fluid		 .container has one fixed width for each screen size;
.container-fluid expands to fill the available width.
.nav-item If the parent element that covers the menu link add .active class the color of the link will change.
.sub-item-toggle The class used to trigger opening the submenu in the navigation bar.
.sub-menu Wrapper for sub-menu items.

Mobile Menu

The mobile menu appears on tablets and mobile devices. The structure is shown below.

<!-- mobile menu -->
<div class="mobile-menu">
   <!-- mobil menu header -->
   <div class="mm-header">
      <div class="mm-logo">
         <div class="logo logo-type">
            <a href="#" class="text-white">Tovvl</a>
         </div>
      </div>

      <div class="mm-buttons">
         <a href="#" class="mm-trigger"><!-- mobile menu trigger -->
            <span></span>
            <span></span>
            <span></span>
         </a>
      </div>
   </div> <!-- END / mobil menu header -->

   <!-- mobile menu body -->
   <div class="mm-body">
      <ul class="nav">
         <li class="nav-item sub-item active">
            <a href="#" class="sub-item-toggle nav-link">Tovvl Menu</a>
            <div class="sub-menu">
               <ul>
                  <li><a href="#">Sub Menu</a></li>
                  <li><a href="#">....</a></li>
               </ul>
            </div>
         </li>
      </ul>
   </div><!-- END / mobile menu body -->
</div><!-- end / mobile menu -->
Class Description
.mobile-menu Wraps the mobile navigation bar.
.mm-header Wraps the items inside the top of the navigation bar.
.mm-trigger Triggers the mobile navigation bar to turn on and off.
.mm-body The mobile navigation bar covers the menu items that will appear after opening.

Dark Skin

To use the dark mode of the template, just add the dark template style under the main style template (tovvl.css).

<link rel="stylesheet" href="./assets/css/tovvl.css"> <!-- tovv main style -->
<link rel="stylesheet" href="./assets/css/tovvl.dark.css"> <!-- dark skin style -->
dark skin

Utilities

Helper classes are classes that are used instead of css repeating any item. All helper classes are indicated in the template.
Click to view

Colors

Class Value
class="bg-[value]" primary | success | danger | warning | info | dark | secondary | purple | cyan | pink | brown | light
Class Value
class="bg-gray-[value]" 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Icons

Name Usage
Font Awesome <i class="fas fa-search"></i>
Feather <i data-feather="activity"></i>
Crypto icons <i class="cc BTC"></i>

Change Log

16.02.2019 - Initial Release (v1.0)

References

TITLE
Bootstrap
Bootstrap Datapicker
Bootstrap tagsinput
Bootstrap Wizard
ChartJs
Cryptocoins
Datatables
Dropify
Dropzone
Feather
Flot Chart
Font Awesome
Full Calendar
Input Mask
Ion Range Slider
jQuery
jQuery.Circle-progress
jQuery.Multi-select
jQuery.Toast
jQuery.Validate
jQVMAP
Editable-table
Moment
Morris
Peity
Perfect Scrollbar
Popper
Prism JS
Select2
Sparkline
Raphael
Summernote
Sweet Alert
X-editable