SIDEBAR SKINS

HEADER SKINS

Introduction

Thank you for purchasing Victory Admin, 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 Victory Admin 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 theme. Most of the template example pages contain quick tips on how to create or use a component which can be really helpful when you need to create something on the fly.

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

About Victory Admin

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

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

Victory Admin 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 the template extensively the template allows you to do so! The Customization section will get you initiated on this.

The downloaded package will have the following structure.

The vendor files are added as npm 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 folder!.

To do this, you must have node and npm are installed in your computer.

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

If you have installed them, just checkout to the root folder and run the following command.

You can see that two folders node_modules is generated in your root folder with all vendor files!

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

  • Gulp - for task management.

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

This installs Gulp globally to your machine.

The other thing that gulp requires, which, is really what does all the work, is the gulpfile.js. In this file you set up all of your tasks that you will run.

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

Compilation

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.

Layout Class
Compact menu sidebar-mini
Icon menu sidebar-icon-only
Hidden menu (togglable) sidebar-hidden
Absolute menu sidebar-absolute, sidebar-hidden
Horizontal menu horizontal-menu (However, mega-menu requires different html. Refer pages/layout/horizontal-menu.html)
Boxed layout boxed-layout
Rtl layout rtl

Basic structure

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

SIDEBAR SKINS

HEADER SKINS

Copyright © 2017 UrbanUI. All rights reserved. Hand-crafted & made with

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>

and the following script files in <body>

To create a simple chart, add the following code

Maps

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

Usage

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

Add the following script files in <body>

To create a simple map, add the following code

Tabs

PSW Tabs Jqury plugin.

Usage

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

Add the following script files in <body>

To create Tab, add the following code

Our first tab
Our second tab
Our third tab

Advanced Form Elements

Jquery Knob is a Nice, downward compatible, touchable, jQuery dial.

Usage

Add the following script files in <body>

To create a knob, add the following code

Forms

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

  We'll never share your email with anyone else.
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
Radio buttons

Advanced form elements

Jquery Knob is 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 MaxLength uses a Twitter Bootstrap label to show a visual feedback to the user about the maximum length of the field where the user is inserting text. Uses the HTML5 attribute "maxlength" to work.

Usage

Add the following script files in <body>

To create a Maxlength input, add the following code

Grid

Colcade is a simple Lightweight masonry layout

Usage

Add the following script files in <body>

To create a responsive, add the following code

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>

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

Tables

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

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

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

Media

Light Galary is a customizable, modular, responsive, lightbox gallery plugin for jQuery.

Usage

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

Add the following script files in <body>

To create Lightbox Gallery, add the following code

File Upload

Dropify is 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 Picker

jQuery Clock Picker is 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

Tinymce is 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

Copyright © 2017 UrbanUI. All rights reserved. Hand-crafted & made with