## 1 General Information

This theme is built on top of bootstrap a very high customizable responsive UI framework, We have thought about most of things when it comes to admin panel UI templates. As show in the above diagram the template consist of

1. Main header - Consist of logo, quick navigation options and toggle options like the chat and notifications
2. Side bar - Consist of user image and details, Main menu, Task list and footer widget
3. Content Body
4. Chat Slider - Consist of opened and group chat contacts for instant messaging

### 1.1 HTML Structure

HTML Head

Note - Please add new plugins css or any css file to the very top of the the file which helps to keep a good CSS hierarchy.

Source code

    Webarch - Responsive Admin Dashboard

Body Wrappers
Source Code:

    	...

    	...

Main Menu
Source Code:

             Dashboard  5
             Email 203
             UI Elements

             Forms

             Grids

             Tables

             Maps

             Charts
             Extra

Important : Please refer the blank_template.html file

### 1.2 Folder structure and files

List of folders and main files

      Webarch/
      ├── assets/
      │   ├── css/
      │   ├── fonts/
      │   ├── img/
      │   ├── js/
      │   ├── plugin/
      └── media/

Main CSS files - located in assets/css

- style.css
- responsive.css

### 1.3 JavaScript

We have separate dedicated folder for JavaScript and plug ins so it creates a plug and play environment for developers, it's located in "assets/plugins"

Main JS files - located in assets/js, respective js dedicated for each page will be also located in this folder

- core.js

## 2.1 Typography

An important phase of any good design is typography, We have carefully selected the necessary font sizes and its weights that is applied in different scenarios to get the best viewing experiences. Fonts have a unique pixel perfect size where you don't see grudgy edges.

#### Fonts Faces

- "Helvetica Neue"/Helvetica/Arial - Default Body fonts and used almost everywhere
- Opensans - Used in headings, Notifications and many other places

#### Fonts Sizes

- Body - `13px`
- Heading 1 - `38.5px`
- Heading 2- `31.5px`
- Heading 3 - `24.5px`
- Heading 4 - `22px`

#### Font Weights & Styles

1. Font Weights
2. Font Variations and Styles

   #### OPEN ME, LIGHT , BOLD , EVERYTHING

   typographers do not design typefaces, and some type designers do not consider themselves typographers.
   In modern times, typography has been put into motion—in film, television and online broadcasts—to add emotion to mass communicatio

   ### Numbers looks great! - 1234567890

   ### Let your Creativity Flow 123$

   ### Numerics 233.00

   Source:

   ####

   ###

   ###

   ###

       					OPEN ME,
       					LIGHT ,
       					BOLD ,
       					EVERYTHING

       					typographers do not design typefaces, and some type designers do not consider themselves typographers.
       					In modern times, typography has been put into motion—in film, television and online broadcasts—
       					to add emotion to mass communication

       					Numbers looks great! - 1234567890

       					Let your Creativity Flow
       					123$

       					Numerics
       					233.00

3. Font Colors

   Now you don't have to create different classes for different font colors, We have used 5 different colors in our pallette

   Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

   Etiam porta sem malesuada magna mollis euismod.

   Donec ullamcorper nulla non metus auctor fringilla.

   Aenean eu leo quam. Pellentesque ornare sem lacinia quam.

   Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

   Source:

       		Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

       		Etiam porta sem malesuada magna mollis euismod.

       		Donec ullamcorper nulla non metus auctor fringilla.

       		Aenean eu leo quam. Pellentesque ornare sem lacinia quam.

       		Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

#### Bootstrap Address Block

Present contact information for the nearest ancestor or the entire body of work.

Source:

#### Bootstrap Wells

Tradition Boostrap well made awesome, The well comes in 3 different sizes use following `.well-large` & `.well-small` will get you two different sizes. The default size has no class.

Important : Remeber to add the `.well` class with the different size classes

#### OPEN ME, LIGHT , BOLD , EVERYTHING

is the art and technique of arranging type in order to make language visible. The arrangement of type involves the selection of typefaces, point size, line length, leading (line spacing), adjusting the spaces between groups of letters (tracking)
Source:

####

