VahDoc - Documentation for Responsive HTML5 Template

-: Getting Started :-


  • Features: HTML5, CSS3, Responsive, Business, Digital Agency, Custom Design
  • Type: HTML Template
  • Version: 1.0
  • Vah means: Wow!

This documentation will teach you how to set up and use our template. If you have any questions that realted to template, please feel free to send your question on Author.

Vah Template Structure

The template root folder contains the assets folder and all of the HTML pages:

  • -vah/
    • -template/
      • -html/
        • assets/
          • css/
            • animate.css
            • coming-soon.css
            • style.css
            • vah.css (Custom CSS stylesheet. Recommended not to edit this file.)
          • flipclock/
          • fonts/
          • icons/
            • material-design-icons/
            • simple-line-icons/
          • js/
            • jquery.easing.min.js
            • jquery.min.js
            • jquery.mousewheel.min.js
            • main.js
            • modernizr-custom.js
          • stylus/ (Dynamic CSS pre-processing files. Only for advanced developer/designer. You can delete the folder, if you do not want to use stylus. Documentation can be found here.)
      • -php/
        • post-contact.php
        • message.php
    • - documentation/

Code Structure

Header(meta, title, stylesheets, fonts, icons):

<!DOCTYPE html>
<html class="no-js" lang="">
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vah | HTML5 Multi-purpose Responsive Template</title>
    <meta name="generator" content="Responsive, Mobile-Friendly HTML5 Website Template" />
    <meta name="author" content="Techmate Softtech LLP">
    <meta name="keywords" content="html5 template, buiness template, responsive templates, website template">
    <meta name="description" content="Vah is the latest HTML5 template useful for any business or digital agency.">
    <!-- Modernizr script -->
    <script src="assets/js/modernizr-custom.js"></script>
    <!-- Icon fonts: Simple line icons  -->
    <link rel="stylesheet" href="assets/icons/simple-line-icons/css/simple-line-icons.css" />
    <!-- Icon fonts: Material design icons  -->
    <link rel="stylesheet" href="assets/icons/material-design-icons/css/materialdesignicons.min.css">
    <!-- Default css -->
    <link rel="stylesheet" type="text/css" href="assets/css/vah.css">
    <!-- Animate css -->
    <link rel="stylesheet" type="text/css" href="assets/css/animate.css">
    <!-- Theme css -->
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">


 <body class="vah-body">
    <!-- Scroll top btn -->
    <a href="#" class="scroll-to-top vah-smooth-link" data-tooltip="Go to top!" data-tooltip-placement="left">
      <i class="mdi mdi-chevron-up"></i>
    <!-- Pre Loader -->
    <div class="pre-loader">
      <div class="pre-loader-bg">
          <div class="vah-loader-dot">.</div>
          <div class="vah-loader-dot vah-delay-03">.</div>
          <div class="vah-loader-dot vah-delay-06">.</div>
    <!-- End Pre Loader -->
    <!-- Vah Template Content Start -->
    <div class="vah-theme">
      <!-- Content Part -->
      <div class="vah-content"></div>


   <footer class="footer"></footer>
    <!-- jQuery CDN -->
    <script src="assets/js/jquery.min.js" crossorigin="anonymous"></script>
    <!-- Main Template JS -->
    <script src="assets/js/main.js"></script>



- Vah template uses Google Fonts included into fonts folder:(Mulish)
You can use any fonts that suits your project.

Title, Header & Label Classes:

  • .vah-extra-large-title (Extra Large heading)
  • .vah-heading (Large heading)
  • .vah-title (Title)
  • .vah-label (Dark label)
  • .vah-text (Paragraph)

Grid Structure:

We use custom grid structure of vah. Vah template follows standard 12 column grid structure. More grid elements can be found on template bundle (elements.html file).

Button Classes:

  • .btn - template button
  • .btn .btn-default - default button
  • .btn .btn-danger - red button
  • .btn .btn-invert - black button
- Sample block
<button class="btn btn-invert">Value</button>

Input Field Classes:

  • .input - textbox
  • .txtatrea - textarea
  • .vah-group > .input - input inside group
  • .btn .btn-invert - black button
- Sample block
<input type="text" class="input" />

