Documentation

logo

Getting Started

Modular HTML5 Multipurpose template is packed with so many features. It is based on card based layout, where each card/section comes with a different layout and seperate responsive functionality. So that, you can modify it properly according to your need.

Files and their structure

Modular/
├── assets/
      ├── css/    ... all .css files goes here
      ├── img/    ... all required images goes here
      ├── js/    ... all required .js files goes here
      ├── video/    ... video files goes here
├── demos/
      ├── home_agency.html
      ├── home_business.html
      ├── home_classic.html
      ├── home_corporate.html
      ├── home_event.html
      ├── home_landing.html
      ├── home_media.html
      ├── home_minimal.html
      ├── home_parallax.html
      ├── home_personal.html
      ├── home_portfolio.html
├── 404_1.html
├── 404_2.html
├── blank-page.html
├── clients.html
├── coming_soon.html
├── contact_us.html
├── Content_Blocks.html
├── counters.html
├── elements.html
├── footers.html
├── Hero_Headers.html
├── maintenance_1.html
├── maintenance_2.html
├── page_titles.html
├── portfolio.html
├── Pricing_tables.html
├── promo.html
├── sign_in.html
├── team.html
├── Testimonials.html

HTML Structure
                            	
<!doctype html>
<html class="no-js" lang="en">
    <head>
        ... favicon, stylesheets and meta tags goes here ... 
    </head>
    
    
    <!-- Main body tag - content goes here
    ============================================= -->
    <body>
    
    
        <!-- Preloader - loading animation
        ============================================= -->
        <div id="preloader">
            ... preloader goes here ...
        </div>
        <!-- /end of preloader -->
    
        
        <!-- Main content goes here 
        ============================================= -->
        <main id="top" class="page-404-1">
            ... here goes all sections/content blocks/cards ...
        </main>
        
        
        <!-- Navigation goes here 
        ============================================= -->
        
        
        <!-- All Necessary Scripts Goes Here -->
        <script src="..."></script>

    </body>
</html>										
                                
                            

Here in this theme, we have used different styelsheets and jquery plugins for different purposes and elements.

CSS Stylesheets We used
# Stylesheet Used For Necessity
1 animate.css animation purpose According to requirement
2 bootstrap.css responsive framework Important
3 font-awesome.min.css Icons According to requirement
4 ie.css targeting old ie browsers According to requirement
5 magnific-popup.css Modal Popups and gallery According to requirement
6 main.style.css Main Website Style Important
7 owl-carousel.css Carousels / Sliders According to requirement
8 style.css Styling all Sections Important
9 themify-icons.css Icons According to requirement
10 New blog.css Blogs According to requirement
JavaScript/Jquery Plugins We used
# Plugin Used For Necessity
1 bootstrap.min.js different elements According to requirement
2 jquery.countdown.min.js Count Down According to requirement
3 jquery.counterup.min.js On Scroll Animated Counter According to requirement
4 jquery.magnific-popup.min.js Modal Popup and Gallery According to requirement
5 jquery.matchHeight-min.js Equal Height Blocks According to requirement
6 jquery.vide.min.js Background Video According to requirement
7 jquery.waypoints.min.js Used with jquery.counterup According to requirement
8 main.js All necessary scripts According to requirement
9 masonry.pkgd.min.js Masonry Layouts According to requirement
10 modernizr.js Navigation Important
11 owl.carousel.js Carousels/Slider According to requirement
12 parsley.min.js Form Validations According to requirement
13 scripts.js Some Important Scripts Important
14 scrollreveal.js On Scroll Animation According to requirement
15 imagesloaded.pkgd.min.js Along with masonry.pkgd.min.js According to requirement
16 stellar.js Parallax According to requirement
17 one-page-nav.js New One Page Navigation According to requirement

Main Motto

process

Step By Step Guide

Include Meta Tags

Include all necessary meta tags into head section.

                            	
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>... Title of page ...</title>
<meta name="description" content="... describe your page ...">        
<meta name="keywords" content="... keywords goes here ...">
                                
                            
Include Favicons

Include all necessary favicons into head section.

                           
<link rel="shortcut icon" href="path to/favicon-32x32.png" type="image/x-icon">
<link rel="apple-touch-icon" sizes="57x57" href="path to/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="path to/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="path to/apple-icon-144x144.png">

For Your Reference
Necessary CSS Files Include CSS Stylesheets along with Modernizr.js Script

Include all required CSS Stylesheets into head section.

              
<!-- Necessary Stylesheets -->             
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/main.style.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/themify-icons.css">
<link rel="stylesheet" href="assets/css/style.css">

