Documentation - Website Template

Thank You For Purchasing Metronic, One of Our Premium Items!

If you have any questions that are beyond the scope of this help file, please email our support [email protected].

Overview Metronic is a responsive Admin & Frontend theme powered with Twitter Bootstrap Framework for admin and backend applications. Metronic Frontend has a clean and intuitive minimalistic design which makes your next project look awesome and yet user friendly. Metronic comes with a huge collection of plugins and UI components and it works in all major web browsers, tablets and phones. Author: KeenThemes Contact: [email protected] Created On: 05/08/2013 Live Preview Other Themes	Table of Contents: 1. Overview 2. Template Structure 3. Font 4. Theme & Layout Configuration 5. Header with Top Bar 6. Main Menu 7. Buttons 8. Javascript Initialization 9. Javascript Plugins & Resources 10. References 11. Change Log 12. End of Documentation

All template files have fixed structure consisting of front-header, slider-main, container and front-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

Page head contains metadata, javascript and css files:

<head>
    <meta charset="utf-8" />
    <title>Metronic Frontend | Homepage</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />
    <!-- BEGIN GLOBAL MANDATORY STYLES -->
    <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="assets/plugins/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/reset.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/style-metro.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/front.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css"/>
    <link href="assets/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet" />               
    <link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="assets/plugins/bxslider/jquery.bxslider.css" rel="stylesheet" />
    <link type="text/css" href="assets/plugins/search/css/component.css" rel="stylesheet" />
    <link rel="stylesheet" href="assets/plugins/revolution_slider/css/rs-style.css" media="screen">
    <link rel="stylesheet" href="assets/plugins/revolution_slider/rs-plugin/css/settings.css" media="screen">                
    <!-- END GLOBAL MANDATORY STYLES -->
    <link rel="shortcut icon" href="favicon.ico" />
</head>

Header

Header contains of logo and top menu bar and it used in all pages. HTML code of header container shown below:

<div class="front-header container">
	<div class="navbar">
		<div class="navbar-inner">
		</div>
	</div>
</div>

Slider

Revoluton Slider

    <!-- BEGIN REVOLUTION SLIDER -->
    <div class="fullwidthbanner-container slider-main margin-bottom-10">
        <div class="fullwidthabnner">
            <div class="tp-bannertimer tp-bottom"></div>
        </div>
    </div>
    <!-- END REVOLUTION SLIDER -->

Content

Content consists of page title, breadcrumbs and page's main body. HTML code of Content container as shown below:

    <!-- BEGIN CONTAINER -->   
    <div class="container">
    </div>
    <!-- END CONTAINER -->

Footer

    <!-- BEGIN FOOTER -->
    <div class="front-footer">
        <div class="container">
        </div>
    </div>
    <!-- END FOOTER -->

    <!-- BEGIN COPYRIGHT -->
    <div class="front-copyright">
        <div class="container">
        </div>
    </div>
    <!-- END COPYRIGHT -->

End Of Page(Javascripts)

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

    <!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
    <!-- BEGIN CORE PLUGINS -->
    <script src="assets/plugins/jquery-1.10.1.min.js" type="text/javascript"></script>
    <script src="assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="assets/plugins/back-to-top.js"></script>    
    <script type="text/javascript" src="assets/plugins/bxslider/jquery.bxslider.js"></script>
    <script type="text/javascript" src="assets/plugins/fancybox/source/jquery.fancybox.pack.js"></script>    
    <script type="text/javascript" src="assets/plugins/hover-dropdown.js"></script> 
    <script type="text/javascript" src="assets/plugins/revolution_slider/rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
    <script type="text/javascript" src="assets/plugins/revolution_slider/rs-plugin/js/jquery.themepunch.revolution.min.js"></script> 

    <!--[if lt IE 9]>
    <script src="assets/plugins/respond.min.js"></script>  
    <![endif]-->   
    <!-- END CORE PLUGINS -->
    <script src="assets/scripts/index.js"></script>      
    <script src="assets/scripts/app.js"></script>      
    <script type="text/javascript">
        jQuery(document).ready(function() {
            App.init();
            App.initFancybox();            
            App.initBxSlider();
            Index.initRevolutionSlider();                    
        });
    </script>
    <!-- END JAVASCRIPTS -->