Alert Box:

  • .alert - default alertbox
  • .alert.alert-primary - primary alertbox
  • .alert.alert-success - success alertbox
  • .alert.alert-danger - error alertbox
- Sample block
<div class="alert alert-primary"><p>Message</p></div>
- Closable alert messages
<div class="alert alert-primary" data-alert-close><p>Message</p></div>


- For accordian type 1(add attribute data-accordian-collapse="single")
<div class="vah-accordian" data-accordian-collapse="single">
- For accordian type 2(add attribute data-accordian-collapse="all")
<div class="vah-accordian" data-accordian-collapse="all">
- Sample block
<div class="vah-accordian" data-accordian-collapse="single">
  <div class="vah-accordian-row">
    <h3 class="vah-accordian-title" data-accordian="row1">Accordian Title</h3>
    <div class="vah-accordian-content" id="row1">


- Sample block
<div class="vah-tabs">
  <ul class="vah-tab-list">
    <li class="tab-active" data-tab="content1">Tab 1</li>
    <li data-tab="content2">Tab 2</li>
  <div class="vah-tab-body">
    <div class="vah-tab-content tab-content-active" id="content1">Content 1
    <div class="vah-tab-content" id="content2">Content 2

Progress Bar:

- Sample block
<div class="vah-progress vah-progress-active">
  <div class="vah-progress-group">
    <div class="vah-progress-bar-bg">
      <div class="vah-progress-bars" data-range-value="80" data-range-delay="0" style="width: 80%;">80%</div>
  <div class="clearfix"></div><br>
  <div class="vah-progress-group">

-: Customization Options :-

Here is a simple guide on editing HTML elements suitable to your need.


It is very easy to change betweeen different header and body layouts. You just need to add a class to <nav> and <body> tags:

Layout Container Customization:

  • Full Width Layout
  • <body class="vah-body">
  • Boxed Layout
  • <body class="vah-body vah-box">

Layout Skin Customization(Template Color Customization):

  • Default Layout
  • Theme will load style.css file by default.
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
  • Dark Layout
  • In header section, you have to replace the default css(style.css) file with style-dark.css file.
    <link rel="stylesheet" type="text/css" href="assets/css/style-dark.css">
  • Customized Color Layout
  • Using stylus, you can generate your own desired template skin. To do so, you need to modify the stylus(variable.styl) file.
    - First step make sure Stylus bundle is properly running on your machine.
    - Change the values of variables named $primary-clr, $hover-clr, $gradient-color1, $gradient-color2 according to your requirements.
    - On your project root, build the css file from stylus from your command line utility:
    $~: stylus ../assets/stylus/style-default.styl -o ./assets/css/style-skin-name.css
    - Above command will generate the css file named style-skin-name.css inside css folder.
    - In header section, you can replace the default css(style.css) file with style-skin-name.css file. You can use the following code to change the skin in header area:
    <link rel="stylesheet" type="text/css" href="assets/css/style-skin-name.css">
  • Simple Menu
  • <nav class="vah-navbar">
  • Sticky Menu
  • <nav class="vah-navbar vah-navbar-stick">
  • Large Menu
  • <nav class="vah-navbar vah-navbar-large">
  • Transparent Menu
  • <nav class="vah-navbar  navbar-transparent vah-navbar-fixed">
  • Combination
  • You can use the various combination of menus like following
  • <nav class="vah-navbar vah-navbar-stick vah-navbar-large">
  • <nav class="vah-navbar vah-navbar-large navbar-transparent">
  • Megamenu (Submenu)
  • Megamenu classes are...
    <li class="mega-menu mega-5-column">...</li>
    1. Use class "mega-1-column" for one column megamenu
    2. Use class "mega-2-column" for two column megamenu
    5. Use class "mega-5-column" for five column megamenu
    <ul class="menu-items">
      <li><a href="#">...</a></li>
      <!-- Mega menu(5 column) -->
      <li class="mega-menu mega-5-column">
        <a>Mega Menu  <i class="mdi mdi-chevron-down"></i></a>
        <ul class="submenu mob-submenu">
              <li><a href="#">...</a></li>
  • Dropdown(Inner Submenu Dropdown)
  • <ul class="submenu">
          <li class="menu-dropdown"><a>... <i class="mdi mdi-chevron-right"></i></a>
            <ul class="menu-dropdown-list right">
              <li><a href="#">...</a></li>
  • Menu and Submenu Animations
    • 1) Main Menu Animations
    • Use class "menu-arrow"
    • Use class "menu-underline"
    • 2) Submenu & Dropdown Animations
    • Use class "submenu-scale"
    • Use class "submenu-up"
