JANGO v1.3.7

Admin Theme Purchase A License

Thank You For Purchasing JANGO, Theme Most Complete & Ever Expanding Multi-purpose HTML Theme of 2016

If you have any questions that are beyond the scope of this help file, please email our support support@themehats.com.

    Overview

    JANGO is an ever expanding, fully responsive and multipurpose HTML frontend theme powered with Twitter Bootstrap 3.3.6 Framework. JANGO is incredibly robust and flexible that will easily be able to support every site development such as corporate, portfolio, blogs, product showcases, landing / one-page sites and much more. JANGO was inspired and designed with creative & modern web trends to provide the best, sleek, clean and intuitive user experience within a template. Packaged with a fully responsive design and compatible with all major web browsers and devices, JANGO is truly a template ready to launch upon purchase.

    During the development on JANGO, our sole purpose was to push the boundries of HTML5 templates and provide to you with over 111 pages of unlimited choices, highly flexible and beautiful clean coding. We also will never stop to push, improve and innovate JANGO with new unique designs, features, functions and fixes on every new release, so keep in touch with JANGO to stay ahead of the rest. Once you purchase JANGO, you will be entitled to all future updates from the same purchased license for free.

    Author: Theme Hats
    Contact: support@themehats.com
    Follow: twitter.com/themehats
    Like: facebook.com/themehats
    Created On: 12/07/2015
    Updated On: 30/05/2016

    Live Preview

    NOTE: A single license can be used only for one domain or client. Each use of the theme requires a separate license. We hope you will follow the rules as it will help us to continue supporting our themes and providing a free future updates.

2. Template Structure

To top

JANGO has a base page structure containg of header, mega menu, top bar, components and footer as shown below:

Beginning of Page

Below code is used at the beginning of all HTML pages to detect Internet Explorer browser version and set a spesific class applied to Internet Explorer versions. 

<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->

Page Head

The Page head contains of metadata, theme css files: 

<!DOCTYPE html>
<!--[if IE 9]> 
<html lang="en" class="ie9 no-js">
    <![endif]-->
    <!--[if !IE]><!-->
    <html lang="en">
        <!--<![endif]-->
        <!-- BEGIN HEAD -->
        <head>
            <meta charset="utf-8"/>
            <title>JANGO | Ultimate Multipurpose Bootstrap HTML Theme - Home Page - 1</title>
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
            <meta http-equiv="Content-type" content="text/html; charset=utf-8">
            <meta content="" name="description"/>
            <meta content="" name="author"/>
            <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700&subset=latin,cyrillic-ext,greek-ext,cyrillic,latin-ext,vietnamese,greek' rel='stylesheet' type='text/css'>
            <link href='http://fonts.googleapis.com/css?family=Hind:400,500,300,600,700' rel='stylesheet' type='text/css'>
            <link href="assets/plugins/socicon/socicon.css" rel="stylesheet" type="text/css"/>
            <link href="assets/plugins/bootstrap-social/bootstrap-social.css" rel="stylesheet" type="text/css"/>
            <link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
            <link href="assets/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
            <link href="assets/plugins/animate/animate.min.css" rel="stylesheet" type="text/css"/>
            <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
            <!-- END GLOBAL MANDATORY STYLES -->
            <!-- BEGIN: LAYOUT PLUGINS -->
            <link href="assets/plugins/revo-slider/css/settings.css" rel="stylesheet" type="text/css"/>
            <link href="assets/plugins/cubeportfolio/css/cubeportfolio.min.css" rel="stylesheet" type="text/css"/>
            <link href="assets/plugins/owl-carousel/owl.carousel.css" rel="stylesheet" type="text/css"/>
            <link href="assets/plugins/owl-carousel/owl.theme.css" rel="stylesheet" type="text/css"/>
            <link href="assets/plugins/owl-carousel/owl.transitions.css" rel="stylesheet" type="text/css"/>
            <link href="assets/plugins/fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css"/>
            <!-- END: LAYOUT PLUGINS -->
            <!-- BEGIN: PAGE STYLES -->
            <!-- END: PAGE STYLES -->
            <!-- BEGIN THEME STYLES -->
            <link href="assets/base/css/plugins.css" rel="stylesheet" type="text/css"/>
            <link href="assets/base/css/components.css" id="style_components" rel="stylesheet" type="text/css"/>
            <link href="assets/base/css/themes/default.css" rel="stylesheet" id="style_theme" type="text/css"/>
            <link href="assets/base/css/custom.css" rel="stylesheet" type="text/css"/>
            <!-- END THEME STYLES -->
            <link rel="shortcut icon" href="favicon.ico"/>
        </head>