####

    	OPEN ME, LIGHT , BOLD , EVERYTHING

    	OPEN ME, LIGHT , BOLD , EVERYTHING

    	is the art and technique of arranging type in order to make language visible. The arrangement of type involves the selection of typefaces, point size,
    	line length, leading (line spacing), adjusting the spaces between groups of letters (tracking)

#### Blockquote

Wrap `blockquote` around any HTML as the quote. For straight quotes we recommend a `p`

> It is during our darkest moments that we must focus to see the light.

> Aristotle Onassis

> The best and most beautiful things in the world cannot be seen or even touched - they must be felt with the heart.

> Helen Keller

    		 It is during our darkest moments that we must focus to see the light.
    		 Aristotle Onassis

    			The best and most beautiful things in the world cannot be seen or even touched - they must be felt with the heart.
    			Helen Keller

## 2.2 Messages & Notifications

These both help to get use attention when its required. Elegant & simple methods like badges, alert boxes, message boxse, toot-tips, modals are used.

### Simple Alert

Alerts help to gain user attention and give feedback for processed task. These alerts are built with different background and borders to show wrap it with the following class `.alert`

Warning: Your monthly traffic is reaching limit.
Success: The page has been added.
Info: You have 198 unread messages.
Danger: The daily cronjob has failed.

Need more description space? Change classes to `alert-error` `alert-success` `alert-info` `alert-warning` at ease with different customized color set.

Source:

    										Warning: Your monthly traffic is reaching limit.

    										Success: The page has been added.

    										Info: You have 198 unread messages.

    										Danger: The daily cronjob has failed.

### Descriptive Alerts

Need more description space? Remeber to wrap it with `.alert` and `.alert-block`.If you want different colors change classes to `alert-error` `alert-success` `alert-info` `alert-warning` at ease with different customized color set.

#### Error!

Error-handling routine in x208888 and specifies the location of the routine within a procedure

Source:

####

    									 Error!

    										Error-handling routine in x208888 and specifies the location of the routine within a procedure

### Simple Labels

A label, with optional background colors. Use the `label`class to create a label

DEFAULT VIEW HOLD ALERT SUCCESS SOLD
Source:

    								DEFAULT
    								VIEW
    								HOLD
    								ALERT
    								SUCCESS
    								SOLD

#### Badge Variations

A Badge, with optional background colors. Use the `badge`class to create a Badge

2 8 12 300 25 5
Source:

    								2
    								8
    								12
    								300
    								25
    								5

### Progress bar

We have tweaked the native Bootstrap to much more customizable options from colors, animation and size

Use the attribute `data-percentage` to change the fill of the progress bar

1. Progress Bar Colors
   Source :

2. #### Progress bar Sizes

   Different sizes can be achieved by using `.progress-small` and `.progress-large`

   I'm small!

   Source :

   I'm big!

3. #### Progess bar Animated

   To have a cool stripped animated progress bar simply apply `.progress-striped` and `.active`

   Source:

### Tooltips

HTML

    Tool tip

or

Trigger the tooltip via JavaScript

    $('#example').tooltip(options);

### Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".

Name | type | default | description
--- | --- | --- | ---
animation | boolean | true | apply a css fade transition to the tooltip
html | boolean | false | Insert html into the tooltip. If false, jquery's `text` method will be used to insert content into the dom. Use text if you're worried about XSS attacks.
placement | string | function | 'top' | how to position the tooltip - top | bottom | left | right
selector | string | false | If a selector is provided, tooltip objects will be delegated to the specified targets.
title | string | function | '' | default title value if `title` tag isn't present
trigger | string | 'hover focus' | how tooltip is triggered - click | hover | focus | manual. Note you case pass trigger mutliple, space seperated, trigger types.
delay | number | object | 0 | delay showing and hiding the tooltip (ms) - does not apply to manual trigger type If a number is supplied, delay is applied to both hide/show Object structure is: `delay: { show: 500, hide: 100 }`
container | string | false | false | Appends the tooltip to a specific element `container: 'body'`

## 2.3 Icons

Icons are powered by font awesome icons, our very own pixel perfect icon set and also animated weather icons. These vector icons are scalable to piratically any size you want on any high resolution device

### Font Awesome Icons

Font awesome has set of 361 icons, Please refer the following Font awesome 3.2.1 icon setTo display an icon wrap an tag as follows. Font awesome 3 icons set class are followed with a prefix of`icon-`