HTML Code Comment Sample

All the html, css and javascript file contents have easy to refer and meaningful comments:

<!-- BEGIN LOGO (you can use logo image instead of text)-->
<a class="brand logo-v1" href="index.html">
	<img src="assets/img/logo.png" alt="">
</a>
<!-- END LOGO -->

CSS Code Comment Sample

/********************
 GENERAL LAYOUT 
*********************/
/***
Top Bar
***/
.front-topbar {
	padding: 3px 0;
	background: #eee;
}

/*Social Icons*/
.front-topbar .social-icons li {
	margin-bottom: 0;
}

Metronic uses Open Sans font from google fonts. The font imported in main css file: assets/css/style.css

/***
Import fonts
***/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);

Setup Theme

Metronic Frontend comes with 4 color themes, blue, red, green, orange. To setup a selected theme. Include style_[theme_name].css in page head. For instance, if you like to use blue theme, include style_blue.css css file. CSS file load order should be followed as shown below:

<head>
    <meta charset="utf-8" />
    <title>Metronic Frotnend | Homepage</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />
    <!-- BEGIN GLOBAL MANDATORY STYLES -->
    <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="assets/plugins/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/reset.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/style-metro.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="assets/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet" />               
    <link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="assets/plugins/bxslider/jquery.bxslider.css" rel="stylesheet" />
    <link rel="stylesheet" href="assets/plugins/flexslider/flexslider.css" type="text/css" media="screen">          
    <link rel="stylesheet" href="assets/plugins/revolution_slider/css/rs-style.css" media="screen">
    <link rel="stylesheet" href="assets/plugins/revolution_slider/rs-plugin/css/settings.css" media="screen">                
    <link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/themes/blue.css" rel="stylesheet" type="text/css" id="style_color"/>    
    <!-- END GLOBAL MANDATORY STYLES -->
    <link rel="shortcut icon" href="favicon.ico" />
</head>

Top bar contains of contact info, social links etc.

Top Bar Options

  <!-- BEGIN TOP BAR -->
    <div class="front-topbar">
        <div class="container">
            <div class="row-fluid">
                <div class="span6">
                    <ul class="unstyled inline">
                        <li><i class="icon-phone topbar-info-icon top-2"></i>Call us: <span>(1) 456 6717</span></li>
                        <li class="sep"><span>|</span></li>
                        <li><i class="icon-envelope-alt topbar-info-icon top-2"></i>Email: <span>[email protected]</span></li>
                    </ul>
                </div>
                <div class="span6 topbar-social">
                    <ul class="unstyled inline">
                        <li><a href="#"><i class="icon-facebook"></i></a></li>
                        <li><a href="#"><i class="icon-twitter"></i></a></li>
                        <li><a href="#"><i class="icon-google-plus"></i></a></li>
                        <li><a href="#"><i class="icon-linkedin"></i></a></li>
                        <li><a href="#"><i class="icon-youtube"></i></a></li>
                        <li><a href="#"><i class="icon-skype"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>        
    </div>
    <!-- END TOP BAR -->

Top menu enables an easy access to most frequently accessed information and pages.