Base CSS Files

Base CSS files are included in every page in order to support theme's base styles: 

<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700&subset=latin,cyrillic-ext,greek-ext,cyrillic,latin-ext,vietnamese,greek' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Hind:400,500,300,600,700' rel='stylesheet' type='text/css'>
<link href="assets/plugins/socicon/socicon.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/bootstrap-social/bootstrap-social.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/animate/animate.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<!-- END GLOBAL MANDATORY STYLES -->

Base Plugins

Base plugins are required by global reusable components(portfolio, carousels, fancybox, etc). 

<!-- BEGIN: BASE PLUGINS -->
<link href="assets/plugins/revo-slider/css/settings.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/cubeportfolio/css/cubeportfolio.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/owl-carousel/owl.carousel.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/owl-carousel/owl.theme.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/owl-carousel/owl.transitions.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css"/>
<!-- END: BASE PLUGINS -->

Theme Styles

The theme styles are used globally in every template page. The include order should be followed and not to be changed. 

<!-- BEGIN THEME STYLES -->
<link href="assets/base/css/plugins.css" rel="stylesheet" type="text/css"/>
<link href="assets/base/css/components.css" id="style_components" rel="stylesheet" type="text/css"/>
<link href="assets/base/css/themes/default.css" rel="stylesheet" id="style_theme" type="text/css"/>
<link href="assets/base/css/custom.css" rel="stylesheet" type="text/css"/>
<!-- END THEME STYLES -->

Javascript Files

Javascript files loaded in the end of page to reduce page load time.

<!-- BEGIN CORE PLUGINS -->
<!--[if lt IE 9]>
<script src="assets/global/plugins/excanvas.min.js"></script> 
<![endif]-->
<script src="assets/plugins/jquery.min.js" type="text/javascript" type="text/javascript" ></script>
<script src="assets/plugins/jquery-migrate.min.js" type="text/javascript" type="text/javascript" ></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript" type="text/javascript" ></script>
<script src="assets/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="assets/plugins/wow/wow.min.js" type="text/javascript"></script>
<!-- END: CORE PLUGINS -->
<!-- BEGIN: LAYOUT PLUGINS -->
<script src="assets/plugins/revo-slider/js/jquery.themepunch.tools.min.js" type="text/javascript"></script>
<script src="assets/plugins/revo-slider/js/jquery.themepunch.revolution.min.js" type="text/javascript"></script>
<script src="assets/plugins/cubeportfolio/js/jquery.cubeportfolio.min.js" type="text/javascript"></script>
<script src="assets/plugins/owl-carousel/owl.carousel.min.js" type="text/javascript"></script>
<script src="assets/plugins/counterup/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="assets/plugins/counterup/jquery.counterup.min.js" type="text/javascript"></script>
<script src="assets/plugins/fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>
<!-- END: LAYOUT PLUGINS -->
<!-- BEGIN: THEME SCRIPTS -->
<script src="assets/base/js/components.js" type="text/javascript"></script>
<script src="assets/base/js/app.js" type="text/javascript"></script>
<script>
    $(document).ready(function() {    
        App.init(); // init core    
    });
</script>
<!-- END: THEME SCRIPTS -->

3. Fonts

To top

JANGO uses Roboto Condensed Google Font as base font. The font must be loaded in HTML header before the rest of css files: 

<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700&subset=latin,cyrillic-ext,greek-ext,cyrillic,latin-ext,vietnamese,greek' rel='stylesheet' type='text/css'>

4. Theme & Layout Configuration

To top

Theme Color Setup

JANGO comes with 35 predefined theme colors located under assets/base/css/themes folder. To setup a selected theme color include assets/base/css/themes/[theme_name].css in page head. For instance, if you like to use red1 theme color, include assets/base/css/themes/red1.css css file: 

<link href="assets/base/css/themes/red1.css" rel="stylesheet" id="style_theme" type="text/css"/>

Layout Settings

The best way to learn how to use JANGO's available layout options, please go to one of JANGO pages and expand the "Theme Settings" quick sidebar panel by clicking the sidebar toggler icon in the header menu. Choose you preferred layout options, and use Chrome's Developer Tool and/or Firefox's Firebug Tool to see the HTML code changes upon you select your layout combination. When you change the laypout option, mostly some css classes will be added into the page's body element. When you change the layout settings only the most parent HTML elements will be modified, the page content part remains as it is.