Source:

1. #### Scalable

   As mentioned before it is scalable to any size you want, there are a set of predefine classes that helps you get what you want

   icon-camera-retro

   icon-camera-retro

   icon-camera-retro

   icon-camera-retro

   Source:

2. #### Animated

   Spinner icon when loading content...
   Info: CSS3 animations aren't supported in IE7 - IE9.

## 2.4 Buttons

We have customized the Bootstrap native button set from top to bottom

Basic buttons are traditional buttons with borders and background. Use any of the available button classes to quickly create a styled button. Compatible for bootstrap version 2 and 3.

Example Source:

### Size Options

Fancy larger or smaller buttons? Add `.btn-large` `.btn-small` or `.btn-mini` for additional sizes.

Example Source:

### Button Blocks

Create block level buttons,those that span the full width of a parent by adding `.btn-block`

Example Source:

### Button Disable

Customizable disabled buttons & links that works with both disable attribute and class. These are compatible for all color variations

Primary link Link

Example Source:

### Basic Dropdowns

We've simplified our dropdown buttons by getting rid of the dedicated dropdown associated with them, this looks more clean and also available in all different colors

Default
Primary
Success
Info
Warning
Danger
White
Default
Example Source:

    				   Default

### Single Button Group

Button groups are great when you need to display a group of actions in a bar. These build off the button styles and work perfectly with the grid. They come in different toggle options like `switch` or `radio`

Example Source:

## 2.5 Tabs and Accordians

There are no special tabs and accordions plug ins used, We have customized the native Bootstrap tabs and accordions to suit our color palette

### 2.5.1 Accordions

To create a according first you must have a main wrapper div

    	......

Each section of the accordion will be as follows

####

    				   Heading

    				 Content

Remember the attribute `data-parent` should have the id of the main wrapper class and the header link should be having the same id name of the body of the accordian

#### How does the plus and minus icons work?

Its all handle by css, everytime when the accordion is collapsed a class `.collapse` is applied to that section link by making use of this, the icon-plus is overwritten with a different content it can be see in the main style sheet.

Example HTML Source code :

####

####

#

####

##

####

####

    				   Collapsible Group Item

    				 Click headers to expand/collapse content that is broken into logical sections, much like tabs. Optionally, toggle sections open/closed on mouseover.

    				  Typography Variables

                      go explore the world
                      small things in life matters the most
                      Big Heading Body, Variations
                      Open Me, Light , Bold , Everything
                       is the art and technique of arranging type in order to make language visible. The arrangement of type involves the selection of typefaces, point size, line length, leading (line spacing), adjusting the spaces between groups of letters (tracking)
                      and adjusting the Case space between pairs of letters (kerning). Type design is a closely related craft, which some consider distinct and others a part of typography

    				 Easy Edit

    				 Click headers to expand/collapse content that is broken into logical sections, much like tabs. Optionally, toggle sections open/closed on mouseover.

Example Javascript Source code :

    	$('#accordion2').collapse({
    		toggle: false
    	})

### 2.5.2 Tabs

To create use the following sample code

HTML Source :

    		...
    		...
    		...
    		...

JavaScript Source :

        $('#myTab a').click(function (e) {
    		e.preventDefault();
    		$(this).tab('show');
    	});

To have tabs in different directions wrap the above code with the below tag

    				.......

Options available : tabs-left, tabs-right

For further reading please refer Bootstrap documentation

## 2.6 Sliders

iOS7 like sliders that are highly customizable and comes with all the colors in our palette. Use a simple input tag and wrap it with the class `slider` to get different color options.

Example HTML Source :

Example Javascript Source :

    	$('.element').slider();

Required Files

#### Options

These options can be added to the input attributes as show in the code

Name | type | default | description
--- | --- | --- | ---
min | float | 0 | minimum possible value
max | float | 10 | maximum possible value
step | float | 1 | increment step
orientation | string | 'horizontal' | set the orientation. Accepts 'vertical' or 'horizontal'
value | float|array | 5 | initial value. Use array to have a range slider.
selection | string | 'before' | selection plament. Accepts: 'before', 'after' or 'none'. In case of a range slider, the selection will be placed between the handles
tooltip | string | 'show' | whatever to show or hide the tooltip. Accepts: 'show' or 'hide'
handle | string | 'round' | handle shape. Accepts: 'round', 'square' or 'triangle'
formater | function | returns the plain value | formater callback. Return the value wanted to be displayed in the tooltip