<!-- Modernizr.js Script -->
<script src="assets/js/modernizr.js"></script>

Necessary Scripts Add important Jquery scripts

Include all necessary scripts before </body> (closing body) tag.

              
<script src="assets/js/jquery-2.1.1.js"></script>
<script src="assets/js/scripts.js"></script>

We recommend you to start from a blank-page.html then it will easy for you to design pages. There you just have to copy and paste the code. Isn't that easy..?

blank-page.html looks like this
                            
<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Modular | Index</title>
        <meta name="description" content="The ultimate multipurpose HTML5 Template">        
        <meta name="keywords" content="modular, bootstrap, business, corporate, creative, multipurpose, responsive">

        <!-- Favicons - add your favicons here
        ============================================= -->
        <link rel="shortcut icon" href="assets/img/other/favicon-32x32.png" type="image/x-icon">
        <link rel="apple-touch-icon" sizes="57x57" href="assets/img/other/apple-icon-57x57.png">
        <link rel="apple-touch-icon" sizes="72x72" href="assets/img/other/apple-icon-72x72.png">
        <link rel="apple-touch-icon" sizes="114x114" href="assets/img/other/apple-icon-144x144.png">

        <!-- CSS Stylesheets 
        ============================================= -->
        <link rel="stylesheet" href="assets/css/bootstrap.css">
        <link rel="stylesheet" href="assets/css/main.style.css">
        <link rel="stylesheet" href="assets/css/themify-icons.css">
        <link rel="stylesheet" href="assets/css/font-awesome.css">
        <link rel="stylesheet" href="assets/css/style.css">
		<script src="assets/js/modernizr.js"></script>
        
        <!-- remove below CSS style after editing this page -->
        <style type="text/css">
            main{ height:100vh; width:100%; background:#FFFFFF}
		</style>

    
    </head>




    <!-- Main body tag -- content goes here
    ============================================= -->
    <body>




        <!-- Preloader 
        ============================================= -->
        <div id="preloader">
            <div id="status">
                <div data-loader="circle-side"></div>
            </div>
        </div>
        <!-- /end of preloader -->

    
    
    
        <!-- Main content goes here 
        ============================================= -->
        <main id="top">
        	<h3 class="margin-top100 text-center">Blank Page</h3>
	    </main>



        <!-- Navigation goes here 
        ============================================= -->
        
        
        
        <!-- Go to top arrow    
        ============================================= -->
        <a href="#top" class="goto-top ti-arrow-up"></a>


        
        <script src="assets/js/jquery-2.1.1.js"></script>
        <script src="assets/js/scripts.js"></script>
        
    </body>
</html> 

How Overlay/Push Navigation works Navigation Logo

Navigation logo has been wrapped into <a>...</a> tag with class logo


<!-- Navigation goes here 
============================================= -->
        
<!-- logo goes here -->
<a href="index.html" class="logo">
    <img src="assets/img/other/logo64_alt.png" width="54" alt="logo">
</a>

How Overlay/Push Navigation works Navigation Icon Light Icon

Light Navigation Icon with white background


<!-- Navigation goes here 
============================================= -->
        
<!-- logo goes here -->

<!-- Navigation icon -->
<a href="#navigation" class="nav-button">Menu 
    <span class="nav-icon"></span>
</a>

How Overlay/Push Navigation works Navigation Icon Dark Icon

To use dark navigation icon with black background, apply .nav-button-dark class


<!-- Navigation goes here 
============================================= -->
        
<!-- logo goes here -->

<!-- Navigation icon -->
<a href="#navigation" class="nav-button nav-button-dark">Menu 
    <span class="nav-icon"></span>
</a>

Overlay/Push Navigation links

<!-- Navigation wrapper -->
<div id="navigation" class="navigation">
    <div class="nav-wrapper">
        <div class="container">
            <div class="col-md-10 just-center navigation-pre-block">
                <div class="navigation-block clearfix">
                    <ul class="link-blocks">
                        <li><a href="home_agency.html">Our Agency</a></li>
                        <li><a href="../../sections/hero_headers/hero_header_1.html">Hero Headers</a></li>
                        <li><a href="../../pages/404_1.html">404 Page</a></li>
                        <li><a href="../../portfolio/masonry_3_columns_gutter.html">Portfolio</a></li>
                        <li><a href="../../blog/small_cards_sidebar.html">Blog</a></li>
                        <li><a href="../../elements/img_gallery/zoom_gallery.html">Elements</a></li>
                    </ul>
                    <div class="info-blocks">
                       <a class="mail-link transition bttn-scale" href="mailto:contact@company.com?Subject=I%20have%20a%20query" target="_top">contact@company.com</a>
                       <span class="contact-us"><span class="ti-mobile icon"gt;</spangt;9999-3456-7890</spangt;
                       <div class="social">
                           <a href="#0" class="ti-facebook"></a>
                           <a href="#0" class="ti-twitter"></a>
                           <a href="#0" class="ti-linkedin"></a>
                       </div>
                     </div>
                 </div>
            </div>
        </div>
    </div>
</div>

One Page Navigation New Navigation

We have introduced a new one page navigation menu in version v1.1

For One Page Navigation to work correctly you need to include one-page-nav.css,bootstrap.min.js and one-page-nav.js


<!-- add dome classes to body tag -->
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">

<nav id="mainNav" class="navbar navbar-default navbar-black navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span><i class="fa fa-bars"></i>
            </button>
            <a class="navbar-brand page-scroll" href="#page-top">
                <img class="primary-logo" src="../assets/img/other/logo64_dark.png" width="50" alt="logo">
                <img class="secondary-logo" src="../assets/img/other/logo64_dark.png" width="50" alt="logo">
            </a>
        </div>
        <!-- Collect the nav links for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li><a class="page-scroll" href="#page-top">Home</a></li>
                <li><a class="page-scroll" href="#services">Services</a></li>
                <li><a class="page-scroll" href="#work">Our Work</a></li>
                <li><a class="page-scroll" href="#clients">Clients</a></li>
                <li><a class="page-scroll" href="#contact">Contact</a></li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>


<main id="top">
    <section id="page-top">... content goes here ...</section>
    <section id="services">... content goes here ...</section>
    <section id="work">... content goes here ...</section>
    <section id="clients">... content goes here ...</section>
    <section id="contact">... content goes here ...</section>
</main>

Refer home_agency.html in One Page Demos

Multi-Page/Horizontal Multi-level Navigation New Navigation

We have introduced a new multi-level horizontal navigation menu in version v2.0

For multi-level horizontal navigation to work correctly you need to include smartmenu.css,jquery.smartmenus.js and smartmenu.script.js"


<nav id="main-nav" role="navigation">
    <!-- logo -->
    <a href="#0" class="brand-name">
        <img class="initial-logo" src="logo_big_light.png" width="130" alt="">
        <img class="scroll-logo" src="logo_big_dark.png" width="130" alt="">
    </a>
    <!-- Menu Button -->
    <a href="#0" class="toggle-bttn">
        <span></span>
    </a>
    <!-- Main Navigation Menu -->
    <ul id="main-menu" class="sm sm-clean">
        <li>
            <a href="#0">Menu</a>
            <ul>
                <li><a href="...">link</a></li>
                <li><a href="...">link</a></li>
                .............
                .........
                .....
            </ul>
        </li>
    </ul>
    <!-- search and shopping cart -->
    <div class="other-tools">
        <a href="#0" class="search"><span class="ti-search"></span></a>
    </div>
    <!-- search field -->
    <div class="search-field-wrapper">
        <div class="container">
            <form class="search-form clearfix" action="" method="get">
                <div>
                    <span class="ti-search search-form-icon"></span>
                    <input id="search" type="text" name="q" value="">
                    <label for="search">Search here & hit enter...</label>
                </div>
            </form>
        </div>
    </div>
</nav>
        

Script goes like this


// menu on-scroll event
$(window).scroll(function() {
    if ($("nav").offset().top > 50) {
        $("nav").addClass("scroll-nav");
    } 
    else {
        $("nav").removeClass("scroll-nav");
    }
});

Refer home_agency.html in Multi Page Demos

Go to top Arrow

To change its CSS according to your requirement, search for .goto-top class in main.style.css

Here we have used, ti-arrow-up icon from themify-icons.css to use as a arrow-icon.


<!-- Go to top arrow    
============================================= -->
<a href="#top" class="goto-top ti-arrow-up"></a>

Use of Preloader

<!-- Main body tag content goes here
============================================= -->
<body>
    <!-- Preloader 
    ============================================= -->
    <div id="preloader">
        <div id="status">
            <div data-loader="circle-side"></div>
        </div>
        <span class="loading-text">Loading...</span>
    </div>
    <!-- /end of preloader -->

To change its CSS according to your requirement, search for .preloader class in main.style.css

Script for .preloader. You will find it in scripts.js.

/* Page Preloader Script */
$(window).load(function() {
    $('#preloader').delay(100).fadeOut('slow');
    $("html,body").addClass("add-oveflow");
});