Victory Admin

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

TO DO LIST
CHATS

Team review meeting at 3.00 PM
Prepare for presentation
Resolve all the low priority tickets due today
Schedule meeting for next week
Project review

Feb 11 2018

Creating component page

build a js based app

Feb 7 2018

Meeting with Alisa

Call Sarah Graves

Friends

See All

Thomas Douglas

Available

19 min
Catherine

Away

4
23 min
Daniel Russell

Available

14 min
James Richardson

Away

2 min
Madeline Kennedy

Available

5 min
Sarah Graves

Available

47 min

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

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>

To create a simple chart, add the following code

Google chart tools are powerful, simple to use, and free. Try out our rich gallery of interactive charts and data tools.

Usage

Add the following script files in <body>

Basic Chart Structure

C3.js is a D3-based reusable chart library.

Usage

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

and the following script files in <body>

To create a simple chart, add the following code

Chartist creates simple responsive charts

Usage

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

Add the following script files in <body>

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

Morris creates Pretty time-series line graphs

Usage

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

Add the following script files in <body>

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

Rickshaw is a JavaScript toolkit for creating interactive time series graphs.

Usage

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

Add the following script files in <body>

To create a simple chart using rickshaw, add the following code

Jquery 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>

To create a line chart using sparkline, 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

Mapeal Map.Ease the build of pretty data visualizations on dynamic vector maps

Add the following script files in <body>

To create a simple map, add the following code

Alternative content

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

noUiSlider is a range slider without bloat

Usage

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

Add the following script files in <body>

To create a slider, add the following code

jQuery Bar Rating Plugin works by transforming a standard select field into a rating widget.

Usage

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

Add the following script files in <body>

To create a rating, add the following code

Forms

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

Email address We'll never share your email with anyone else.

Password

Example textarea

File input 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

Option one is this and that—be sure to include why it's great

Option two can be something else and selecting it will deselect option one

Option three is disabled

Check me out

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>

The following code shows validation of a simple form

Name (required, at least 2 characters)

E-Mail (required)

URL (optional)

Your comment (required)

We are using Jquery steps in our template to create form addons. 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>

The following code generates a simple form wizard

Account

Email address We'll never share your email with anyone else.

Password

Confirm Password

Profile

First name

Last name

Profession

Comments

Finish

I agree terms and conditions

Jquery Repeater is a an interface to add and remove a repeatable group of input elements.

Usage

Add the following script files in <body>

To create a Repeater, add the following code

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

jQuery-Tags-Input magically convert a simple text input into a cool tag list with this jQuery plugin.

Usage

To use jQuery-Tags-Input in your appication, include the following files in <head>

Add the following script files in <body>

To convert an input to tag using jQuery-Tags-Input, add the following code

  $('#tags').tagsInput({
      'width': '100%',
      'height': '75%',
      'interactive': true,
      'defaultText': 'Add More',
      'removeWithBackspace': true,
      'minChars': 0,
      'maxChars': 20, // if not provided there is no limit
      'placeholderColor': '#666666'
  });

With ProgressBar.js, it's easy to create responsive and stylish progress bars for the web.

Usage

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

To create a progress bar using progressbar.js, add the following code

noUiSlider is a range slider without bloat

Usage

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

Add the following script files in <body>

To create a slider, add the following code

jQuery Bar Rating Plugin works by transforming a standard select field into a rating widget.

Usage

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

Add the following script files in <body>

To create a simple rating, add the following code

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

  $('#defaultconfig').maxlength();

Input-mask helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers etc.

Usage

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

The below code shows an example of input mask for date.

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

Usage

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

Add the following script files in <body>

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

Checkbox 1

Radio button 1

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>

A sample typeahead can be generated as below

Cropper is a simple jQuery image cropping plugin.

Usage

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

Add the following script files in <body>

To crop an image using cropper, add the following code

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

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>

To generate an icon, add the following code

Simple line icons is a set of simple and minimal line icons.

Usage

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

To generate an icon, add the following code

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>

To generate an 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

Bootstrap-table is an extended Bootstrap table with radio, checkbox, sort, pagination, and other added features.

Usage

To use bootstrap-table in your appication, include the following files in <head>

Add the following script files in <body>

Activate bootstrap table without writing JavaScript, set data-toggle="table" on a normal table.

Item ID	Item Name	Item Price
1	Item 1	$1
2	Item 2	$2

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>