For further documentation please visit the following link : Bootstrap Slider

## 2.7 Group List

A touch friendly drag n drop list that has the capability of multiple lists options

1. Item 1
2. Item 2
   1. Item 3
   2. Item 4
   3. Item 5
      1. Item 6
      2. Item 7
      3. Item 8
   4. Item 9
   5. Item 10
3. Item 11
4. Item 12

HTML Source:

    									Item 1

    									Item 2

    										Item 3
    										Item 4

    											Item 5

    												Item 6
    												Item 7
    												Item 8

    										Item 9
    										Item 10

JavaScript Source:

    	$('#nestable').nestable({
    			group: 1
    	})

Reuqired Files:

## 3.1 Form elements

Form elements consist of basic elements that you need to create a form. We have added some extra components that will be needed and are customized to suite the template

#### 3.1.1 Input Appends/Prepends

These are basic Bootstrap components, we have customized it in 3 different ways to use with a total of 9 options

#### Custom version

Example HTML Code

#### 3.1.1 Checkbox and Radio

Our very own check box and radio elements that supports even retina version, no images just pure CSS. They will function like ordinary check box and radio components but with a label(the label can be blank too) with it.

Keep Me Signed in
Exampl HTML Code

       Keep Me Signed in

Agree Disagree
Exampl HTML Code

         Agree

          Disagree

#### Important!

A label is a must! but it can also be a BLANK label too, so you have the flexibility, Please remember to assign for attribute in the label class

#### More Options

They all come with all Bootstrap colors and check boxes can be also rounded ones too.

Color Class

- Blue - .check-success, radio-success
- Green - .check-primary, radio-primary
- Red - .check-danger, radio-danger
- Dark Blue - .check-info, radio-info
- Yellow - .check-warning, radio-warning

Circle Checkbox

Simply Apply .checkbox-circle class to the wrapper of the checkbox

#### 3.1.2 Slide Toggle

Beautiful iOS7 slide toggle that has the option of all Bootstrap classes

HTML code:

JavaScript code:

    var Switch = require('ios7-switch')
            , checkbox = document.querySelector('.ios')
            , mySwitch = new Switch(checkbox);
     mySwitch.toggle();
          mySwitch.el.addEventListener('click', function(e){
            e.preventDefault();
            mySwitch.toggle();
          }, false);

Required Files:

#### 3.1.3 Combo box

This plugin comes with a inbuilt search option that can be disabled later.

JavaScript code:

      $("#source").select2();
      //Multi Select
       $("#multi").val(["Jim","Lucy"]).select2();

Required Files:

For more information please refer the form_elements.html file or Select2 Documentation

#### 3.1.4 Date and Time Picker

This plugin is powered by eyecon Boostrap datepicker and is highly customizable, We have change the look and feel to suite our design

HTML Source:

          Default Timepicker

JavaScript code:

    	  //Date Pickers
    	  $('.input-append.date').datepicker({
    				autoclose: true,
    				todayHighlight: true
    	   });

    	//Time pickers
    	$('.timepicker-default').timepicker();
        $('.timepicker-24').timepicker({
                    minuteStep: 1,
                    showSeconds: true,
                    showMeridian: false
         });

Required Files:

For more information please refer the form_elements.html file or DatePicker Documentation and TimePicker Documentation

#### 3.1.5 Input Mask

These assure the user will never enter invalid phone no, email or anything that has a pattern even without validations, powerd by jquery-inputmask

HTML Source:

JavaScript code:

      $("#date").mask("99/99/9999");

Required Files:

For more information please refer the form_elements.html file or Jquery Autonumeric Documentation

#### 3.1.5 Input auto-numeric

Do you forget small things? here is something that helps to automatically placed forgotten dollar signs, decimal places and even comma separates and many more!, powered by jquery-autonumeric plugin

HTML Source:

For more information please refer the form_elements.html file or Jquery Autonumeric Documentation

