Metrize - Responsive Flipcard Template

General Markup

There are three pages included in this pack. The first one is index.html where inside the pages with classes about-page, portfolio-page, resume-page and contact-page. Others are blog.html and blog-single.html. Here's the outlining of the first page:

<!-- Full Front page Area -->
<div class="page-front container">
<!-- Sliders, socials, grid-boxes -->
     -------------
     -------------
<!-- Main Navigation -->
    <nav role="navigation">
        <ul class="main-nav">
            <!-- Navigation Markup -->
        </ul>
    </nav>
</div> <!-- End Page-front -->

<!-- Content for Pages -->
<div class="content-pages">
     <!-- Content for about page -->
    <div class="about-page">  
        .....
        <div class="container">     <!-- Every page has container div for layout -->
            <div class="row">
                <!-- Row class inside for arranging them in row (see bootstrap doc) -->
            </div>
        </div>
    </div>


    <!-- Content for Portfolio Page -->
    <div class="portfolio-page">
        <div class="container">
             <div class="row">
                
            </div> 

            <!-- Other rows, classes, contents -->   
        </div>
    </div>


    <!-- Content for Resume Page -->
    <div class="resume-page">
        <div class="container">   
            <div class="row">
                
            </div>  
             <!-- Others rows, classes, contents --> 
        </div>
    </div>


    <!-- Content for contact Page -->
    <div class="contact-page">
        <div class="container"> 
            <div class="row">
                
            </div>    
             <!-- Others rows, classes, contents --> 
        </div>
    </div>

     <!-- Inner navigation -->
      <nav class="inner-nav" id="inner-nav>
        ......
            ......
      </nav>
</div>

Important Classes Used

Here I'll describe the some of the boostrap classes which was used in this theme. You'll find more about at bootstrap doc online.

Classes Description
.container Set the width of page. Default is 1170px.
.row For grouping content in a row
.col-md-*, .col-sm-* For grouping content in column and set their width, `md` stands medium device, `sm` for small devices (iPhone, Tabs etc...)
.elegant-* Not a bootstrap class, but a icon fonts class used for custom icons.
parallax For parallax effect in background image. To edit its speed, edit the custom.js file

I've built the style of the theme in `less` file for time saving and complex code. The syntax of the less file is almost same as css but with added flexibility. If you know css then you can easily understand `less` style in a minute. If you want to edit the style of the template, then you can edit less files (then compile into css) or directly edit css. However less stylesheet is split into codes for each page content so it will be easy to edit `less`. (If you have a less command line installed in your system, you can compile with lessc command

CSS Stylesheets

There are 5 files in the css folder. The important one are main.css and bootstrap-custom.css. Other file are from their respective javascript plugin.

File Name Description
bootstrap-custom.css Custom bootstrap css file (not all functionality included)
main.css Main user defined style
magnific-popup To be used with magnific-popup script. Edit this if you want to edit the popup style
owl.carousel.css, owl.theme.css Used for owl.carousel.min.js script file.

Less Stylesheets (only if you know less)

Less stylesheet is split into codes for each page content so that it will be easy for user to customize. After editing any of less files you have to compile them to css for production use. You can use one of the tools available online. (for eg: `lesstester`, less2css etc.). Note that, there is no need to use `less` if you doesn't know them.

All of the less files can be found in less folder. There is also a customize boostrap folder inside this. If you edit any of the files, then you have to compile only main.less file. All other files included by default. Here's the list of less files (not including bootstrap folder):

main.less Compile only this, if you edit any of less file. Imports bootstrap.less and all other included in the folder.
about.less Style for .about-page class content
blog.less Style for blog.html and blog-single.html pages
portfolio.less Style for .portfolio-page class content
resume.less Style for .resume-page class content
contact.less Style for .contact-page class content
common.less Common style used by whole template
responsive.less Style for mobile device and to make theme responsive
custom-classes.less Includes styles for classes used by JavaScript
page-front.less Style for .page-front content

JavaScript Files

This template imports various plugins along with a custom script file. You don't need to edit these plugins, just edit custom script. However if you want additional functionality, see the doc of these plugins at their respective sites. The script skill.js and flip.js are written by me.

Tag Description
jquery.js jQuery is a Javascript library that greatly reduces the amount of code that you must write.
owl.carousel.min.js For used with twitter fetcher plugin. Learn more about this here
debounce.js Resizing Event plugin.
jquery.validate.js This is used for form validation. Learn more about this here
snap.svg.js Used for svg drawings- I use it for skill diagram in resume page. Doc here
isotope.js For filtering images in works-tab. Learn more about this here
magnific-popup.js For popup. Used in portfolio page content Learn more about this here
fastclick.js To stop 300ms delay in mobile browsers
placeholder.js Used for IE9 to display placeholder text. See the doc here
twitterFetcher.js Used for fetching twitter tweets. See the doc here
Modernizr.js For detecting css3 animations. See the doc here
custom.js All the plugin initialization and animations are carried out by this plugin. You can edit this script(if you want).
skill.js For drawing skill chart diagram (dependency -- snap.svg.js, debounce.js). For various options of this plugin, see the script. You'll find all at the start of the script
flip.js Script for flip effect in the grid-boxes. See the config options in the file.
masonry.pkgd.min.js Script for arranging grid-boxes in a masonry style
I have used only one php file for email sending named contact.php. To make the contact form work, you need to edit this file. Note that this is only a simple contact form script. For complex/additional functionality you can search google for it
/** Change following line to make it work **/
 $to = "john@doe.com"; // Enter your email here 

I have used two fonts in this template

  1. elegant Font - For Icons Fonts
  2. PT Sans - By google web fonts

I've used the following images, icons or other files as listed.

JavaScript

  Links above in JavaScript Section

Placeholder Images

  1. Placeholder Images — For used in portfolio page content