To learn how to use the browser developer tools you can refer to below links:

https://developer.mozilla.org/en/docs/Debugging_JavaScript
https://developers.google.com/chrome-developer-tools/docs/javascript-debugging

5. JANGO Helper Classes

To top

JANGO Helper Classes are predefined CSS classes to assist your development. Most of the general CSS stylings are readily available for you upon download. To use JANGO Helper Classes, simply type in the JANGO Helper Class name into your element class attribute.

General Classes

General Classes are JANGO's basic utility classes that predefines basic borders, display styles, font styles or resets padding/margin.

Class Description
c-border Sets 1px width border with solid border style
c-no-border Removes the border style from the element
c-border-top Sets 1px width top border only with solid border style
c-border-bottom Sets 1px width bottom border only with solid border style
c-border-left Sets 1px width left border only with solid border style
c-border-right Sets 1px width right border only with solid border style
c-reset Resets element's padding and margin to 0px
c-hide Hides element with display:none
c-overflow-hide Sets element overflow as hidden
c-bg-parallax Sets a shadow effect to the element
c-shadow Sets your background to have a parallax effect
c-pos-relative Adds position:relative to your element
c-font-[i] Sets the font size to [i]px. You can replace [i] to any number from 10 to 40
c-font-thin Sets the font-weight in the element to 300
c-font-slim Sets the font-weight in the element to 400
c-font-sbold Sets the font-weight in the element to 500
c-font-bold Sets the font-weight in the element to 600
c-font-uppercase Sets the all your fonts in the element to UPPERCASE
c-font-lowercase Sets the all your fonts in the element to lowercase. This is JANGO's default font case
c-line-height-[i] Sets the line height size to [i]px. You can replace [i] to any number from 10 to 40
c-bs-grid-small-space Sets Boostrap'ss grid left and right margins to -5px and Boostrap's Grid left and right paddings to 5px

Margin & Padding Classes

Margin & Padding classes are JANGO's flexible predefined classes for you to set margins or paddings to your element within the HTML class attribute quickly and effortlessly.

Class Description
c-margin-t-[x] Add a margin to the TOP of your element. Replace the [x] to the margin number you require. JANGO only predefines the margins for 5, 8, 10, 15, 25, 30, 40, 50, 60, 80 pixels. Therefore to add margin-top:10px; simply add c-margin-t-10 to the HTML class attribute.
c-margin-b-[x] Add a margin to the BOTTOM of your element. Replace the [x] to the margin number you require. JANGO only predefines the margins for 5, 10, 15, 25, 30, 60, 80, 100 pixels. Therefore to add margin-bottom:10px; simply add c-margin-b-10 to the HTML class attribute.
c-padding-[x] Add padding to all TOP, BOTTOM, LEFT and RIGHT your element. Replace the [x] to the padding number you require. JANGO only predefines the padding for 10, 20 pixels. Therefore to add padding:10px; simply add c-padding-10 to the HTML class attribute.

Alignment Classes

Alignment Classes are JANGO's predefined classes for styling your element's text-align style. JANGO aligns your text to the left of the element by default.

Class Description
c-center Centers your text within the element.
c-right Aligns your text to the right of your element
c-bg-img-center Aligns your background image to the center of your element
c-bg-img-top Aligns your background image to the top of your element
c-bg-img-bottom-right Aligns your background image to the bottom and right of your element
c-bg-img-top-center Aligns your background image to the top and center of your element

Color Classes

Color Classes are JANGO's predefined classes to control the colour for you element's background and font.