JavaScript code:

      $('.auto').autoNumeric('init');

Required Files:

#### 3.1.6 HTML5 WYSIYG

Simple, elegant WYSIYG editor that acts as a word editor all necessary actions that is required to type simple content with style is available in this editor. Its powererd by HTML5 WYSIYG editor which will work even on any mobile device. Simply place it any `textarea`

HTML Source:

JavaScript code:

     $('#text-editor').wysihtml5();

Required Files:

For more information please refer the form_elements.html file or bootstrap-wysihtml5 Documentation

## 3.2 Form Validations

A very important is form validations that helps users to enter the correct information. We have included three different views of validations, this is powered by jquery-validation plugin a widely used and highly customizable plugin

### Tradition validation

Amount e.g. "5000"
HTML Source :

    							Amount
    							e.g. "5000"

JavaScript Source :

    		  	$('#form_traditional_validation').validate({
                    focusInvalid: false,
                    ignore: "",
                    rules: {
                        form1Amount: {
    					digits: true,
                            minlength: 2,
                            required: true
                        }
                    },

                    invalidHandler: function (event, validator) {
    					//display error alert on form submit
                    },

                    errorPlacement: function (label, element) { // render error placement for each input type
    					$('').insertAfter(element).append(label)
                        var parent = $(element).parent('.input-with-icon');
                        parent.removeClass('success-control').addClass('error-control');
                    },

                    highlight: function (element) { // hightlight error inputs
    					var parent = $(element).parent('.input-with-icon');
    					parent.removeClass('success-control').addClass('error-control');
                    },

                    unhighlight: function (element) { // revert the change done by hightlight

                    },

                    success: function (label, element) {
    					var parent = $(element).parent('.input-with-icon');
    					parent.removeClass('error-control').addClass('success-control');
                    },

                    submitHandler: function (form) {

                    }
                });

### Iconic validation

Your email e.g. "john@examp.com"
HTML Source :

                            Your email
                            e.g. "john@examp.com"

JavaScript Source :

    		  	   $('#form_iconic_validation').validate({
                    errorElement: 'span',
                    errorClass: 'error',
                    focusInvalid: false,
                    ignore: "",
                    rules: {
                        form1Email: {
                            required: true,
                            email: true
                        },
                    },

                    invalidHandler: function (event, validator) {
    					//display error alert on form submit
                    },

                    errorPlacement: function (error, element) { // render error placement for each input type
                        var icon = $(element).parent('.input-with-icon').children('i');
                        var parent = $(element).parent('.input-with-icon');
                        icon.removeClass('icon-ok').addClass('icon-exclamation');
                        parent.removeClass('success-control').addClass('error-control');
                    },

                    highlight: function (element) { // hightlight error inputs

                    },

                    unhighlight: function (element) { // revert the change done by hightlight

                    },

                    success: function (label, element) {
                        var icon = $(element).parent('.input-with-icon').children('i');
    					var parent = $(element).parent('.input-with-icon');
                        icon.removeClass("icon-exclamation").addClass('icon-ok');
    					parent.removeClass('error-control').addClass('success-control');
                    },

                    submitHandler: function (form) {

                    }
                });

Required files Source :

For more information please refer the form_validations.html file or jquery form validation plugin documentation

## 3.3 Form Wizard

A powerful and responsive wizard that uses jquery-validation plugin to validate its fields. We have customized its look and feel to suit our design

HTML Source:

                              1
    						Basic information
                              2
    						Account information
                              3
    						User settings
                              4
    						Feedback

JavaScript Source :

    	$('#rootwizard').bootstrapWizard({
    	  		'tabClass': 'form-wizard',
    	  		'onNext': function(tab, navigation, index) {
    	  			var $valid = $("#commentForm").valid();
    	  			if(!$valid) {
    	  				$validator.focusInvalid();
    	  				return false;
    	  			}
    				else{
    					$('#rootwizard').find('.form-wizard').children('li').eq(index-1).addClass('complete');
    					$('#rootwizard').find('.form-wizard').children('li').eq(index-1).find('.step').html('');
    				}
    	  		}
    	 });

Required files Source :

For more information please refer the form_validations.html file or bootstrap form wizard documentation

## 4.1 Grids/Portlets

