# 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-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`

### 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-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`

# 6. SASS

To top

JANGO's CSS files are powered by SASS(sass-lang.com). The required SASS version is v3.3.7 or later. We recommend you to use Koala App Tool from koala-app.com to compile the SASS files in real time. Simply install the Koala App Tool and add the JANGO's SASS directory (theme/src) to start compiling the SASS files.

When you compile the sass files do not compile includable sass files, which have their filename that starts with underscore (e.g: _variables.scss, _buttons.scss). Only the master files can be compiled (all the scss files without underscore infront of their filenames). Refer the below master SASS files to be compiled to spesific paths. For more info please check theme/src/koala-config.json file which used as a main configuration file to comple the JANGO sass files.

# 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.5 | 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
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
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/
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.0.0 – 12 July 2015

- Initial Release