Class Description
c-bg-[color] Sets your element's background color to a color that is either white, black, regular, green, green-1, green-2, green-3, red, red-1, red-2, red-3, yellow, yellow-1, yellow-2, yellow-3, blue, blue-1, blue-2, blue-3, purple, purple-1, purple-2, purple-3, brown, brown-1, brown-2, brown-3, dark, dark-1, dark-2, dark-3, grey, grey-1, grey-2, grey-3. . Replace the [color] to your selected color to complete the class attribute, e.g. c-bg-white. Please refer to JANGO's Color chart for the full list of colors available.
c-font-[color] Sets your element's font color to a color that is either white, black, regular, green, green-1, green-2, green-3, red, red-1, red-2, red-3, yellow, yellow-1, yellow-2, yellow-3, blue, blue-1, blue-2, blue-3, purple, purple-1, purple-2, purple-3, brown, brown-1, brown-2, brown-3, dark, dark-1, dark-2, dark-3, grey, grey-1, grey-2, grey-3. . Replace the [color] to your selected color to complete the class attribute, e.g. c-font-white. Please refer to JANGO's Color chart for the full list of colors available.
c-border-[color] Sets your element's border color to a color that is either white, black, regular, green, green-1, green-2, green-3, red, red-1, red-2, red-3, yellow, yellow-1, yellow-2, yellow-3, blue, blue-1, blue-2, blue-3, purple, purple-1, purple-2, purple-3, brown, brown-1, brown-2, brown-3, dark, dark-1, dark-2, dark-3, grey, grey-1, grey-2, grey-3. . Replace the [color] to your selected color to complete the class attribute, e.g. c-border-white. Please refer to JANGO's Color chart for the full list of colors available.
c-border-left-[color] Sets your element's left border color to a color that is either white, black, regular, green, green-1, green-2, green-3, red, red-1, red-2, red-3, yellow, yellow-1, yellow-2, yellow-3, blue, blue-1, blue-2, blue-3, purple, purple-1, purple-2, purple-3, brown, brown-1, brown-2, brown-3, dark, dark-1, dark-2, dark-3, grey, grey-1, grey-2, grey-3. . Replace the [color] to your selected color to complete the class attribute, e.g. c-border-white. Please refer to JANGO's Color chart for the full list of colors available.
c-border-right-[color] Sets your element's right border color to a color that is either white, black, regular, green, green-1, green-2, green-3, red, red-1, red-2, red-3, yellow, yellow-1, yellow-2, yellow-3, blue, blue-1, blue-2, blue-3, purple, purple-1, purple-2, purple-3, brown, brown-1, brown-2, brown-3, dark, dark-1, dark-2, dark-3, grey, grey-1, grey-2, grey-3. . Replace the [color] to your selected color to complete the class attribute, e.g. c-border-white. Please refer to JANGO's Color chart for the full list of colors available.
c-border-top-[color] Sets your element's right border color to a color that is either white, black, regular, green, green-1, green-2, green-3, red, red-1, red-2, red-3, yellow, yellow-1, yellow-2, yellow-3, blue, blue-1, blue-2, blue-3, purple, purple-1, purple-2, purple-3, brown, brown-1, brown-2, brown-3, dark, dark-1, dark-2, dark-3, grey, grey-1, grey-2, grey-3. . Replace the [color] to your selected color to complete the class attribute, e.g. c-border-white. Please refer to JANGO's Color chart for the full list of colors available.
c-border-bottom-[color] Sets your element's right border color to a color that is either white, black, regular, green, green-1, green-2, green-3, red, red-1, red-2, red-3, yellow, yellow-1, yellow-2, yellow-3, blue, blue-1, blue-2, blue-3, purple, purple-1, purple-2, purple-3, brown, brown-1, brown-2, brown-3, dark, dark-1, dark-2, dark-3, grey, grey-1, grey-2, grey-3. . Replace the [color] to your selected color to complete the class attribute, e.g. c-border-white. Please refer to JANGO's Color chart for the full list of colors available.
c-btn-[color] Sets your element's button color to a color that is either white, black, regular, green, green-1, green-2, green-3, red, red-1, red-2, red-3, yellow, yellow-1, yellow-2, yellow-3, blue, blue-1, blue-2, blue-3, purple, purple-1, purple-2, purple-3, brown, brown-1, brown-2, brown-3, dark, dark-1, dark-2, dark-3, grey, grey-1, grey-2, grey-3. Replace the [color] to your selected color to complete the class attribute, e.g. c-btn-white. Please refer to JANGO's Color chart for the full list of colors available.

Element Opacity Classes

Element Opacity Classes are JANGO's predefined classes to set the opacity of the element.

Class Description
c-opacity-0 Sets the element opacity to 0
c-opacity-01 Sets the element opacity to 0.1
c-opacity-02 Sets the element opacity to 0.2
c-opacity-03 Sets the element opacity to 0.3
c-opacity-04 Sets the element opacity to 0.4
c-opacity-05 Sets the element opacity to 0.5
c-opacity-06 Sets the element opacity to 0.6
c-opacity-07 Sets the element opacity to 0.7
c-opacity-08 Sets the element opacity to 0.8
c-opacity-09 Sets the element opacity to 0.9
c-opacity-1 Sets the element opacity to 1
c-bg-opacity Sets the element background opacity to 0.04
c-bg-opacity-2 Sets the element background opacity to 0.4
c-bg-transparent Sets the element background style to background:none

Reveal Animation Classes