A very important UI element that helps to represent your information separately, We have over 4 types of different portlets so that you will never get bored

1. Simple - Default
2. Bored - Comes with the boreded options
3. Colored Bored- Comes with the Colored bored for one side
4. Transparent - Blends with the background
5. Solid - Pure colored portlet

Portlet consist of a header, controllers and a body, the following code helps to create a simple portlet

####

    								Grid One

    									Content here

Type | Description | Code
--- | --- | ---
Bordered | Comes with the boreded options |

####

    								Grid Two

    							...
Color Bordered | Comes with the Colored bored for one side Sides : vertical and horizontal Colors : red,blue,green,yellow |

####

    								Grid One

    							...
Transparent | Blends with the background |

####

    								Grid One

    								...
Solid | Pure colored portlet Available in all the colors in our palette |

####

    								Grid Two

    								...

## 4.2 Drag-gable Grids/Portlets

Drag-gable is easy to apply since it uses the existing portlet code. Simply wrap with the class `.sortable`. Good new is that this is also compatible with touch devices!

The following javascript can be found in the core.js file.

      $(".sortable").sortable({
                connectWith: '.sortable',
                iframeFix: false,
                items: 'div.grid',
                opacity: 0.8,
                helper: 'original',
                revert: true,
                forceHelperSize: true,
                placeholder: 'sortable-box-placeholder round-all',
                forcePlaceholderSize: true,
                tolerance: 'pointer'
            });

Required JS library

For further examples and code please view our template webarch file grids_draggable.html

## 5.1 Simple Tables

This is native Bootstrap tables that have different options like bored, highlighted and simple We have customized it with best suited color and size so that it fits in the design. By simply adding the class `.table` to any html table tag you can archieve it

Type | Description | Class
--- | --- | ---
Simple Table | default table view with no borders round it | You dont need a special class
Stripped Table | Colored strips for each even row | .table-striped
Hover table | Color row when table row hover | .table-hover
Bordered table | Classical bored table | .table-bordered

To view example and it in action please do look at the webarch template file tables.html

## 5.1 DataTables

One of the most famous and highly customizable plugin with great documentation. By a few lines of code you can turn any table in to a datatable This is not the typical datatable but one that is customized to suite Bootstrap grid system and its native classes.Its all implemented

Sample Code :

    $('#table').dataTable( {
    		//Table header options
    		,
    			"oTableTools": {
    			"aButtons": [
    				{
    					"sExtends":    "collection",
    					"sButtonText": "",
    					"aButtons":    [ "csv", "xls", "pdf", "copy"]
    				}
    			]
    		},
    		//Pagination classes and customization
    		"sPaginationType": "bootstrap",
    		 "aoColumnDefs": [
              { 'bSortable': false, 'aTargets': [ 0 ] }
    		],
    		"aaSorting": [[ 1, "asc" ]],
    		"oLanguage": {
    			"sLengthMenu": "_MENU_ ",
    			"sInfo": "Showing _START_ to _END_ of _TOTAL_ entries"
    		},
    		 bAutoWidth     : false,
            fnPreDrawCallback: function () {
                // Initialize the responsive datatables helper once.
                if (!responsiveHelper) {
                    responsiveHelper = new ResponsiveDatatablesHelper(tableElement, breakpointDefinition);
                }
            },
            fnRowCallback  : function (nRow) {
                responsiveHelper.createExpandIcon(nRow);
            },
            fnDrawCallback : function (oSettings) {
                responsiveHelper.respond();
            }

    })

Required Files

#### Is it responsive?

Yes we made it responsive, use the attribute data-hide on TD in Table header
This attribute will specify the weather to hide the column on which type of device - "phone" "tablet"

For more information please refer the demo webarch file - datatables.html and Datatable documentation

## 6.1 Google Maps

Google maps is powered by the plugin gmaps.js.What we have done is changed the representation of maps in different way.

Example code :

The class .demo-map is to represent full width and height of the screen and overlay-fixed helps it to stick on to the screen without scrolling