Top Menu Dropdown Options

      <div class="navbar">
                <div class="navbar-inner">
				
                    <!-- BEGIN LOGO (you can use logo image instead of text)-->
                    <a class="brand logo-v1" href="index.html">
                        <img src="assets/img/logo_blue.png" id="logoimg" alt="">
                    </a>
                    <!-- END LOGO -->

                    <!-- BEGIN RESPONSIVE MENU TOGGLER -->
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>
                    <!-- END RESPONSIVE MENU TOGGLER -->

                    <!-- BEGIN TOP NAVIGATION MENU -->
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li class="dropdown active">
                                <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#">
                                    Home
                                    <i class="icon-angle-down"></i>
                                </a>
                                <ul class="dropdown-menu">
                                    <li class="active"><a href="index.html">Home Default</a></li>
                                    <li><a href="page_home2.html">Home with Top Bar</a></li>
                                </ul>
                            </li>
                            <li><a href="page_about.html">About Us</a></li>
                            <li><a href="page_services.html">Services</a></li>
                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#">
                                    Features
                                    <i class="icon-angle-down"></i>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="feature_typography.html">Typography</a></li>
                                    <li><a href="feature_buttons.html">Buttons</a></li>
                                    <li><a href="feature_forms.html">Forms</a></li>
                                    <li><a href="feature_icons.html">Icons</a></li>
                                </ul>
                            </li>                        
                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#">
                                    Portfolio
                                    <i class="icon-angle-down"></i>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="portfolio_4.html">Portfolio 4</a></li>
                                    <li><a href="portfolio_3.html">Portfolio 3</a></li>
                                    <li><a href="portfolio_2.html">Portfolio 2</a></li>
                                    <li><a href="portfolio_item.html">Portfolio Item</a></li>
                                </ul>
                            </li>
                            <li><a href="page_prices.html">Prices</a></li>
                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#">
                                    Blog
                                    <i class="icon-angle-down"></i>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="blog.html">Blog Page</a></li>
                                    <li><a href="blog_item.html">Blog Item</a></li>
                                </ul>
                            </li>
                            <li><a href="page_contacts.html">Contact</a></li>
                            <li class="menu-search">
                                <span class="sep"></span>
                                <i class="icon-search search-btn"></i>
                            </li>
                        </ul>
                        <div class="search-box">
                            <div class="input-append">
                                <form>
                                    <input style="background:#fff;" class="m-wrap" type="text" placeholder="Search" />
                                    <button type="submit" class="btn theme-btn">Go</button>
                                </form>
                            </div>
                        </div>                            
                    </div>
                    <!-- BEGIN TOP NAVIGATION MENU -->
                </div>
            </div>

Button styles can be applied to any element with the .btn class applied. Basically, you'll want to apply these to only <a> and <button>, <input> elements.

class=""	Description
`<button type="button" class="btn">Default button</button>`	Default button
`<button type="button" class="btn blue">Blue button</button>`	Blue button
`<button type="button" class="btn red">Red button</button>`	Red button
`<button type="button" class="btn green">Green button</button>`	Green button
`<button type="button" class="btn purple">Purple button</button>`	Purple button
`<button type="button" class="btn yellow">Yellow button</button>`	Yellow button
`<button type="button" class="btn grey">Grey button</button>`	Grey button
`<button type="button" class="btn grey mini">Grey Mini button</button>`	Grey Mini button
`<button type="button" class="btn grey big">Huge button</button>`	Huge button

Core javascript initialization implemented in assets/scripts/app.js thorugh App object as shown below. This approach enables an easy modular implementation to initialize jquery plugins and other application logics.

var App = function () {

    var localVariable; //local variable

    var sampleFunction = function() {
       //sample function code
    }

    return {

        //main method to initiate template pages
        init: function () {           
            sampleFunction() // call local function
        },

        //sample method declaration
        sampleMethod: function (test) 
        {
          alert(test);
      }

    };

}();

Core Handler Functions defined in `assets/scripts/app.js`

Below will be listed all handler functons implemented in App object:

handleIEFixes

Fix html5 placeholder attribute for ie7 & ie8.

handleBootstrap

Bootstrap plugins initialization.

handleMisc

Handle Scroller

handleSearch

Show/hide ssearchbar

handleTheme

Set Theme Color

Select Plugin Or Resource:

Bootstrap

Metronic Frontennd based on Twitter Bootstrap

CSS Files

<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>

JS Files

<script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

Official Documentation

http://getbootstrap.com/getting-started/

Bxslider

Fully loaded, responsive content slider

CSS Files

<link href="assets/plugins/bxslider/jquery.bxslider.css" rel="stylesheet" />

JS Files

<script type="text/javascript" src="assets/plugins/bxslider/jquery.bxslider.js"></script>

Official Documentation

http://bxslider.com

Fancybox

FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages.

CSS Files

<link href="assets/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet" />

JS Files

<script type="text/javascript" src="assets/plugins/fancybox/source/jquery.fancybox.pack.js"></script>

Official Documentation

http://www.fancyapps.com/fancybox/

Font Awesome 3.2.0

The iconic font designed for use with Twitter Bootstrap

CSS Files

<link href="assets/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" />

Official Documentation

http://fortawesome.github.com/Font-Awesome/

Font Awesome 3.2.0

GMaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code.

CSS Files

No CSS file

JS Files

<script src="assets/plugins/gmaps/gmaps.js" type="text/javascript"></script>

Official Documentation

http://hpneo.github.com/gmaps/

Revolution Slider

Turn simple HTML markup into a responsive or fullwidth slider with must-see-effects and meanwhile keep or build your SEO optimization.

CSS Files

<link rel="stylesheet" href="assets/plugins/revolution_slider/css/rs-style.css" media="screen">
<link rel="stylesheet" href="assets/plugins/revolution_slider/rs-plugin/css/settings.css" media="screen">

JS Files

<script type="text/javascript" src="assets/plugins/revolution_slider/rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="assets/plugins/revolution_slider/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

Official Documentation

Please kindly find documentation for Revolution Slider in downloaded pack

Uniform

Minimalistic form elements with jQuery

CSS Files

<link href="assets/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>

JS Files

<link href="assets/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>

Official Documentation

http://uniformjs.com/

Open Sans

Metornic uses Open Sans web font from google fonts: http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700

CSS Files

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);

Official Documentation

http://www.google.com/webfonts

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

Name	Description	URL
jQuery 1.10.1	Core Javascript library	http://www.jquery.com
Twitter Bootstrap v2.3.1	Sleek, intuitive, and powerful front-end framework for faster and easier web development	http://twitter.github.com/bootstrap/
Bxslider	Fully loaded, responsive content slider	http://bxslider.com
FancyBox	FancyBox is a tool for displaying images, html content and multi-media	http://fancybox.net/
gmaps.js	gmaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code	http://hpneo.github.com/gmaps/
Revolution Slider	Turn simple HTML markup into a responsive or fullwidth slider with must-see-effects and meanwhile keep or build your SEO optimization.	http://uniformjs.com/
Uniform	Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility	Revolution Slider on COdecanyon
Font Awesome	The iconic font designed for use with Twitter Bootstrap	http://fortawesome.github.com/Font-Awesome/
Open Sans	Metornic Frontend uses Open Sans web font from google fonts: http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700	http://www.google.com/webfonts

Version 1.0 – 13 Februry 2013

Initial release

Once again, thanks for purchasing Metronic. We hope you will enjoy using it for your next project.

Thank You For Purchasing Metronic, One of Our Premium Items!

Overview

Table of Contents:

2. Template Structure

Beginning of Page

Page Head

Header

Slider

Content

Footer

End Of Page(Javascripts)

HTML Code Comment Sample

CSS Code Comment Sample

3. Font

4. Theme & Layout Configuration

Setup Theme

5. Header with Top Bar

Top Bar Options

6. Main Menu

Top Menu Dropdown Options

7. Buttons

8. Javascript Initialization

Core Handler Functions defined in assets/scripts/app.js

handleIEFixes

handleBootstrap

handleMisc

handleSearch

handleTheme

9. Javascript Plugins & Resources

Select Plugin Or Resource:

Bootstrap

CSS Files

JS Files

Official Documentation

Bxslider

CSS Files

JS Files

Official Documentation

Fancybox

CSS Files

JS Files

Official Documentation

Font Awesome 3.2.0

CSS Files

Official Documentation

Font Awesome 3.2.0

CSS Files

JS Files

Official Documentation

Revolution Slider

CSS Files

JS Files

Official Documentation

Uniform

CSS Files

JS Files

Official Documentation

Open Sans

CSS Files

Official Documentation

10. References

11. Change Log

Version 1.0 – 13 Februry 2013

12. End Of Documentation

Core Handler Functions defined in `assets/scripts/app.js`