Add the following script files in <body>

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

Tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes.

Usage

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

Add the following script files in <body>

To create a Table, add the following code

Last Name	First Name	Due	Web Site
Smith	John	$50.00	http://www.jsmith.com
Bach	Frank	$50.00	http://www.frank.com
Doe	Jason	$100.00	http://www.jdoe.com
Conway	Tim	$50.00	http://www.timconway.com

Basic UI Elements

Button with default color

Outlined

Sizes

Bootstrap Accordion

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

Collapsible Group Item #3

Collapsible Group Item #1

....

Collapsible Group Item #2

....

Collapsible Group Item #3

....

Bootstrap Dropdown

Dropdown Outlined

Bootstrap Tabs

Bootstrap Modals

Bootstrap Pagination

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

Listify is a simple filterable listing jQuery plugin.

Usage

Add the following script files in <body>

To create a filterable list,add the following code

Sort By :

Jonny Stromberg

1986
Tim

1992
Stromberg

1984
Marques

1999
Sophia

1989
William

1985
Jacob

1987

Todolist is a minimal jQuery plugin to create checklist.

Usage

Add the following script files in <body>

To create a filterable list,add the following code

Just Gage is a handy JavaScript plugin for generating and animating nice & clean gauges.

Usage

Add the following script files in <body>

To create a gage, add the following code

Bootstrap Tour is the easiest way to show people how to use your website

Usage

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

Add the following script files in <body>

To create a filterable list,add the following code

What is this?

Dragula ,Drag and drop so simple it hurts

Usage

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

Add the following script files in <body>

To create a drag n drop list,add the following code

Drag me!

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

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>

Add the following script files in <body>

To create a carousel, add the following code

1

2

3

4

5

6

7

8

9

10

11

12

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

    $('.dropify').dropify();

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

Usage

Add the following script files in <body>

To create a Dropzone file upload,add the following code

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>

Add the following script files in <body>

To create a Jquery file upload,add the following code

Upload

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

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>

Add the following script files in <body>

To create a color picker,add the following code

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>

Add the following script files in <body>

 //optional

To create a color picker,add the following code

  $('.color-picker').asColorPicker()

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

</textarea>
  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',
          '//www.tinymce.com/css/codepen.min.css'
      ]
  });

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>

Add the following script files in <body>

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

awesome
  $.fn.editable.defaults.mode = 'inline';
  $.fn.editableform.buttons =
      '' +
      '' +
      '' +
      '' +
      '' +
      '';
  $('#username').editable({
      type: 'text',
      pk: 1,
      name: 'username',
      title: 'Enter username'
  });

Summernote is a super simple WYSIWYG Editor.

Usage

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

Add the following script files in <body>

To create a summernote editor, add the following code

SimpleMDE is a simple, beautiful, and embeddable JavaScript Markdown editor.

Usage

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

Add the following script files in <body>

To create an editor using simpleMDE, add the following code

Quill is a free, open source WYSIWYG editor built for the modern web.

Usage

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

Add the following script files in <body>

To create an editor using Quill, add the following code

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>

<!--Choose any theme you wish-->

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

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 }

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>

Add the following script files in <body>

Here is an example of an editor using CodeMirror.

Introduction

About Victory Admin

Getting started

Customization

Dependencies

Compilation

Options

Basic structure

Charts

Usage

Usage

Usage

Usage

Usage

Usage

Usage

Usage

Maps

Usage

Tabs

Usage

Advanced Form Elements

Usage

Usage

Usage

Forms

Usage

Usage

Account

Profile

Comments

Finish

Usage

Advanced form elements

Usage

Usage

Usage

Usage

Usage

Additional form elements

Usage

Usage

Usage

Usage

Usage

Grid

Usage

Icons

Usage

Usage

Usage

Usage

Tables

Usage

Usage

Usage

Basic UI Elements

Button with default color

Outlined

Sizes

Bootstrap Accordion

Collapsible Group Item #1

Collapsible Group Item #2

Collapsible Group Item #3

Collapsible Group Item #1

Collapsible Group Item #2

Collapsible Group Item #3

Bootstrap Dropdown

Dropdown Outlined

Bootstrap Tabs

Bootstrap Modals

Bootstrap Pagination

Advanced UI Elements

Usage

Usage

Jonny Stromberg

Tim

Stromberg

Marques

Sophia