JavaScript code located in google_maps.js:

    	  //Initialize Map
    	  map = new GMaps({
            el: '#map',
            lat: -12.043333,
            lng: -77.028333,
            zoomControl : false,
            zoomControlOpt: {
                style : 'SMALL',
                position: 'TOP_LEFT'
            },
    		 markers: [
    			{lat: -12.043333, lng: -77.028333},
    			{lat: -12.045333, lng: -77.034},
    			{lat: -12.045633, lng: -77.022}
    		],
            panControl : false,
            streetViewControl : false,
            mapTypeControl: false,
            overviewMapControl: false,

          });
    	  // Add a random mark
    	  setTimeout( function(){
    		  map.addMarker({
    				  lat: -12.043333,
    				  lng: -77.028333,
    				  animation: google.maps.Animation.DROP,
    				  draggable:true,
    				  title: 'New marker'
    		  });
    	  },3000);
    	  //Initialize Context Menu
    	    map.setContextMenu({
            control: 'map',
            options: [{
              title: 'Add marker',
              name: 'add_marker',
              action: function(e){
                console.log(e.latLng.lat());
                console.log(e.latLng.lng());
                this.addMarker({
                  lat: e.latLng.lat(),
                  lng: e.latLng.lng(),
    			  animation: google.maps.Animation.DROP,
    			  draggable:true,
                  title: 'New marker'
                });
                this.hideContextMenu();
              }
            }, {
              title: 'Center here',
              name: 'center_here',
              action: function(e){
                this.setCenter(e.latLng.lat(), e.latLng.lng());
              }
            }]
          });
          map.setContextMenu({
            control: 'marker',
            options: [{
              title: 'Center here',
              name: 'center_here',
              action: function(e){
                this.setCenter(e.latLng.lat(), e.latLng.lng());
              }
            }]
          });

Files required code :

For more demos and documentation please refer the demo webarch file - google_map.html and gmaps js

## 6.2 Vector Maps

Vector maps helps you to generator less detail but vector graphics of maps. They can be loaded without internet, this is powered by the plugin jvectormap

JavaScript code located in vector_maps.js:

    $('#world-map').vectorMap({
       map: 'world_mill_en',
        scaleColors: ['#C8EEFF', '#0071A4'],
        normalizeFunction: 'polynomial',
        focusOn:{
    		   x: 0.5,
    		  y: 0.5,
    		  scale: 2.5
    	},
    	zoomMin:0.85,
        hoverColor: false,
    	regionStyle:{
    		  initial: {
    			fill: '#babdc0',
    			"fill-opacity": 1,
    			stroke: '#babdc0',
    			"stroke-width": 0,
    			"stroke-opacity": 0
    		  },
    		  hover: {
    			"fill-opacity": 0.8
    		  },
    		  selected: {
    			fill: 'yellow'
    		  },
    		  selectedHover: {
    		  }
    		},
        markerStyle: {
    		  initial: {
    			fill: '#f35958',
    			stroke: '#f35958',
    			"fill-opacity": 1,
    			"stroke-width": 4,
    			"stroke-opacity": 0.2,
    			r: 5
    		  },
    		  hover: {
    			stroke: 'black',
    			"stroke-width": 2
    		  },
    		  selected: {
    			fill: 'blue'
    		  },
    		  selectedHover: {
    		  }
    		},
        backgroundColor: '#e5e9ec',
        markers: [
          {latLng: [41.90, 12.45], name: 'Vatican City'},
          {latLng: [43.73, 7.41], name: 'Monaco'},
          {latLng: [-0.52, 166.93], name: 'Nauru'},
          {latLng: [-8.51, 179.21], name: 'Tuvalu'},
          {latLng: [43.93, 12.46], name: 'San Marino'},
          {latLng: [47.14, 9.52], name: 'Liechtenstein'},
          {latLng: [7.11, 171.06], name: 'Marshall Islands'},
          {latLng: [17.3, -62.73], name: 'Saint Kitts and Nevis'},
          {latLng: [3.2, 73.22], name: 'Maldives'},
          {latLng: [35.88, 14.5], name: 'Malta'},
          {latLng: [12.05, -61.75], name: 'Grenada'},
          {latLng: [13.16, -61.23], name: 'Saint Vincent and the Grenadines'},
          {latLng: [13.16, -59.55], name: 'Barbados'},
          {latLng: [17.11, -61.85], name: 'Antigua and Barbuda'},
          {latLng: [-4.61, 55.45], name: 'Seychelles'},
          {latLng: [7.35, 134.46], name: 'Palau'},
          {latLng: [42.5, 1.51], name: 'Andorra'},
          {latLng: [14.01, -60.98], name: 'Saint Lucia'},
          {latLng: [6.91, 158.18], name: 'Federated States of Micronesia'},
          {latLng: [1.3, 103.8], name: 'Singapore'},
          {latLng: [1.46, 173.03], name: 'Kiribati'},
          {latLng: [-21.13, -175.2], name: 'Tonga'},
          {latLng: [15.3, -61.38], name: 'Dominica'},
          {latLng: [-20.2, 57.5], name: 'Mauritius'},
          {latLng: [26.02, 50.55], name: 'Bahrain'},
          {latLng: [0.33, 6.73], name: 'São Tomé and Príncipe'}
        ]
      });