You can choose any combination of classes for main menu and submenu.
- Sample blocks
<ul class="menu-items menu-arrow submenu-scale"></ul>
<ul class="menu-items menu-undeline submenu-up"></ul>


  • Basic Snippet:
  • <div class="vah-slider" id="vah-slider">
      <div class="vah-slider-slides">
        <div class="vah-slider-slide" data-vah-slider-image="assets/images/slider/1.jpg">
          <div class="vah-slider-content">
            <div class="vah-slider-inner">
              <div class="vah-slider-inner-content">
                <h1 class="vah-slider-title">Welcome to the <span><strong>"Vah"</strong></span> Template!</h1>
                <div class="clearfix"></div>
                <a href="about.html" class="vah-gs-btn" data-wow-delay='.5s'><i class="mdi mdi-link"></i> Learn More</a>
  • Change Images:
  • Kindly look for the custom element named "data-vah-slider-image". Change the value of path with your actual image path:

    <div class="vah-slider-slide" data-vah-slider-image="assets/images/slider-1.jpg"></div>
  • Javascript Configurations
  • You can use the Animation classes for changing the effects.

        in: 'animated fadeIn',
        out: 'animated fadeOut'

Vah Scroll Animations

Vah template provides you control on scroll animations. You can customize your template by adding new animation style classes. The main element having class name vah-animated can be followed with following data attributes with possible values.

  • data-animated-class (Possible value can be any Animate.css class)
  • data-animated-delay (Delay in seconds for the animation to be delayed upon scroll)
  • data-animated-duration (Duration in seconds upto the animation should render)
  • Sample Block:
  • <div class="vah-box vah-animated" data-animated-class="fadeInUp" data-animated-delay=".2" data-animated-duration=".5">

Coming Soon Page

  • Countdown Timer
  • To edit the countdown on coming soon page, please find the following block markup and script:

    <div class="clock" style="margin:2em;display: inline-block;"></div>
    <script type="text/javascript">
          var clock;
          var month = 2; // Month index starts from 0, so 2 would be March
          var date = 31;
          $(document).ready(function() {
            // Grab the current date
            var currentDate = new Date();
            // Set some date in the future.
            var futureDate  = new Date(currentDate.getFullYear() + 1, month, date);
            // Calculate the difference in seconds between the future and current date
            var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;
            // Instantiate a coutdown FlipClock
            clock = $('.clock').FlipClock(diff, {
              clockFace: 'DailyCounter',
              countdown: true

    More on Countdown timer can be found here.

Contact Us Page

    Vah template provides your readymade Email sending contact page script. You can customize your contact us page POST action and Email address.

  • POST Method: You can look for action attribute and change your PHP file path accordingly.
    <form action="post-contact.php" method="POST" id="contact_form">
    // FORM Elements
  • Email Configurations: The current Email sending script can be found in file named 'post-contact.php'. This basic script will send email to your SET email address.
      session_start(); // Session for storing the status message
      $name = $_POST['name'];
      $to = '';  // Set Email id where you want to receive Contact Form Emails
      $from = $_POST['email'];
      $subject = "Subject";
      $message = $_POST['message'];
      $headers = 'From: '.$from."\r\n" .
                'Reply-To:' . "\r\n" . //Set to your webmaster Email Address
                'X-Mailer: PHP/' . phpversion();;
      $send_mail = mail($to, $subject, $message, $headers);
      if( $send_mail ) {
        $res['status'] = 'success';
        $res['message'] = 'Message sent successfully.';
      } else {
        $res['status'] = 'fail';
        $res['message'] = 'Error while sending the message.';
      $_SESSION['res'] = $res;
      header("Location: message.php");
    NOTE: Your hosting server should be capable of sending Emails.


3rd-Party Plugins / Libraries / Technologies we used. Without their help we can not make The Vah awesome.

This documentation template is provided by Frittt Templates