Documentation

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

Step By Step Guide
Include Meta TagsInclude 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">
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 NavigationWe 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 ArrowTo 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");
});