You can download each map dedicated separately from the jVectorMap website, Please note that these maps are a bit heavy and do not include them all

For more information please refer the demo webarch file - vector_map.html and jVector Map documentation

## 7 Charts

We have over 6 chart plugins installed and fully customized to the template design, Please view the following links for its documentations. We have included all the charts in charts.html

Plugin Name | Version | Documentation
--- | --- | ---
Jquery flotChart | 0.8.1 | flotChart
Jquery Sparklines | 2.1.2 | Sparklines
Jquery Ricksaw | Official Webarch Featured Charts | Ricksaw
Morris Charts | 0.4.3 | Morris Charts
Easy Pie Charts | 2.1.0 | Easy Pie Charts

## 8.1 Photo Gallery

An extra component that is powered by the plugins superbox, unlike tradition fancybox plugin it has a lazy load thumbnail and google search like preview for large images and it is in built responsive

HTML Source :

JavaScript Source :

    // Call SuperBox - that's it!
    $('.superbox').SuperBox();

JavaScript Source :

## 8.2 Search

An extra component that is powered by the plugins mixitup. Its a plugin that allows to sort dom elements with animation and works smoothly on desktop and mobile

JavaScript Source :

    			$('#Parks').mixitup({
    					layoutMode: 'list', // Start in list mode (display: block) by default
    					listClass: 'list', // Container class for when in list mode
    					gridClass: 'grid', // Container class for when in grid mode
    					effects: ['fade','blur'], // List of effects
    					listEffects: ['fade','rotateX'] // List of effects ONLY for list mode
    				});

Required files Source :

## 9 Plugin list

Plugin Name | Version | Documentation
--- | --- | ---
Jquery | 1.8.3 | Jquery
Jquery UI | 1.10.1 | Jquery UI
Bootstrap | 3.0.2 | Bootstrap
Jquery Breakpoints | 1.0 | Breakpoints
Jquery Unveil | 1.0 | Unveil
Pace Loader | 0.4.15 | Pace
Boostrap slider | 2.0 | Sliders
Nestables/Group list | Unknown | Nestable jQuery
Bootstrap Select2 | 3.3.2 | Select2
Bootstrap Datepicker | 1.4 | Datepicker
Bootstrap Timepicker | 0.2.3 | Timepicker
Bootstrap Colorpicker | 0.2.3 | Colorpicker
Inputmask | 1.3.1 | Inputmask
Bootstrap wysihtml5 | 0.3.0 | Bootstrap wysihtml5
Bootstrap taginputs | 0.3.9 | taginputs
Dropzone | 2.0 | Dropzone
Jquery validation | 1.11.1 | Jquery validation
Bootstrap Form Wizard | Unknown | Form Wizard
Jquery gmaps | 0.4.8 | gmaps.js
Jquery jVectorMap | 1.2.2 | jVectorMap
Jquery flotChart | 0.8.1 | flotChart
Jquery Sparklines | 2.1.2 | Sparklines
Morris Charts | 0.4.3 | Morris Charts
Easy Pie Charts | 2.1.0 | Easy Pie Charts
SuperBox Gallery | 1.0.0 | SuperBox
Full Calender | 1.6.4 | Calender
Jquery MixItUp | 1.5.4 | MixItUp

## 10 Support

We are always there to help, drop us a message

#### support@revox.io

Top