Classes to use to add reveal animation upon scroll. To animate any element, add these 3 classes to your element .wow .animate and the animation style class. Basic animation styles are listed below.

Animation Style Class Description
fadeIn Fade in element
fadeInUp Fade in element whilst moving up
fadeInDown Fade in element whilst moving down
fadeInLeft Fade in element whilst moving left
fadeInRight Fade in element whilst moving right

Example animation class: class="wow animate fadeIn"
For complete list of animation styles, please refer to animate.css
Please refer to WOW Reveal Animate plugin reference for more info.

Animated Progress Bars data parameters

All Animated Progress Bars will require the .c-progress-bar-line class. The progress bar colors are controlled using JANGO's border and font helper classes. .c-border-[color] or .c-theme-border will control the main progress bar color. .c-font-[color] will control the icon or percentage text colors. The Animated Progress Bars also comes with some custom data parameters below. For more info, visit: http://kimmobrunfeldt.github.io/progressbar.js/

Data Parameter Name Description
data-progress-bar Type of progress bar. Select from line, circle or semicircle
data-stroke-width Progress bar thickness. Defaults at 3.
data-duration Number in miliseconds it takes to complete the animation. Defaults at 1500ms.
data-trail-width Progress bar background thickness. Defaults at 0.
data-progress Position where the progress bar will stop. Values 0.00 to 1.00. Defaults at 1.00
data-trail-width Progress bar background thickness. Defaults at 0.
data-trail-color Progress bar background color. Defaults at #5c6873.
data-display-value Displays Percentage value. Defaults at false.
data-animation Progress bar animation type. Select from linear, easeIn, easeOut, easeInOut, bounce. Defaults at easeInOut.

6. Gulp & SASS

To top

Gulp is a toolkit that will help you automate painful or time-consuming tasks in your development workflow. To get started first install Node.js as gulp require npm to run. It can be downloaded at http://nodejs.org/download/. We can now install Gulp using npm. To install Gulp just follow below steps:

  1. Open the command line and change the directory into [theme_path/sass], where the gulpfile.js is located.
  2. Run "npm install" to install the required gulp dependencies.
  3. Run "npm install gulp -g" to ensure Gulp is available globally for any project.

Run SASS through commapndline

  1. Launch cmd.exe and CD to your theme directly where gulpfile.js is located
  2. Run "gulp sass" to run the build task manually.
  3. Run "gulp sass:watch" to run the scss file watcher task.
The compiled css files will be generated in [theme\assets\base\css] directory

7. File Structure

To top

JANGO supports multiple themes and the core components including all the 3rd party plugins can be used accros all the themes.

JANGO Theme Folder Structure

Folder Description
JANGO Root folder
assets Assets folder contains of compiled css files, plugins, images and other files used by the theme
base Contains of the theme's base css, images, javascript and media files
plugins Contains of all plugins used withing JANGO
html Contains all of JANGO's HTML files for all pages.
src Contains of JANGO's SASS files
components Contains of JANGO's SASS files packaged by their individual component categories
plugins Contains of JANGO's SASS files that controls the plugins included
themes Contains of JANGO's color library files

8. Coding & Extending

To top

CSS

To overide the theme CSS styles in CSS level you should use assets/base/css/custom.css for your own customization. This will make the future updates easier if you keep your own CSS code seperate.

9. References

To top

Below is the list of all plugins and external resources used to power JANGO.

