Moustache & Pipe HTML Template Documentation

By: Crafted Pixels

HTML Files & Structure

Moustache & Pipe is a fully responsive HTML template based on Bootstrap 3, W3C Markup Validated, Retina-Ready and cross-browser compatible.

Please keep in mind that some of the features require certain conditions in order to work:

The template's main component parts are: main nav, header, content and footer. The html is heavily commented, for easy modifications, and the main structure looks like this:


<!-- nav -->
<nav id="bt-menu" class="bt-menu">
<!-- nav content here -->
</nav>
<!-- end nav -->

<!-- hero --> 
<div class="hero">
<!-- hero area content here (h1, h2 subheadline) -->
</div>
<!-- end hero--> 

<!-- content starts here -->
<!-- sections content here -->
<!-- content ends here -->

<!-- footer --> 
<footer class="clearfix">
<!-- footer content here (copyright) -->
</footer>
<!-- end footer -->


  1. Nav
    
<!-- nav -->
<nav id="bt-menu" class="bt-menu">
<a href="#" class="bt-menu-trigger"><span>Menu</span></a>
<ul>
<li><a href="#top">Home</a></li>
<li><a href="#page-nav-about">About</a></li>
<li><a href="#page-nav-work">Our Work</a></li>
<li><a href="#page-nav-solutions">Solutions</a></li>
<li><a href="#page-nav-team">The Team</a></li>
<li><a href="#page-nav-blog">The Blog</a></li>
<li><a href="#page-nav-contact">Contact</a></li>
</ul>
</nav>
<!-- end nav -->


  2. Hero Section contains the headline H1 and the subheadline H2. You can also add a logo above the H1.
    
<!-- hero --> 
<div class="hero">
<div class="container">
<h1>Moustache &amp; Pipe</h1>
<h2>Artisans of Web Beauty</h2>
</div>
</div>
<!-- end hero-->


  3. Content structure:
    
<!-- content starts here -->

<!-- section About --> 
<section class="clearfix" id="page-nav-about">
<!-- About section content here -->
</section>
<!-- end section About -->

<!-- section Work--> 
<section class="clearfix portfolio" id="page-nav-work">
<!-- Portfolio section content here -->
</section>
<!-- end section work -->

<!-- section Solutions --> 
<section class="clearfix" id="page-nav-solutions">
<!-- Solutions section content here -->
</section>
<!-- end section Solutions -->

<!-- section Team --> 
<section class="clearfix" id="page-nav-team">
<!-- Team section content here -->
</section>
<!-- end section Team -->

<!-- section Blog --> 
<section class="clearfix" id="page-nav-blog">
<!-- Blog section content here -->
</section>
<!-- end section Blog -->

<!-- section Contact --> 
<section class="clearfix" id="page-nav-contact">
<!-- Contact section content here -->
</section>
<!-- end section Contact -->


<!-- content ends here -->


CSS Files & Structure

Moustache & Pipe uses 3 css files: style.css, font-awesome.min.css and bootstrap.min.css (minified for performance reasons).

style.css file is heavy commented for easy modifications. The content is structured like this:

Grid

Moustache & Pipe is based on Bootstrap 3 grid.

You can find more information on the Boostrap framework website getbootstrap.com, in the documentation grid section: getbootstrap.com/css/#grid.

Elements

You can find all the elements that can be used here: getbootstrap.com/components/.

JavaScript

To optimize performance, Moustache & Pipe template includes all the scripts in the footer, before </body> tag.

The scripts included are the following (each script is explained below):


<!-- javascript -->
<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/borderMenu.js"></script>
<script src="js/classie.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<script src="js/isotope.pkgd.min.js"></script>
<script src="js/jquery.colio.min.js"></script>
<script src="js/jquery.scrollUp.min.js"></script>
<script src="js/jquery.flexslider.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="js/gmaps.js"></script>
<script src="js/custom.js"></script>
<!-- end javascript -->

Contact Section


Google Maps

The Google map is automatically focusing on the address that you input in the html.

Just replace "Eiffel Tower, Avenue Anatole France, Paris, France" with your own address and refresh the page.


<div class="col-lg-3 col-xs-12 clearfix" id="contact-text">
<div class="row clearfix">
<p id="address">Eiffel Tower, Avenue Anatole France, Paris, France</p><!-- input your address on this line -->
<p class="fa fa-phone"> 0099-4572386</p><br>
<p class="fa fa-envelope-o"> <a href="mailto:#" target="_blank">hello@leemail.com</a></p>
</div>
<div class="row clearfix" id="contact-social">
<a class="fa fa-twitter-square" href="#" target="_blank"></a>
<a class="fa fa-linkedin-square" href="#" target="_blank"></a>
<a class="fa fa-facebook-square" href="#" target="_blank"></a>
<a class="fa fa-google-plus-square" href="#" target="_blank"></a>
<a class="fa fa-instagram" href="#" target="_blank"></a>
<a class="fa fa-skype" href="#" target="_blank"></a>
</div>
</div>


Contact Form

To use the contact form, you must replace yourmail@demo.com with your email on line 49 of contact.php file (located in "contact-form" folder).

Please note that using the contact form requires an actual server.


Social Media

All icons are webfont format (FontAwesome), so they look just as perfect on Retina/HiDPI screens. In the Social Media part of the Contact section are included Google+, Facebook, Twitter, Instagram, LinkedIn and Skype, but any other FontAwesome icons can be added.


Updates

Sources and Credits