Name Description URL
jQuery 1.11.0 Core Javascript library http://www.jquery.com
jQuery Migrate plugin 1.2.1 jQuery Migrate plugin to simplify the transition from older versions of jQuery. The plugin restores deprecated features and behaviors so that older code will still run properly on jQuery 1.9 and later. Use the uncompressed development version to diagnose compatiblity issues, it will generate warnings on the console that you can use to identify and fix problems. Use the compressed production version to simply fix compatibility issues without generating console warnings http://www.jquery.com
Twitter Bootstrap v3.3.6 Sleek, intuitive, and powerful front-end framework for faster and easier web development http://getbootstrap.com
Bootstrap Hover Dropdown Plugin A simple plugin to enable twitter bootstrap dropdowns to activate on hover and provide a nice user experience. https://github.com/CWSpear/bootstrap-hover-dropdown
Slider Revolution Slider Revolution is an All-Purpose Slide Displaying Solution that allows for showing almost any kind of content. http://www.themepunch.com/revsliderjquery-doc/get-started/#introduction
Cube Portfolio Cube Portfolio is a jQuery grid plugin that provides powerfull portfolio system, beautiful animated filtering, custom captions and it’s perfect for portfolio projects, horizontal slider, images gallery, team members, blog posts or any other ordered grid content. http://scriptpie.com/cubeportfolio/live-preview/
Owl Corousel Plugin A great corousel plugin that is both responsive and flexible for customization. http://owlgraphic.com/owlcarousel/
CounterUp An excellent animation plugin for number counters. https://github.com/bfintal/Counter-Up
WOW Reveal Animate An awesome plugin to animate your elements during scroll. For complete list of animation styles, please refer to animate.css https://github.com/matthieua/WOW
FontAwesome The iconic font designed for use with Twitter Bootstrap http://fortawesome.github.com/Font-Awesome/
Simple Line Icons Simple Line Icons is 162 simple stroke icons that are great for mobile applications, websites, user interfaces, etc. All icons were converted from the same beautiful simple line icon sets released previously on GraphicBurger. http://graphicburger.com/simple-line-icons-webfont/
Animated Progress Bars With ProgressBar.js, it's easy to create responsive and stylish progress bars for the web. Animations perform well even on mobile devices. It provides a few built‑in shapes like Line, Circle and SemiCircle but you can also create custom shaped progress bars with any vector graphic editor. http://kimmobrunfeldt.github.io/progressbar.js/
Roboto Condense JANGO uses Roboto Condense web font from google fonts: http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700&subset=latin,cyrillic-ext,greek-ext,cyrillic,latin-ext,vietnamese,greek http://www.google.com/webfonts
Free & Properly Licensed Stock Photos JANGO uses open source free stock photos and properly licenses commercial stock photos that you can use in your projects within JANGO without any limitation. For more info please check the credits. unsplash.com/ www.flickr.com/photos/spacexphotos/with/16491695667/ www.pexels.com/ picjumbo.com/ www.imcreator.com/free

10. Change Log

To top

Version 1.3.7 - 30 May 2016

  • NEW: Animated Progress Bar
    • Added HTML Files
      • component-progress-bars-2.html
    • Modified CSS files
      • components.css
  • FIX: Improvements and Bug Fixes
    • Fixed Header Shopping Cart Scrolling for long cart lists
    • Fixed all One Page header scroll navigation active section detection

Version 1.3.6 - 10 May 2016

  • NEW: 7 New Components Added
    • 4 Isotope Gallery layouts
    • 3 Isotope Grid layouts
      • Modified HTML files
        • index.html
        • home-2.html
        • home-5.html
        • home-6.html
        • home-7.html
        • home-8.html
        • shop-home-2.html
        • shop-home-4.html
        • shop-home-7.html
      UPDATE: 2 New Plugins Added
      • Isotope Grid
      • iLightbox
      FIX: Improvements and Bug Fixes
      - Fixed Slider layout bugs for:
      • Slider 4 in index.html and slider-4.js
      • Slider 5 in home-8.html and slider-5.js
      - Fixed One Page Layout 6 Logo
      • onepage-6.html
      - Fixed Parallax bug on iOS devices
      • Disabled all parallax effects when viewing on iOS devices.
      - Other bug fixes

    Version 1.3.5 - 23 January 2016

    • FIX: Improvements and Bug Fixes
      - Fixed and Optimized mutliple margins and paddings
      • Modified HTML files
        • page-team.html
      • UPDATE: Slider Revolution Plugin
        - Updated Slider Revolution Plugin to version 5.1.6
        • Modified HTML files
          • index.html
          • home-2.html
          • home-3.html
          • home-4.html
          • home-5.html
          • home-6.html
          • home-7.html
          • home-8.html
          • home-9.html
          • home-10.html
          • home-11.html
          • home-12.html
          • onepage-1.html
          • onepage-2.html
          • onepage-3.html
          • onepage-4.html
          • onepage-5.html
          • onepage-6.html
          • onepage-7.html
          • onepage-8.html
          • onepage-9.html
          • onepage-10.html
          • onepage-11.html
          • onepage-12.html
          • shop-home-1.html
          • shop-home-3.html
          • shop-home-6.html
          • Modified css file: assets/base/css/components.css
          • Modified js files
            • assets/base/js/scripts/revo-slider/slider-1.js
            • assets/base/js/scripts/revo-slider/slider-2.js
            • assets/base/js/scripts/revo-slider/slider-3.js
            • assets/base/js/scripts/revo-slider/slider-4.js
            • assets/base/js/scripts/revo-slider/slider-5.js
            • assets/base/js/scripts/revo-slider/slider-6.js
            • assets/base/js/scripts/revo-slider/slider-7.js
            • assets/base/js/scripts/revo-slider/slider-8.js
            • assets/base/js/scripts/revo-slider/slider-9.js
            • assets/base/js/scripts/revo-slider/slider-10.js
            • assets/base/js/scripts/revo-slider/slider-11.js
            • assets/base/js/scripts/revo-slider/slider-12.js
            • assets/base/js/scripts/revo-slider/shop-slider-1.js
            • assets/base/js/scripts/revo-slider/shop-slider-2.js
            • assets/base/js/scripts/revo-slider/shop-slider-3.js
            • assets/base/js/scripts/revo-slider/shop-slider-4.js
            • Modified plugin folder: assets/plugins/revo-slider/*
          • UPDATE: Font Awesome
            - Updated Font Awesome to version 4.4
            • Modified HTML file: component-fontawesome-icons.html
            • Modified plugin folder: assets/plugins/font-awesome/*

          Version 1.3.4 - 4 November 2015

          • FIX: Improvements and Bug Fixes - Fixed breadcrumbs links optimization for mobile devices
            • Modified css file: assets/base/css/components.css
            - Fixed Footer 6 and Footer 7 Quick Links
            • Modified Component Blocks
              • footer-6
              • footer-7
              - Optimized Navigation Menu for iPad
              • Moved Portfolio Menu link into Pages Menu Link

            Version 1.3.3 - 22 October 2015

            • NEW: Element Reveal Animation Feature
              • Modified Component Blocks
                • index
                • about-1
                • about-2
                • about-3
                • app-1
                • app-2
                • features-1
                • features-4-1
                • features-4-2
                • features-4-3
                • features-4-4
                • features-4-5
                • features-4-6
                • features-4-7
                • features-8
                • features-9
                • latest-items-1
                • latest-items-3
                • latest-works-1
                • latest-works-2
                • product-1
                • pricing-1
                • services-2
                • steps-1
                • team-2
                • testimonials-2
                • tile-3
                • why-choose-us-1
              • Added JS file: assets/plugins/reveal-animate/wow.js
              • Added JS file: assets/plugins/reveal-animate/wow.min.js
              • Added JS file: assets/base/js/scripts/reveal-animate/reveal-animate.js
            • FIX: Improvements and Bug Fixes - Fixed breadcrumbs links optimization
              • Modified css file: assets/base/css/components.css
              - Fixed Client components mobile optimization alignment
              • Modified css file: assets/base/css/components.css
              - Fixed Tiles Component Background alignment
              • Modified css file: assets/base/css/components.css

            Version 1.3.2 - 30 September 2015

            • NEW: 2 About Pages
              • Added html file: page-about-3.html
              • Added html file: page-about-4.html
              • Modified html file: component-features.html
              • Modified css file: assets/base/css/components.css
            • NEW: FAQ Page
              • Added html file: page-faq-2.html
              • Modified css file: assets/base/css/components.css
            • FIX: Improvements and Bug Fixes
              - Fixed CounterUp bug
              • Modified folder: assets/plauings/counterup
              - Fixed OnePage-1.html slider UI bug
              • Modified css file: assets/base/css/components.css
              - Fixed plugins.css invalid attribute bug
              • Modified css file: assets/base/css/plugins.css
              - Updated partial Tabbed Content page with dynamic color swaps
              • Modified html file: tab-2.html
              - Fixed UI issue on Features 2
              • Modified css file: assets/base/css/components.css
              - Fixed UI Image issue on Tiles component
              • Modified css file: assets/base/css/components.css

            Version 1.3.1 – 13 September 2015

            • NEW: 28 eCommerce Shopping Page Templates
              • Added html file: shop-product-details-3.html
              • Added html file: shop-product-details-4.html
              • Added html file: shop-order-history-2.html
              • Modified css file: assets/base/css/components.css
            • FIX: Improvements & Minor Bug Fixes:
              - footer 1 line separator issue
              - footer 3 line separator issue
              - other minor bugs fixes

            Version 1.3.0 – 4 September 2015

            • NEW: 28 eCommerce Shopping Page Templates
              • Added html file: shop-home-1.html
              • Added html file: shop-home-2.html
              • Added html file: shop-home-3.html
              • Added html file: shop-home-4.html
              • Added html file: shop-home-5.html
              • Added html file: shop-home-6.html
              • Added html file: shop-home-7.html
              • Added html file: shop-product-list.html
              • Added html file: shop-product-grid.html
              • Added html file: shop-product-search.html
              • Added html file: shop-product-details.html
              • Added html file: shop-product-details-2.html
              • Added html file: shop-product-comparison.html
              • Added html file: shop-product-wishlist.html
              • Added html file: shop-customer-account.html
              • Added html file: shop-customer-dashboard.html
              • Added html file: shop-customer-profile.html
              • Added html file: shop-cart.html
              • Added html file: shop-cart-empty.html
              • Added html file: shop-checkout.html
              • Added html file: shop-checkout-complete.html
              • Added html file: component-shop-1.html
              • Added html file: component-shop-2.html
              • Added html file: component-shop-3.html
              • Added html file: component-shop-4.html
              • Added html file: component-shop-5.html
              • Added html file: component-shop-6.html
              • Added html file: component-shop-7.html
              • Modified css file: assets/base/css/components.css
            • NEW: 2 New eCommerce Footers
              • Modified css file: assets/base/css/components.css
            • NEW: 3 eCommerce Sidebar Menus
              • Added html file: shop-sidebar-menu.html
              • Added html file: shop-sidebar-menu-2.html
              • Added html file: shop-sidebar-dashboard.html
              • Modified css file: assets/base/css/components.css
            • NEW: JS functions
              • Added js file: assets/base/js/components-shop.js
              • Modified js file: assets/base/js/components.js
            • FIX: Improvements & Minor Bug Fixes:
              - mega menu mobile view child menu toggle fixed
              - minor bugs and stability fixes

            Version 1.2.0 – 2 August 2015

            • NEW: 15 New Components
              • Modified css file: assets/base/css/components.css
            • NEW: 4 New Footers
              • Modified css file: assets/base/css/components.css
            • NEW: Sidebar Menu
              • Added html file: sidebar-menu-1.html
              • Modified css file: assets/base/css/components.css
            • NEW: 2 Home Page Templates
              • Added html file: home-11.html
              • Added html file: home-12.html
              • Modified css file: assets/base/css/components.css
            • NEW: 2 One Page Templates
              • Added html file: onepage-11.html
              • Added html file: onepage-12.html
              • Modified css file: assets/base/css/components.css
            • NEW: Toggle Top Bar In Mobile
              • Modified css file: assets/base/css/components.css
              • Modified javascript file: assets/base/js/components.js
            • FIX: Improvements & Minor Bug Fixes:
              - mobile menu flickering issue
              - responsive header improvement
              - responsive topbar improvement
              - responsive mega menu improvement
              - submenu toggle vis arrow click for mobile mode
              - gulp support
              • Added javascript file: gulpfile.js
              • Added json file: package.js
              • Modified javascript file: assets/base/js/components.js
              • Modified css file: assets/base/css/plugins.css
              • Modified css file: assets/base/css/components.css
              • Modified css files: assets/base/css/themes/*

            Version 1.1.0 – 20 July 2015

            • NEW: 10 One Page Layout Examples
              • Added html file: onepage-1.html
              • Added html file: onepage-2.html
              • Added html file: onepage-3.html
              • Added html file: onepage-4.html
              • Added html file: onepage-5.html
              • Added html file: onepage-6.html
              • Added html file: onepage-7.html
              • Added html file: onepage-8.html
              • Added html file: onepage-9.html
              • Added html file: onepage-10.html
              • Modified javascript file: assets/base/js/app.js
              • Modified javascript file: assets/base/js/components.js
              • Added plugin: assets/plugins/jquery.easing.min.js
              • Modified css file: assets/base/css/plugins.css
              • Modified css file: assets/base/css/components.css
              • Modified css files: assets/base/css/themes/*
            • NEW: 5 Testimonials Component
              • Modified html file: component-testimonials.html
              • Modified css file: assets/base/css/components.css
            • FIX: Improvements & Minor Bug Fixes:
              - responsivenes improvements of all 10 revolution sliders in 10 home pages
              - responsivenes improvements of contact us page block responsivenes
              - responsivenes improvements of footer 2
              - menu menu's full width dropdown overflow issue on 1024 below resolution - language dropdown display on hover issue on 911 below resolution - some code improvements and minor bug fixes
              • Modified javascript file: assets/base/js/app.js
              • Modified javascript file: assets/base/js/components.js
              • Modified css file: assets/base/css/plugins.css
              • Modified css file: assets/base/css/components.css
              • Modified css files: assets/base/css/themes/*

            Version 1.0.0 – 12 July 2015

            • Initial Release