Classes Structure

Miscellaneous classes

There are also miscellaneous classes that do all sorts of stuff:

Opacity classes:

This classes will make an element as transparent as you specify and they go from 10 to 10% in transparence. They can also be applied to hover events.

.hov-opacity0:hover {opacity:0 !important;} /* invisible element */
.hov-opacity1:hover {opacity:.1 !important;}  /* just 10% opacity, almost invisible */
.hov-opacity2:hover {opacity:.2 !important;}
.hov-opacity3:hover {opacity:.3 !important;}
.hov-opacity4:hover {opacity:.4 !important;}
.hov-opacity5:hover {opacity:.5 !important;}
.hov-opacity6:hover {opacity:.6 !important;}
.hov-opacity7:hover {opacity:.7 !important;}
.hov-opacity8:hover {opacity:.8 !important;}
.hov-opacity9:hover {opacity:.9 !important;} /*  90% opacity, barely transparent */
.hov-opacity10:hover {opacity:1 !important;} /* fully visible, probably used to override another opacity rule*/

Float & Float clearing classes:

These are from Bootstrap library but they are very good to be known:

.pull-left {float:left}
.pull-right {float:right}
.pull-none {float:none !important;} /* not in bootstrap, added in this template */

You can also clear the floats and even on responsive breakpoints:

.cleft {clear:left;}
.cright {clear:right;}
.cboth {clear:both;}

and for example on medium breakpoint:

.cleft-md {clear:left;}
.cright-md {clear:right;}
.cboth-md {clear:both;}


Width classes presets:

Width classes presets are only added as percentages and they go from 10 to 10% until full width. The classes are:

.w-10 {width:10% !important;}
.w-20 {width:20% !important;}
.w-30 {width:30% !important;}
.w-40 {width:40% !important;}
.w-50 {width:50% !important;}
.w-60 {width:60% !important;}
.w-70 {width:70% !important;}
.w-80 {width:80% !important;}
.w-90 {width:90% !important;}
.w-100 {width:100% !important;} /* full width */

Also to have power on smaller devices there are also breakpoint classes, for example:

  • .w-md-10 or w-md-90 for medium screens (1200px) and below (covering both small and extra small)
  • .w-sm-10 or w-sm-90 for small screens (991px) and below (covering extra small too)
  • .w-xs-10 or w-xs-90 for extra small screens (767px) and below

So again, you can have different width for each breakpoint, like class=”w-90 w-md-50″ which means it’s 90% in width on large desktops and 50% (half) on medium and smaller screens.


Height class presets:

These height classes are all in pixels and they go from 10 to 10px, begining with 0 ending with 700px. These heights are generally added to the page-header block which will use your predefined height. The classes are:

.hsize-reset {height:0 !important;} /* height zero */
.hsize-10 {height:10px;}
.hsize-20 {height:20px;}
.hsize-100 {height:100px;}
.hsize-110 {height:110px;}
.hsize-120 {height:120px;}
.hsize-200 {height:200px;}
.hsize-210 {height:210px;}
.hsize-220 {height:220px;}
.hsize-300 {height:300px;}
.hsize-310 {height:310px;}
.hsize-320 {height:320px;}
.hsize-400 {height:400px;}
.hsize-410 {height:410px;}
.hsize-420 {height:420px;}
.hsize-500 {height:500px;}
.hsize-510 {height:510px;}
.hsize-520 {height:520px;}
.hsize-600 {height:600px;}
.hsize-610 {height:610px;}
.hsize-620 {height:620px;}
.hsize-700 {height:700px;}

Also to have power on smaller devices (responsive layout) there are also breakpoint classes, for example:

  • .hsize-md-10 or hsize-md-190 or hsize-md-380 for medium screens (1200px) and below (covering both small and extra small)
  • .hsize-sm-10 or hsize-sm-90 or hsize-sm-380 for small screens (991px) and below (covering extra small too)
  • .hsize-xs-10 or hsize-xs-90 or hsize-xs-380 for extra small screens (767px) and below

So again, you can have different width for each breakpoint, like class=”hize-290 hsize-md-150″ which means it’s 290px in height on large desktops and 150px on medium and smaller screens.


Button paddings:

There are 3 padding classes for buttons: .mid-padding .big-padding and .long-padding .  They’re commonly used whenever a button should break the pattern of standard button.

Although it’s rarely the case, buttons can also be resized on responsive breakpoints, for example mid-padding-md or long-padding-xs (and so on).


Lists with columns:

A list can be divided into multiple columns by simply adding the attribute data-columns=”#”. For example a list with 3 columns:

<ul data-columns="3">

Now, if you want to reset the list on smaller screens as a responsive solution, the list can be reset with the classes .list-col-reset-md .list-col-reset-sm .list-col-reset-xs For example:

<ul class="list-col-reset-sm" data-columns="3">

In the example above, the list will reset itself (no columns) when the screen width reaches the sm breakpoint which is 991px .


Various classes:

** Thin box-shadow class="thin-shadow" (adds a thin box shadow to the element)

.thin-shadow {box-shadow: 0 1px 1px rgba(0,0,0,0.15);}


** Border reset class="noborder" Resets the border of an element who is bordered

 .noborder {border:0;}


** Reset text-shadow class="stg-notextshadow" (Reset text-shadow on an element which already has text-shadow attached)

.stg-notextshadow * {text-shadow:none !important;}


** Vertical aligns class="vtop (vertically-align an element (the ones supporting this property)

.vtop {vertical-align: top;}
.vmid {vertical-align: middle;}
.vbot {vertical-align: bottom;}


** Transitionised element  class="transitioned" (will make the element to have smooth transitions on event change)

.transitioned {-webkit-transition: all 0.15s ease-out; transition: all 0.15s ease-out;}


** Separator  class="separator" (adds a border separator, like a horizontal line)

.separator {background: #E8E8E8; height: 1px; width: 100%; margin: 0 0 20px; display: block;}


** Rounded corners  class="roundcorners" (rounds the corners with 3px)

.roundcorners {border-radius: 3px;}


** Hidden overflow class="ov-hidden" (makes the element to he hidden overflown)

.ov-hidden {overflow:hidden;}


** Custom font – Source Sans Pro (google embed font)  class="sourcesans" (makes the text to be displayed with Source sans pro font)

.sourcesans { font-family: 'Source Sans Pro', 'Open Sans' sans-serif; }


** Reset list class="reset-list" ( resets a default styled list, removing bullets and margins/paddings; should only be applied to lists like <ul> or <ol> )

.reset-list ul {margin:0; padding:0; list-style: none; }


** Colored areas class="colored-area" data-color="color" (makes a certain block or sections to have predefined background colors)

List of colors: white , gray, silver, darkgray, black, purple, green, blue, red, yellow, orange, turquoise, lightblue, lightred, pink, custom (custom being the predominant and predefined custom color)

<section class="colored-area" data-color="red">

Extra class for colored area class="innershadow" which will add an inner soft shadow to the element.


** Bottom border  class="bottom-border" (adds a really pale bottom border)

.bottom-border {border-bottom:1px solid #e8e8e8;}


** Fancy Title class="fancy-title" which applies for headings or text you want to set as title

.fancy-title {font-size:30px; font-weight:300; color:#303032; letter-spacing: -1px;}
<h3 class="fancy-title"> I'm a fancy title! </h3>


** Grayscale link class="grayscale-link" which applies to linked images. It will grayscale the image while coloring on hover with a bottom custom color border

<a href="#" class="grayscale-link">
  <img src="" alt="" />


** Hover Image Zoom class="hover-img-zoom" which applies to linked images on hover, scaling up the image’s size

<a href="#" class="hover-img-zoom">
  <img src="" alt="" />


** Hover Image Scale Out class="scale-out" which applies to linked images on hover, scaling out the image’s size:

<a href="#" class="scale-out">
  <img src="" alt="" />


** Browser framed image class="br-framed-img"

<img src="" alt="" class="br-framed-img" />

Back To Top

Text colors and background colors

We included in this template several color presets that will style your element directly when applying the class. The styles can be found in addons.css

The general syntax of the classes is simple .text-[color] or on hover mouse event .text-hover-[color] , so the text color classes are:

.text-green, .text-hover-green -> [i'm an example]
.text-blue, .text-hover-blue -> [i'm an example]
.text-red, .text-hover-red -> [i'm an example]
.text-purple, .text-hover-purple -> [i'm an example]
.text-yellow, .text-hover-yellow -> [i'm an example]
.text-yellowfull, .text-hover-yellowfull -> [i'm an example]
.text-lightyellow, .text-hover-lightyellow -> [i'm an example]
.text-orange, .text-hover-orange -> [i'm an example]
.text-turquoise, .text-hover-turquoise -> [i'm an example]
.text-lightblue, .text-hover-lightblue -> [i'm an example]
.text-cloudblue, .text-hover-cloudblue -> [i'm an example]
.text-lightred, .text-hover-lightred -> [i'm an example]
.text-pink, .text-hover-pink -> [i'm an example]
.text-gray, .text-hover-gray -> [i'm an example]
.text-white, .text-hover-white -> [i'm an example]
.text-black, .text-hover-black -> [i'm an example]
.text-lightgray, .text-hover-lightgray -> [i'm an example]
.text-silver, .text-hover-silver -> [i'm an example]
.text-darkgray, .text-hover-darkgray -> [i'm an example

There are also transparent colors, but only on white or black, for example:

/* Black Color Transparent */
.text-black-op1 {color:rgba(0,0,0,.1);} /* black transparent text with 10% opacity */
.text-black-op3 {color:rgba(0,0,0,.3);} /* black transparent text with 30% opacity */
.text-black-op5 {color:rgba(0,0,0,.5);} /* black transparent text with 50% opacity */
.text-black-op6 {color:rgba(0,0,0,.6);} /* black transparent text with 60% opacity */
.text-black-op9 {color:rgba(0,0,0,.9);} /* black transparent text with 90% opacity */
/* White Color Transparent */
.text-white-op1 {color:rgba(255,255,255,.1);} /* white transparent text with 10% opacity */
.text-white-op3 {color:rgba(255,255,255,.3);} /* white transparent text with 30% opacity */
.text-white-op5 {color:rgba(255,255,255,.5);} /* white transparent text with 50% opacity */
.text-white-op6 {color:rgba(255,255,255,.6);} /* white transparent text with 60% opacity */
.text-white-op9 {color:rgba(255,255,255,.9);} /* white transparent text with 90% opacity */


Background colors:

Background colors can be added also on any element, they can be found in addons.css and their general syntax is simple like .bg-[color] and on hover mouse events .bg-hover-[color] , so the classes are:

.bg-green, .bg-hover-green
.bg-blue, .bg-hover-blue
.bg-lightblue, .bg-hover-lightblue
.bg-cloudblue, .bg-hover-cloudblue
.bg-red, .bg-hover-red
.bg-lightred, .bg-hover-lightred
.bg-purple, .bg-hover-purple
.bg-yellow, .bg-hover-yellow
.bg-lightyellow, .bg-hover-lightyellow
.bg-orange, .bg-hover-orange
.bg-turquoise, .bg-hover-turquoise
.bg-pink, .bg-hover-pink
.bg-gray, .bg-hover-gray
.bg-white, .bg-hover-white
.bg-black, .bg-hover-black
.bg-lightgray, .bg-hover-lightgray
.bg-silver, .bg-hover-silver
.bg-darkgray, .bg-hover-darkgray
.bg-dirtywhite, .bg-hover-dirtywhite


Back To Top

Typography classes

Inside stylesheet css/base-sizing.css you can see there are lots of predefined classes. I’ll cover here the typography classes.


Font sizing:

Because there’s a wide variety of headings and custom font sizes i added predefined sizing:

.fs-micro {font-size:9px;}
.fs-xsmall {font-size:11px;}
.fs-normal {font-size:13px;}
.fs-smaller {font-size:15px;}
.fs-small {font-size:16px;}
.fs-m {font-size:18px;}
.fs-l {font-size:20px;}
.fs-xl {font-size:24px;}
.fs-xxl {font-size:32px;}
.fs-larger {font-size:42px;}
.fs-xxxl {font-size:56px;}
.fs-xxxxl {font-size:75px;}
.fs-jumbo {font-size:80px;}
.fs-huge {font-size:120px;}
.fs-crazy {font-size:200px;}

So a general example could be:

<h4 class="fs-xxl"> I'm a heading and i'm 32px sized </h4>

Responsive: Because font sizes can be to extreme for different screens, i also added the same size classes but with breakpoint namig.  for example:

.fs-smaller {font-size:15px;}
.fs-md-smaller --//--
.fs-sm-smaller --//--
.fs-xs-smaller --//--

.fs-m {font-size:18px;}
.fs-md-m --//--
.fs-sm-m --//--
.fs-xs-m --//--

.fs-xxl {font-size:32px;}
.fs-md-xxl --//--
.fs-sm-xxl --//--
.fs-xs-xxl --//--

.fs-jumbo {font-size:80px;}
.fs-md-jumbo --//--
.fs-sm-jumbo --//--
.fs-xs-jumbo --//--

But remember, this only means the normal font-size is just duplicated for other breakpoints with come in action when browser achieves that width. This does not mean the sizes are different.

So again, a general example with responsive layout could be:

<h4 class="fs-xxl fs-md-l fs-sm-small fs-xs-micro"> I'm a heading, i normally have 32px on desktops, 20px on medium screens like big tablets, then 16px on small screens like small tablets, and 9px on tiny screens like smartphones. I'm so flexible!! </h4>



Font width’s means the thickness of the font. As you know fonts have the css property of font-width and values are 100, 200, 300 ….. 900 which means how think a font should be. I honestly don’t know a font that’s having all these thickness values so i just covered a few:

.fw-thin {font-weight: 300;}
.fw-normal {font-weight: 400;}
.fw-semibold {font-weight: 600;}
.fw-bold {font-weight: 700;}
.fw-extrabold {font-weight: 800;}

And a general example is:

<h4 class="fw-extrabold"> I'm a heading and i'm so bold, wait.. i'm extrabold!!</h4>


Letter Spacing

Letter spacings as it’s called, will add spaces between each letter in a word/phrase/paragraph. The classes are:

.lt-spacing-1 {letter-spacing: 1px;}
.lt-spacing-2 {letter-spacing: 2px;}
.lt-spacing-3 {letter-spacing: 3px;}
.lt-spacing-5 {letter-spacing: 5px;}




 Reset line heights. Because big fonts tend to have a huge line height, you might want to reset it, so to do that use this class:

.reset-line-height {line-height: 1}

Uppercase letters. Want to force a text to have capitalized letters? Try this class:

.uppercase {text-transform: uppercase;}

Back To Top

Margins and paddings

Inside stylesheet css/base-sizing.css you can see there are lots of predefined classes. I’ll cover here the margins and paddings.

My motivation to do this, add predefined classes for custom margins and paddings is that, because of spacing inconsistency and desire of providing a good flexibility. The margins/paddings or negative margins are

  • 5px, 10px, 15px, 20px, 25px, 30px, 35px, 40px, 45px, 50px
  • 60px, 70px, 80px, 90px, 100px, 110px, 120px, 130px, 140px, 150px
  • for top and bottom, margins and paddings there’s an extra 200px and 250px .

Also there are negative margins to achieve a bit more complex structures and layouts. As they’re called, these negative margins will add spaces revertly.

So the classes structure would be:

For margins:

  • Top: mt-##, example classes: mt-20 , mt-40, mt-100 etc.
  • Bottom: mb-##, eg: mb-20, mb-40, mb-100 etc.
  • Left: ml-##, eg: ml-20, ml-40, ml-100 etc.
  • Right: mr-##, eg: mr-20, mr-40, mr-100 etc.

For paddings:

  • Top: pt-##, example classes: pt-20 , pt-40, pt-100 etc.
  • Bottom: pb-##, eg: pb-20, pb-40, pb-100 etc.
  • Left: ml-##, eg: pl-20, pl-40, pl-100 etc.
  • Right: pr-##, eg: pr-20, pr-40, pr-100 etc.

For negative margins:

  • Top: mnt-##, example classes: mnt-20 , mnt-40, mnt-100 etc.
  • Bottom: mnb-##, eg: mnb-20, mnb-40, mnb-100 etc.
  • Left: mnl-##, eg: mnl-20, mnl-40, mnl-100 etc.
  • Right: mnr-##, eg: mnr-20, mnr-40, mnr-100 etc.

Covering responsive layout:

To make sure there is more power to the layout, there are extra breakpoint classes that will take over when they’re previewed in a certain resolution, for example:

  • For large screens just leave the default class, eg: class="mt-100" (i just added a margin top 100px)
  • For other screens add the screen’s breakpoint shortname, which are: md (medium devices), sm (small devices), xs (extra small devices), and example classes are:
    • For medium screens and below (will apply in minus): mt-md-100 and the class could be class="mt-100 mt-md-60", so this means that a 60px top margin will take over when 1200px wide width is achieved by the browser.
    • For small screens and below (will apply in minus): mt-sm-100 and the class could be class="mt-100 mt-md-60 mt-sm-40", so this means that a 40px top margin will take over when 991px wide width is achieved by the browser.
    • For extra small screens and below, like smartphones (will apply in minus): mt-xs-100 and the class could be class="mt-100 mt-md-60 mt-sm-40 mt-xs-20", so this means that a 20px top margin will take over when 767px wide width is achieved by the browser.
    • In short, you can control each margin for each browser resolution/screen


These are all preset classes and it’s your choice whether you should use them or not.

Back To Top


General components

Below there are several components that have options (styling classes). This template is a demo/showcase for all elements so for other components you can simply copy paste & edit the html markup.


Vauss Videos

Sample markup:

<div class="video-container">
  <div class="video-wrapper has-overlay">
     class="vs-video valign"
     style="width: 100%; height: 100%;"
       "position": "absolute",
       "loop": true,
       "autoplay": true,
       "muted": true,
       --- you can add multiple type self hosted videos
       --- or you can add a youtube video
       "youtube": "youtube_id_here",
       "poster": "images/videos/video.png",
       "video_ratio": "1.7778"
    <ul class="vs-video--controls">
      <li><a href="#" class="btn-toggleplay"><i class="vs-icon icon-size-xs circled-icon"></i></a></li>
      <li><a href="#" class="btn-audio"><i class="vs-icon icon-size-s circled-icon ci-xsmall"></i></a></li>
  </div><!-- // .video-wrapper -->
</div><!-- // .video-container -->

As you can see the setup is being made by the data-setup attribute which has options such as:

  • position – The position css value for the video object to be created, make it “absolute” or “fixed”, being that the latest makes it scroll with the page (used for fullpage backgrounds usually)
  • z-index – The z-index css property for the background video, usually set it to “-1” or “0”, being that -1 will put it behind absolutely everything, even the background-color itself
  • video_ratio – If you want your video to fill all the available area (will crop some parts of the video potentially but looks terrific) set here the value resulting from the calculation width_of_the_video/height_of_the_video
  • loop – Set to true or false depending if you want the video to loop or not when it reaches the end
  • autoplay – Set to true or false depending if you want the video to start to play immediately or not
  • muted – Set to true or false depending if you want the video to start muted or not
  • mp4 – The path to the mp4 video format
  • webm – The path to the webm video format
  • ogg – The path to the mp4 video format
  • youtube – The id of the youtube video
  • start – Available for youtube videos only, sets the time in seconds you want the video to start at
  • fallback_image – The image to fallback to on mobile devices
  • sizing – The sizing you want the fallback image to have. Choose between “fill” or “adjust”
  • priority – Accepts “html5” or “flash”, the chosen one will be given priority to use and fallback to the other if not available

Remember: videos can only be seen on desktop devices as mobiles are still buggy, so as a fallback for smartphones/tablets there will only be displayed the poster.

Adding overlay

Some videos have a low resolution and on bigger screens you can actually see the poor and pixelated video. As a trick to make it look better you can add the class .has-overlay to the <div class="video-wrapper"> and a transparent pattern will appear over. As a second pattern of the overlay, you can add .ovrl2 and the pattern will change (eg: <div class="video-wrapper has-overlay ovrl2 "> )

Aligning video:

You can vertically or horizontally align the videos simply adding the class .valign for vertical and .halign for horizontal, to the <div class="vs-video"> block.

Video control positions:

You can reposition the video controls by simply adding data-position attribute on the .vs-video--controls block. The positions can be: top-left, top-center, bottom-right, bottom-left, bottom-center, middle-right, middle-left, middle-center .


Icon Boxes

Beside default style, there are extra 3 styles for the icon boxes and they can be applied by adding the classes .stg-style-2 or .stg-style-3 or .stg-style-4 (eg:  <div class="icon-box stg-style-3"> )

Icons/images can be also positioned on the left side by adding the class .stg-alignleft , resulting in <div class="icon-box stg-alignleft"> .

Style3 ( .stg-style-3 ) can have different colors either normally or on hover. The preset classes are:

  • .cc-blue (or hover .cc-hv-blue )
  • .cc-purple (or hover .cc-hv-purple )
  • .cc-pink (or hover .cc-hv-pink )
  • .cc-yellow (or hover .cc-hv-yellow )
  • .cc-orange (or hover .cc-hv-orange )
  • .cc-turquoise (or hover .cc-hv-turquoise )
  • .cc-green (or hover .cc-hv-green )


Be Social widget

This widget adds social media icons as a widget, the best part being that they can be added on different rows, redimensioned and responsive to the container.

<div class="block-wgt">
  <div class="be_social_wgt ">
    <ul class="clearfix" data-perrow="5" data-fontsize="md">
      <li><a href="#" class="vs-icon icon-twitter"></a></li>
      <li><a href="#" class="vs-icon icon-vimeo"></a></li>

It’s options are:

How many per row, which can be achieved by adding data-perrow attribute. Preset values can be 2 , 3 , 4 , 5 , 6 , 7 .

What font size they could have. You can simply add .fs-size classes however the preset values for data-fontsize attribute are xs, sm, md, lg and xl .


Skills Widget

This widget adds percentage bars animated to a specified length.

The values of a bar can be wide scaled predefined, meaning you must add a data-loaded attribute to each skill bar with a value of 10 , 20 , 30 , 40 , 50 , 60 , 70 , 80 , 90 , 100 (eg: data-loaded="40" which will display the bar as width:40% wide ).

You can round the bars by adding the class .stg-rounded to the .skills_wgt block.

Coloring the bars is simply, you need to add data-color attribute to the .skill-bar with one of the values green, blue, red, purple, yellow, orange, turquoise, lightblue, lightred, pink (eg: data-color="orange" ).


Services Boxes

The services boxes have no special feature just letting you know that there can be up to 5 columns and to achive this add the class .sbox-# to the ul list. For example for 4 columns, the tag should be like <ul class="sbox-4">


Testimonial Box

Here’s a few customisation tips for the testimonial boxes:

  • Images can be sized in 3 presets, small (68px), medium (96px) and undefined (any size you want). To make the images small or medium add classes .img-m or .img-s to the .testimonialbox block.
  • Testimonials can be flipped either vertically or horizontally (for example instead of images on the left, to appear on the right). To achieve this either add .flippedY or .flippedX to the .testimonialbox blocks.
  • You can add a discrete border to the text box simply adding .outline to the .testimonialbox block.
  • The 2nd style of the testimonial boxes can be achieved by adding C class to the .testimonialbox block.



Process Box widget

The process boxes have no special feature just letting you know that there can be up to 5 columns and to achieve this, add the class .pbox-# to the ul list. For example for 4 columns, the tag should be like <ul class="pbox-4">


Feature Boxes

Feature boxes can have a 2nd style by adding the class .style2 to the .feature block.


Team member

The team-member blocks can be styled in 3 different ways.

  1. Default – no class needed. eg:
  2. Style 2 which can be achieved by adding .stl-style-2 to the .team-member block. Eg:
  3. Style 3 which can be achieved using a different markup. This style is used in the Our Team page.


Pricing tables

Here’s a few customisation tips:

  • Pricing tables can have up to 5 columns and this can be achieved by adding data-columns attribute, for example data-columns="4" .
  • There are 3 pricing table styles:
    • Vauss style – add .vs-style class to the .pricing-table block
      This style supports 5 colors: .gray .red .yellow .blue .green
    • Classic style – add .classic-style class to the .pricing-table block
    • Hipstery style – add .hipstery-style class to the .pricing-table block
      This style supports 4 colors: .gray .red .yellow
  • To feature/highlight a plan, add the class .featured to the .plan-column block
  • There are 2 badges styles
    • TOP badge which will display a ribbon having the text TOP. To achieve this add the classes .badge and .top to the .subscription-price list item, eg: <li class="subscription-price badge top">
    • BEST badge which will display a ribbon having the text BEST. To achieve this add the classes .badge and .best to the .subscription-price list item, eg: <li class="subscription-price badge best"> .



Tablet Animation

No special features here, just letting you know there are 2 colors for the tablets. By default the tablets are white, however to make them black, simply add the class .black-tablet to the .tablet-device code block.


Photo Wall

No special features here neither, the best way to figure them out is to have a closer look at the markup. To make an item double, either add .width2 or .height2 or even both. For example:

  • <div class="isotope-item width2"> will double the width
  • <div class="isotope-item height2"> will double the height
  • <div class="isotope-item width2 height2"> will double the size on both dimensions.


Popup Box

Popup boxes are preset stylings for dynamic inline code lightbox popup’s. The main class of them is .vs-pp-box .

Currently there are 2 styles:

  • Newsletter box which can be found in the Shop landing page ( wait for ~10 seconds to automatically appear ). Identifier class is .vs-newsletter-box
  • Login box , nothing special here, just a fixed width box with shadow. Identifier class is .vs-login-box

To create your own custom style you can try a combination of these two by tweaking the css.


Bubble Box

Bubble boxes are boxes that appear on certain scrolling point. The main class of them is .bubble-box

Currently in Vauss template there are 2 styles:

  • Notification box which contains simple messages. Identifier class is .notification-box
  • Ads box, which contain small images and quick text serving the purpose of an add. To style like this add the class .ads-box





Back To Top

Page headers

A page header is intended to hold some info or focused image/keyword text. Here’s a simple markup:

<section id="page-header" class="text-center hsize-200 hsize-xs-260">
  <div class="page-header-subject" style="background-color: #F5F5F5;"></div>
  <div class="container">
    <h1 data-role="title" class="fs-xxl text-darkgray mt-60 mb-0">SOME COOL TITLE HERE</h1>
    <h4 data-role="subtitle" class="fs-m text-gray opacity7">AND A SUBTITLE TO COMPLETE</h4>

This is an example where the there’s a custom background color ( .page-header-subject ) and a container holding a title and subtitle.


Adding text to page headers (captions):

Adding captions to page header means you just need to wrap the titles into a .container. Adding text-center to the #page-header block, will centralize the titles. Markup would be:

<div class="container">
  <h1 data-role="title" class="fs-xxl">SOME COOL TITLE HERE</h1>
  <h4 data-role="subtitle" class="fs-m ">AND A SUBTITLE TO COMPLETE</h4>


Normal page header, custom background color

As mentioned in the first example, the .page-header-subject has a custom background color. Of course, if you want to have a general color, simply add a css rule in custom.css with your preferred color eg: .page-header-subject { background-color:#f00 } which means by default it will always be red.

An example of the html markup of the page header subject block is:

<div class="page-header-subject" style="background-color: #F5F5F5;"></div>


Background image header:

Same as a normal colored page header you will have to add a background image style attribute to the element, for example:

<div class="page-header-subject" style="background-image: url(path/to/image.jpg);"></div>


Video header

To add a video to the page header, you must add a standard video markup into the page-header-subject block. Simply have a closer look to the About us page where there’s a good example.


Filter header

As seen here this is a plan background image page header which holds a complex filtering system.  This type of filtering system is recommended to be used by professional developers who want to integrate it to a CMS or eCommerce platform.

Back To Top

Js based components

There are some components that are using javascript modifiers and state changers.


Popup boxes

These are custom styled Magnific popup’s but some of them have auto display feature (after a certain time).

For example adding data-ppbox-timeout="2000" attribute (eg: <div class="vs-pp-box" data-ppbox-timeout="2000"> ) will make this particular block of inline code to appear automatically after 2000ms (2 seconds).

Currently there are only 2 preset styles, Newsletter popup ( .vs-newsletter-box ) and Login Popup ( .vs-login-box ).


Fluid-Fixed Column

If you want to achieve a layout of having a .container-fluid but the content inside to be aligned as a normal .container (eg: ), simply add .col-normal class to the inner element along with an extra “first” or “last” class. Here’s an example markup:

<div class="container-fluid ov-hidden">
  <div class="row">

    <div class="col-sm-6">
      // content here

    <div class="col-sm-6">
      <div class="col-normal last">
        // Content here. This block will have a right padding that will align the element according to a normal .container block.



Magnific popup types (more here )

Simple image lightbox

<a href="path/to/full/image.jpg" data-lightbox="image"> This will open an image link </a>

 Simple gallery with images (no need for data-lightbox attribute)

<ul class="gallery images">
  <li><a href="path/to/full/image.jpg">This will open an image link</a></li>
  <li><a href="path/to/full/image.jpg">This will open an image link</a></li>
  <li><a href="path/to/full/image.jpg">This will open an image link</a></li>

Simple gallery with miscellaneous stuff (images, iframes, videos etc.)
All items should have the data-mfp=”type_here” attribute, for example:

<ul class="gallery misc">
  <li><a href="path/to/full/image.jpg" data-mfp="image">This will open an image link</a></li>
  <li><a href="path/to/a/website" data-mfp="iframe">This will open an link into an iframe</a></li>
  <li><a href="path/to/youtube/video" data-mfp="youtube">This will open a Youtube link</a></li>


<a href="link_here" data-lightbox="iframe"> This will open a link </a>


<a href="#some_content" data-lightbox="inline"> This will open some html content </a>


<a href="#" data-lightbox="ajax"> This will open some ajax'ed content </a>

Youtube, Vimeo, Google Maps:

<a href="youtube_link" data-lightbox="youtube"> This will open a youtube video link </a>


Transitioned appearing elements

You can control an element appearance on the page upon scrolling by adding some attributes.

  • First you should either add the attribute data-animated or the class .appear.
  • Then, specify what to do:
    • 1) If you want it to fade, just add data-animated="fade" and it will fade when the element is scrolled in viewport.
    • 2) If you just want to add a class to the element, just add data-animated="execute". This will add the class .started. This is really cool because you can control what animations it should do when .started is added.


Mailchimp newsletter

This is an embeded form generated by Mailchimp application but customised for Vauss template. You just need to change the action attribute to your own custom link.

For example the link looks like :;id=5544sdfe9da6

Get yours from your Mailchimp account.

Here’s an in depth tutorial here or from MailChimp on how it works .


Parallax images scrolling effect

For an easier implementation, just add the class="parallax-bg" to the element and the style="background-image: url(path/to/image.jpg);" and everything should work properly.


Counting numbers (fun facts)

These elements use the plugin called jQuery CountTo and they’re working by passing data-attribute to the element as parameters. For example:

<span class=”fun-number fw-thin appear” data-to=”520″ data-speed=”600″ data-refresh-interval=”1″ data-easing=”easeOutQuart” ></span>

  • Data-to = to what number should it count to
  • Data-speed = with what speed
  • Data-refresh-interval = eg: from 10 to 10 or from 1 to 1 or 20 to 20.
  • Data-easing= easing effect


Bubble Boxes

A bubble box is an element which appears in the left-bottom corner of the page, upon a specific scrolling value (px) with a specific purpose. There are 2 types preset: Notification box or Ads box.

The element must have data-reveal-at attribute. For example if you want it to appear when you scrolled your page to ~1000px, just add data-reveal-at="1000". If you want it to automatically disappear, add the attribute called data-hide-after which is in miliseconds, for example data-hide-after="3000" which is 3 seconds.


Bottom follower block

This is simple yet complex element which “follows” another element from the page, appearing on the bottom of the page.

To trigger the element, add class=”js-bottom-follower-block” and data-attachto=”#some_element”.  This means that when #some_element is into viewport (upon scrolling), this follower will appear too.


Custom Flickr ID

First get your id from , then add it to the script, screenshot here:


Custom Twitter widget ID

Screenshot here

Back To Top

Caroufredsels components

These carousels are based on CarouFredSel jquery plugin.

To benefit from the already built-in styles, a general rule is to add a .caroufredsel class to the carousel’s markup, which is:

<div class="caroufredsel" data-setup=' { "navigation": true, "pagination": false, "items_width": 270, "items_height": 160 } '>
  <ul class="slides">
    <li><img src="path/to/img1.jpg" alt="" class="img-responsive"></li>
    <li><img src="path/to/img2.jpg" alt="" class="img-responsive"></li>

As you can see, to pass custom settings to the carousel’s js trigger, you must use the data-setup attribute adding a json array inside eg: data-setup='{ "option": "value", "another-option": "value" }' .

To have a carousel without this data-setup attribute (for custom callbacks for example), you need to add a .custom class to the block eg: <div class="caroufredsel custom"> and then construct a js trigger. A good example you should see in this template is the Photogallery widget which is custom built, not by passing option through data-setup.

The options that can be passed through data-setup are:

  • "navigation": true or false (this will enable an arrow navigation)
  • "pagination": true or false (will enable bullets navigation)
  • "responsive": true or false (will enable responsiveness)
  • "scroll": number (The number of items to scroll.)
  • "fx": Possible values: "none", "scroll", "directscroll","fade", "crossfade", "cover", "cover-fade","uncover" or "uncover-fade". (Indicates which effect to use for the transition.)
  • "items": number (The number of visible items.)
  • "items_minimum": number (The minimum number of items needed to create a carousel.)
  • "items_start": number (The nth item to start the carousel.)
  • "items_width": px or percent (The width of the items.)
  • "items_height": px or percent (The height of the items.)
  • "autoplay": true or false (Determines whether the carousel should scroll automatically or not.)
  • "auto_duration": number (The amount of milliseconds the carousel will pause.)
  • "swipe_touch": true or false (Determines whether the carousel should scroll via swiping gestures (on touch-devices only).)
  • "swipe_mouse": true or false (Determines whether the carousel should scroll via dragging (on non-touch-devices only).)


Extra classes:

  • stg-slim-arrows – Will make the arrows to be slim (than the default arrows)
  • stg-slimmer-arrows – Will make the arrows to be even slimmer than the default arrows.
  • bottom-nav – applies to .smallslider as a tweak to move slider arrows to the bottom-right corner.
  • stg-textcenter – will centerize the text in the slider
  • stl-hoverstyle –  will make the navigation to appear on hover only
  • stg-no-quotes – only applies to .testimonial_slider with .quoter-style applied. Will remove the quotes of the slider.

Custom caroufresels already added:

Photogallery widget:

This is an image gallery + slideshow displaying both a big focused image as well as thumbnails with caption on hover. Can be found in Photo Gallery page screenshot


Tweets slider

This slider is automatically created by the twitter fetcher which polls tweets and displays them as slider. The markup is prepared to fetch the tweets as well as transforming them as slider. It can be found in Team member page screenshot

<div id="twitter-slider" class="twitter-slider" data-id="354563456345798336">
  <div class="ts-controls">
    <span class="ts-prev vs-icon icon-angle-left"></span>
    <span class="ts-next vs-icon icon-angle-right"></span>


Back To Top

Folder Structure

Php Helpers Folder

This folder is being used by several components of the website. That’s because plain HTML doesn’t do dynamic stuff, there’s simply no other way.

Contact process php script (_contact-process.php)

This file is being used the the contact forms in the template and it cleans, checks and sends emails to the email address you specify. Don’t forget to change the email address!
There were many users that asked if there could be added other fields to this script. The truth is that it can, but unfortunately we (author) cannot handle any customizations requests so this will have to be done by you or another experienced developer.

Mobile detection (Mobile_Detect.php & _ismobiledevice.php)

Mobile_Detect.php is a php class used to detect what type of device is accessing the website. More here:

_ismobiledevice.php is the file that imports the mobile detect php class and creates the conditionals of what to return. The data is added to the body class with the help of AJAX in vs-scripts.js file.

TimThumb image resizing script (_resize.php & timthumb-config.php )

This is a script that resizes images on the fly and even caches them. You can read a lot of stuff here and periodically update the script. To use it, just find the patterns within the website’s src attributes on img tags and you will see how it’s being used. Or if you have patience try reading on the developer’s website i just mentioned.

The timthumb-config file holds the path of the cache folder (or other settings you want). They’re added in a separate file because periodically you might update the main script and settings could get overwritten.

Video Player (_video-player.php)

This file handles the Magnific Popup Lightbox video player links. The link will contain this file along with extra variables such as video’s path whereas this file prepares everything and delivers the player. The video player is handled by VideoJS, a really powerful tool for such usage.


Back To Top

Other folders & files

There are the common folders “css”, “js” and “images”. These are obvious and for Css and Js folder i will explain later on in depth.

.htaccess file :

This is a file that’s being used by the server (definition: A .htaccess (hypertext access) file is a directory-level configuration file supported by several web servers).

Inside there are a few lines that are commented, used by the Retina Images feature. Will explain later on about the Retina images feature.

Also there’s a caching feature (will speed up your website). It’s enabled by default but it will only work if the server’s Apache support these features (eg: mod_deflate, mod_expires or mod_headers)

_retinaimages.php file:

This is used by the Retina images script. Will explain later in the documentation about it.


An initiative to know the creators of the website. Contains the information about humans to the web building. This file is NOT needed so don’t worry too much about it, just don’t forget to edit it.


Information on the robots.txt Robots Exclusion Standard and other articles about writing well-behaved Web robots. Our websites are constantly being scanned by robots. This file tells the bots what not to scan. For example there are some folders you simply don’t want to be scanned and shown in the search results.

Back To Top

Cache folder

This folder is being used by the resizing php script TimThumb. Make sure it’s chmod’ed to 755 (not 777), or if this doesn’t work, try 757.

In the php-helpers folder article i will explain how to use the resize on the fly script.

Back To Top

Assets folder

This folder contains various assets used by the template:


Demo panel

Folder "/assets/_demo_panel". Here are the files for the demo panel. By default the demo panel is switched off.

To turn ON the demo panel, simply add the attribute data-demopanel="enabled" to the body tag and it should appear on the fly. Please remember, the demo panel is loaded via AJAX and the template should be loaded on a server side environment (check “General” section).


Icon Font

Folder "/assets/_icon_font". The icon font is a custom pack of icons used in the template.  Because the files could get really big i included only what was needed, not entire libraries. The build was done with the awesome tool called IcoMoon

Here’s a short tutorial how to add more icons to this font:

  1. In this folder, beside the font files (icomoon.eot , icomoon.svg , icomoon.ttf , icomoon.woff) you will see a file called selection.json . This file is the configuration of the font icons and will be imported in the IcoMoon app to provide the fonts in it’s list.
  2. So now, open and click on the purple button Import Icons and browse for the selection.json file. You should have a list of all the icons now (all of them selected/highlighted with yellowish border).
  3. You can now Add, Edit or Remove any icon from that list. To add an icon, either import a svg, or right under the icons there’s a link called “Add Icons From Library” and you can choose from thousands of icons. Once you add the entire library, choose what icons should append to the list. Remember a selected icon is highlighted with a yellowish border.  To remove an icon just deselect it.
    To edit or delete an icon, on the top bar you will see a tollbar with a few icons. The first one is to select/deselect icons. The 2nd one (trash can) will provide you posibility to delete icons from the list. You can also move an icon from it’s normal position (most of them are straight centered, but perhaps you want it a bit sided). The last one is to edit an icon and if you know what you’re doing, happy play time 🙂
  4. After you selected all the icons, click on the bottom-center button “Font“.  You should see the whole list of icons generated. Click on the Download button to download the pack.
  5. In the downloaded pack you will notice several folders and files. Access the fonts folder and copy all of the 4 files into the icon_font folder in the template and overwrite the old ones (or not, your choice).
  6. Lastly open the style.css and select the .icon-….. :before {} lines eg: . Now, go to the css folder of the template and open the addons.css stylesheet. Here look for the same lines of predefined icon classes and replace them with the new icon lines.
    You can simply copy just the new icon classes that were added, however if you’re in a rush not having too much patience, copy/replace them all.

Note: I know i could’ve just created a new stylesheet called icon-font.css for example, but the problem was that i wanted to reduce the http requests which affects the website’s performance.


Javascript Plugins

Folder "/assets/_js_plugins". These are javascript plugins that are used only in various pages of the template (therefore loaded separately). For example in a later chapter (Javascript) i will explain the structure and you will see that there are many plugins that are loaded in every single page packed in a .js file. Now, for these in the _js_plugins folder, because they are cases that they’re used barely once in a single page, there’s no point in loading them everywhere.

A list of plugins are:

  • Easy Video Background – plugin used for videos to work properly in any browser (not on mobile though);
  • Prettify Code – used in template to highlight the code syntax used in Styles pages for example;
  • Countdown – used for the countdown timer in Coming Soon page;
  • GMap – used for the custom google maps, for example in Contact Us page
  • Infinite Scroll – this plugin is used in various pages (Timeline blog, BlogFolio etc) and it adds the cool feature of loading content upon scrolling the page.
  • Isotope – this is a layout and sorting plugin for various usages, for example the portfolio items or a simple gallery (PhotoWall in Clean Homepage).
  • Parallax CssTransforms – this is used in the Clean Homepage to provide the first slide a parallax effect with css3 transforms (not classical left,top repositioning)
  • jQuery UI (custom built) – this was added only for the Range field slider in the Shop with Sidebar page (in the left side filters)

 Note: As you can see i haven’t explained too in-depth about these plugins because i couldn’t simply explain more than their very own websites/project pages. 



Folder "/assets/_sliders". These are Sliders/Slideshow jQuery plugins used in the template.

  • BookBlock – this is used in the FlipBlog page.
  • iOS Slider – this is used in several pages, for example Fancy Homepage, Clean Homepage or Portfolio – Photographer page.
  • Revolution Slider – source files of the popular slider. Used in the main Homepage.


Back To Top

General Stuff

Use TextCrawler

TextCrawler is a free software with Search & Replace across files, insert or delete text. You can download from here

As mentioned on their website:

TextCrawler is a fantastic tool for anyone who works with text files. This powerful program enables you to instantly find and replace words and phrases across multiple files and folders. It utilises a flexible Regular Expression engine to enable you to create sophisticated searches, preview replace, perform batch operations, extract text from files and more. It is fast and easy to use, and as powerful as you need it to be.

I use this one to search a string of text to find out where it is across the whole folder and sometimes to batch replace.

Back To Top

Don’t forget to!

These are just a few to do’s that you should not forget about:

Change the email address with your own:

Add your email address in the php-helpers/_contact-process.php page. I still receive emails in my inbox from users who bought other items from me, and haven’t changed the email address there.

Change Twitter widget id:

If you’re planning to use the Twitter feed, don’t forget to change the Widget ID from the js/vs-scripts.js file (search for “twitter”). The id could get blocked if there are too many requests.

Change MailChimp ID:

If you’re going to use the newsletter component, make sure you add your own Mailchimp id.

Add a Google Analytics tracking code:

Don’t forget to track your visitors by adding the Analytics ID (in the bottom of each page).

Edit humans.txt file in the root (or simply delete it if you don’t want it)

Back To Top

Use server-side environment (eg localhost)

For a better experience with the template it’s recommended to be developed/tested in a server side environment:

a) Either hosted online on a server

b) Or better, use a virtual server environment on your personal computer, for example: XAMPP, WAMP, MAMP etc. They contain Apache server, Mysql and PHP and already configured.
Here are some tutorials on how to install them:

Back To Top

Author note

Hey guys, thank you so much for purchasing my template. It’s a hard worked template and i’ve tried to release it with very few bugs or problems and i’ve tested it in many ways, but, problems might appear so i will kindly ask you in case of encountering problems, please start a new thread over the support forums. Thank you so much!!

Back To Top

Other features

Meta tags

In each page’s head tags you can see many meta tags that will come in handy to have a good SEO and relevant info for the crawlers to scan your website. Uncomment the meta tags you are going to use! Be relevant and don’t spam!


Simply and mandatory meta tags:

<meta name="keywords" content="premium html template, unique premium template, multipurpose template" />
<meta name="description" content="Vauss is an ultra-premium, responsive theme built for todays websites. Create your website, fast.">


Canonical meta tags

(url of your website – more here )

<link rel="canonical" href="" />


Restrict google from scanning info from Dmoz or YahooDir

More here:
Also more on robots here

<meta name="robots" content="noodp,noydir"/>


Social media tags and more

Read more here: !!!

Debugging tools:


Google Authorship and Publisher Markup

Author = Owner, Publisher = who built the website. Add profile url in href=””.
Profile url example: or replace [Google+_Profile] below with your profile #

<link rel="author" href="[Google+_Profile]/posts"/>
<link rel="publisher" href="[Google+_Page_Profile]"/> markup for Google+

<meta itemprop="name" content="Vauss Premium Template">
<meta itemprop="description" content="This is the page description">
<meta itemprop="image" content="">

Open Graph Protocol meta tags.

Used mostly for Facebook, more here

<meta property="og:locale" content="en"/>
<meta property="og:type" content="website"/>
<meta property="og:title" content="Vauss Premium Template"/>
<meta property="og:description" content="Vauss is an ultra-premium, responsive theme built for todays websites."/>
<meta property="og:site_name" content="Vauss Premium Template, Vauss Responsive Template"/>
<meta property="og:url" content=""/><!-- Url of your website -->
<meta property="og:image" content=""/><!-- Representative image -->

Twitter Cards

Will generate a card based on the info below.
More here: or

<meta name="twitter:card" content="summary">
<meta name="twitter:image" content=""><!-- Representative image -->
<meta name="twitter:domain" content="">
<meta name="twitter:site" content="@hogash">
<meta name="twitter:creator" content="@hogash">
<meta name="twitter:url" content=""><!-- Url of your website -->
<meta name="twitter:title" content="How to Create a Twitter Card">
<meta name="twitter:description" content="Twitter's new Twitter Cards API allows developers to add META tags to their website, and Twitter will build card content from links to a given site.">


GeoLocation Meta Tags / Geotagging.

Used for custom results in Google.
Generator here

<meta name="geo.placename" content="Chicago, IL, USA" />
<meta name="geo.position" content="41.8781140;-87.6297980" />
<meta name="geo.region" content="US-Illinois" />
<meta name="ICBM" content="41.8781140, -87.6297980" />


Dublin Core Metadata Element Set

Using DC metadata is advantageous from an SEO perspective because search engines might interpret the extra code as an effort to make page content as descriptive and relevant as possible.

<link rel="schema.DC" href="" />
<meta name="DC.Title" content="Vauss Premium Template, Vauss Responsive Template" />
<meta name="DC.Creator" content="hogash" />
<meta name="DC.Type" content="software" />
<meta name="DC.Date" content="2014-09-05" />
<meta name="DC.Format" content="text/html" />
<meta name="DC.Language" content="en" />



Back To Top

Retina images

Retina images feature  serves different images based on the device being used by the viewer. You can find many details here on how it works

Currently in the website, the php file exist under the name of _retinaimages.php in the php-helpers folder. Also i’ve added in .htaccess file it’s code but commented. Finally in each page in the <head> tag, you should find a commented script that holds the javascript.

Why the code is commented?

Well , i’m not a big fan of retina images, although it looks like it makes the web a better place, the cost of bandwidth is way too big. Ironically most smartphone devices with limited bandwidth have Retina or better said doubled devicePixelRatio . The cost is too big and perhaps in a few years with 4G+ speeds and perhaps unlimited bandwidth we can truly forget about website sizes, for the moment i recommend the tool only where you really need to use it.

Back To Top

PSD Files

Included PSD files

We’ve included a ton of PSD’s for almost every page in the template. The PSD’s are layered, properly arranged with colour markings for every group.

Note: They don’t included images, mostly to reduce the size of them.

Back To Top

Site Structure

CSS Structure

The CSS Stylesheet structure:

Custom.css stylesheet:

This stylesheet is where you add your own css styles. The file is separate because template.css or other stylesheets surely will be updated and we cannot afford such terrible thing to happen. Make sure you add your own styles here, either new styles or simply override others. Custom.css is loaded lastly so that you can easily override any properties.


Updates.css stylesheet:

This file is intened to contain css updates for this template. Although template.css is the main packed file which will also contain updates, this one is a backup plan if you do edit template.css and don’t want to overwrite it. It’s important not to edit this file neither.


Bootstrap.css stylesheet:

This stylesheet contains thousands of really cool styles generated by the famous Bootstrap UI Toolkit (UI Framework). To build your own custom built please follow this link and choose what to load or not.  This is a unique link that holds the configuration of the Boostrap build. For example you might not want all sorts of things that’s loaded inside and removing stuff will optimize page speed. There are thousands of documentation lines on the Bootstrap’s website so i highly recommend having a look and try using stuff that’s already loaded in the template, before loading other plugins.


Addons.css stylesheet:

This stylesheet packs all sorts of styles that are either used by javascript plugins, or simple preset classes to be used within the website. Also this one holds the Bootstrap custom theme so if you want to modify stuff, try editing here or better add into custom.css stylesheet.

A brief of styles inside:

  • Typography presets (font-weight, letter spacing)
  • Text color classes presets
  • Background color classes presets
  • Misc helper classes
  • Transition StylesMagnific Popup Lightbox
  • CSS Entrance animations
  • Jquery UI slider styles
  • bubble-box animation styles
  • Bootstrap documentation styles
  • Font-Face Icons
  • Bootstrap v3.2.0 (Theme)


Base-sizing.css stylesheet

This stylesheet holds preset classes that are duplicated for each main media resolution breakpoint (xs , sm , md , lg). This offers immense customisation power with just a few classes added to a certain block or element.

A brief list of classes group inside:

  • Margin classes
    Example: mt-20 (margin-top:20px), ml-40 (margin-left:40px), mr-60 (margin-right:60px), mb-80 (margin-bottom:80px)
    Example on small screens: mt-sm-20 (margin-top:20px), ml-sm-40 (margin-left:40px), mr-sm-60 (margin-right:60px), mb-sm-80 (margin-bottom:80px)
  • Negative Margin classes (left, right, top, bottom). They’re named “mnl-10” or “mnl-md-10” (margin negative left or margin nevative top etc.)
  • Padding Classes (left, right, top, bottom). Named “pb-10” or “pb-xs-10” (padding bottom)
  • Font-sizes-presets (fs-small, fs-xxl etc.). For smaller screens: fs-sm-small, fs-sm-xxl .
  • Height Sizing Presets
    These are height values from 10 to 10 to set responsive height to a block.
    Example: hsize-110 or hsize-160 etc.
    Example smaller screens: hsize-md-110 or hsize-sm-110 or hsize-xs-110
    Generally used on the page header sections.
  • Float & Float Clearing Presets
  • Width presets
  • Button Padding classes
  • Column list reset class
  • Text align class

I highly recommend having a look overall in the stylesheet and keep in mind what’s inside and what you can use from it. I added lot’s of html markup examples with these classes applied.

Let me demonstrate you the power of such presets. Remember they are added so that the code becomes objective not being needed to create custom classes that will probably just be used once in the entire website.

<div class="mt-100 mt-sm-50">
  This block will have a 100px margin-top (on any resolution)
  Also because mt-sm-50 is added, the top margin becomes 50px on resolutions smaller than 992px


<h3 class="fs-xxl fs-xs-small">
  This heading has 36px by default (because of the fs-xxl class) but on mobile devices (767px and smaller) the font-size will become 16px. We solved both mobile layout problem and also reduced several lines of code.


 Template.css stylesheet

This is the main stylesheet which contains almost everything that the template is styled upon. Please keep in mind that i will surely update the template therefore this file too so i highly recommend NOT to edit or alter it, and instead add your own css code into custom.css stylesheet. It’s very important not to overwrite your work.

The template itself serves as a database of examples of html markup and css styles applied. In the Styles menu pages you can see there are lots of examples of the classes and styles added to the elements. I really don;t know what to add here as i would actually recommend scanning the file by yourself and see what’s inside. If there’s no patience for this, no problem, just copy/paste code from the existing html files and then debug styles using the Chrome Developer Tools (see TIPS section with a few tutorials).

If you do want me to explain certain stuff please drop me an email through my Themeforest profile page’s contact form and i will update the documentation.

 Template.css stylesheet (part 2 – responsive styles)

At the end of the stylesheet you will find the @media queries and responsive design styles. Please keep in mind that the styles are desktop first, not mobile first.

To debug responsive css styles, open the Chrome Developer Tools in a new window and resize your browser. On the right side css styles pane you will notice that media queries appear and you can simply figure out what styles are applied.

Back To Top

JS Structure

Main js files:

Bootstrap (bootstrap.min.js)

Scripts being used by Bootstrap. To build your own custom load please access this url and then overwrite the existing one.  This is a unique link that holds the configuration of the Boostrap build.


Plugins (vs-plugins.js)

This is a bundled js file which holds many javascript and jQuery scripts. The main reason why it’s being bundled, is because of the http load requests to be minimized to increase loading performance. These plugins are loaded in the entire website because they are very common and used in the template. If you want to cleanup, make sure you also remove triggers from vs-scripts.js file so there won’t be any js errors.

A list of plugins:

  • Browser Detection Script – Adds a browser name class to the body tag. While i don’t recommend browser sniffing, this could be in handy when you really want to make something in a specific browser.
  • jQuery SmartScroll – This is a debouncer for the scrolling event. It basically optimizes the javascript triggers/hooks etc. upon scrolling.
  • jQuery SmartResize – This is a debouncer for the browser resize event. It basically optimizes the javascript triggers/hooks etc. upon resizing your browser. It increases performance.
  • jQuery Appear plugin  – Used for the elements in viewport animation when scrolling
  • SmoothScroll – Customizes the scrolling effect making it a bit more eased. I must admit it does affect performance and if needed i recommend deleting the script.
  • jQuery Easing – Classic jQuery plugin to add mathematical easing effects
  • jQuery Easy Video background – This is a premium plugin which displays videos as normal players or backgrounds. It supports both video tags but also youtube videos.
  • jQuery Parallax – This will add the scrolling image effect to some backgrounds.
  • jQuery Skrollr – Scrolling effects attached to various elements. Really powerful but also performance costly. Use it careful.
  • jQuery FitVids – This plugin makes embeded videos to respond to the resolution or the size of the container/holder.
  • jQuery easyPieChart – Plugin to add custom charts. Really cool things can be done with it.
  • Twitter Post Fetcher – This will fetch the latest tweets of your Twitter account.
  • jQuery Flickr Plugin – This will fetch the latest images from your Flickr account. Make sure you get an id here
  • jQuery Magnific Popup – Awesome and lightweight popups. Also really powerful and customisable.
  • jQuery TouchSwipe – This plugin will add swipe events to non-touch devices.
  • jQuery carouFredSel – This is a really powerful carousel solution. There are literally tons of resources and demos online.
  • jQuery CountTo – Plugin being used to display numbers being counted from # to # .
  • imagesLoaded plugin – Plugin that helps other plugins to be lauched only when the images within a specific container are loaded.
  • jQuery h5Validate – HTML5 form validator. Fully benefit by the html5’s validation power
  • jQuery Simple Text Rotator – a really easy and simple plugin to add a rotating text effect.
  • matchMedia() polyfill – This polyfill is being used as a helper in js scripts to match a specific media query
  • SWF Object – Classic swf object handler.

 Note: As you can see i haven’t explained too in-depth about these plugins because i couldn’t simply explain more than their very own websites or project pages. 


 Vauss Scripts (vs-scripts.js)

This script file contains triggers for almost anything that’s being javascript handled.

There are no custom required settings to be change here, only if you really want to. I tried to make the settings to be added through custom data-attributes. If you do intend to change something here keep in mind that updates will be released and i will most likely overwrite this file.

Note: There are also page specific scripts but this one in particular mostly executes plugins from vs-plugins.js file.


Custom Scripts (vs-custom.js)

Well this is for you my dear loyal customer. Because there’s a big chance that i will update vs-scripts.js file, it’s highly recommended to add your own scripts here in this file.


Other scripts:

Modernizr (/vendor/modernizr.min.js)

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. It can be either used in your custom javascript as a feature detection (eg: detect if device is touch enabled), or when you want to style your website differently or with fallbacks for older browsers. This library is being used constantly in the template so it’s mandatory not to be touched (other than to extend it’s custom built).

Pace (pace.js)

This is a cool loading script that not only adds a loading bar on the top of the website, it also adds loading events to the page and body classes (eg: .pace-done )
Note: it’s loaded separately (not bundled in the plugins script because i wanted to be loaded before anything else).

Back To Top

Grid Markup

This template uses Bootstrap UI Toolkit and framework and therefore it uses a complex but so useful grid system.

Instead of in-depth explaining here i would better suggest heading over the Bootstrap website as there are massive useful info’s about the grid system which are far better explain that i ever could.

Just some short tips:

  • There are 12 columns
  • there are 4 states of how is the grid applied – xs , sm , md and lg .
  • You can have all 4 types of classes tied to a column eg: class=” col-xs-10 col-sm-6 col-md-4 col-lg-3 ” (this means that on large devices the column will occupy 3 columns, while on medium devices 4 columns, 6 colums on small devices and 10 colums on even smaller devices such as smartphones or phablets).
  • If you just add a lg column class (eg col-lg-6), it will only occupy the #no o cols you specified (6), on large devices (1200+), while on smaller devices it won;’t have any predefined width, just 100%.
  • if you add a single md column class (eg col-md-6), it will only occupy the #no o cols you specifed (6) but on medium and large devices (992+), while on smaller devices it won’t have any width, just 100%
  • Grids must be inside of a .row, while a .row must be inside a .container


Back To Top

HTML Markup

The HTML markup of the template’s pages follow this pattern:

  -- #page_wrapper (wraps almost everything except side panels, popup windows, page preloader and other stuff like scripts or #totop button )
    -- #header
      -- .top-header (contains social icons, login link, language flags and an email address)
      -- .main-header (contains logo, main menu navigation, cart panel or side menu panel)
    -- #page-slideshow (holds the slideshows of the page)
    -- #page-header (this holds the head part of a page without Slideshow, but it's not mandatory to be present. Usually it's one of these 2, not both)
    -- #main (this holds the main content of the website)
      -- (this holds the primary content of a page, for example article, component etc.)
        -- 9 columns - holds the #mainbody of the page (exact content)
        -- 3 colums - holds the sidebar
      -- other sections (sections with various content, used mostly for homepages where it's a modular structure)
    -- #footer
      -- .main-footer (holds main content of the footer like menu highlights, newsletter, flickr stream, contact form or simply branding block)
      -- .bottom-footer (holds copyright information and a quick menu)

This example doesn’t necesarily mean it’s this exact pattern however it’s the most common used. For example pages such as offline or coming soon have a different markup.


Other mentionable html markups are:

Loader (page preloader)

Shown when the page is loaded.

<div class="loader" title="Loading..">
</div><!-- /.loader -->

IE Chromeframe bar

Used to display a top fixed bar in older IE browsers  to help them make their life easier.

<!--[if lte IE 8]>
  <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="">upgrade your browser</a> or <a href="">activate Google Chrome Frame</a> to improve your experience.</p>

Facebook SDK kit

This is the official Facebook dev. kit. You can add any type of Facebook widget (such as like button, comments, etc.)

<div id="fb-root"></div>

Site mobile navigation

This is the container of the main menu that’s cloned to be displayed on mobile (or low res) devices.

<div class="site-mobile-nav hidden-lg hidden-md" id="main-nav-mobile">
  <a href="#" class="s-panel--close"><i class="vs-icon icon-times"></i></a>
</div><!-- /.main-nav-mobile -->

Side menu panel

The nice panel that’s revealed on the right side, triggered by the button in the right side of the navigation.

<div class="sm-panel" id="smp">
  <div class="sm-panel--inner">
  </div><!-- /.inner-panel -->
  <a href="#" class="s-panel--close"><i class="vs-icon icon-times"></i></a>
<!-- /.sm-panel -->

Popup Boxes

These are popup boxes that are being used by Magnific Popup lightbox script. They hold hidden content that should only be displayed upon request.

<div class="vs-pp-box vs-login-box mfp-hide" id="login-box">
  <div class="vs-pp-inner">
  </div><!-- /.vs-pp-inner -->
</div><!-- /#login-box.login-box -->

To Top button

Classic go to top button. Just make sure not to change the id as it holds the styling but also js click event.

<a href="#" id="totop"></a>

Back To Top


Revolution Slider

Revolution slider is a premium jQuery plugin for animating elements within a slider. More about it here .

As the descrption on the main Revolution slider page says:

Turn simple HTML markup into a responsive(mobile friendly) or fullwidth slider with must-see-effects and meanwhile keep or build your SEO optimization (all content always readable for search engines).
See the heaps of custom transitions/animations for each object on the page! Customize this slider with just a little HTML and CSS to your very needs.

There aren’t any special explanations for this slider, just try to read the documentation of it provided in the download pack.

Back To Top


Iosslider is a Touch Enabled, Responsive jQuery Horizontal Content Slider/Carousel/Image Gallery Plugin. More info and documentation here:


A slide image can be added as a background image which is responsively adapted to the resolution of the screen size. For example:

<div class="slide-image" style="background-image:url(images/sliders/iosslider_fullheight/slide3.jpg);"></div>


The captions have inside a container and simply bootstrap grid so you can basically do whatever you want inside.

<div class="iosslider-caption-wrapper">

  <div class="container">
    <div class="row">
      <div class="col-sm-12">

        <div class="iosslider-caption ">
          <h3 class="capt fs-xxxxl ">SOME TITLE HERE</h3>
          <h3 class="capt fs-xxl ">AND A SUBTITLE AS WELL HERE</h3>
          <a href="#" class="capt btn btn-vs btn-custom ">GET STARTED</a>




Back To Top

Sources and Credits

Template Customisation

Boxed Layout

As you saw in the demo template’s demo panel (boxed layout tab). the boxed layout is a layout that makes your site to be fixed-width.

To achieve a boxed layout simply add the class .boxed-layout to the body tag.


To style the background, simple add this line in custom.css stylesheet and change the hex color code:

body.boxed-layout { background-color: #FFFFFF; }


To add a background image, also open custom.css stylesheet and add your own bg image/pattern you want. for example:

body.boxed-layout { background-image: url(../images/vs-patterns/bg_09.jpg);}


Adding a subtle shadow to the boxed layout:

To add a simple subtle shadow, simply add .boxed-shadow to the body tag (which only works when .boxed-layout is added, for example <body class="... boxed-layout boxed-shadow"  )

Back To Top

Main Color Customisation

In this template you will notice there aren’t any predefined stylesheets with different colors. The fact it’s just too complicated to maintain multiple stylesheets and the easiest and most recommended way of changing the main predominant color of the template is to simply:

  1. Open template.css with your favorite editor
  2. Hit Search & Replace (if you don’t know, try Ctrl+H or Ctrl+F)
  3. In the search field add this hex color code which is used now #fe6060 and in the replace field add your own desired color code.


Back To Top

Footer Customisations

The footer is built upon 2 main segments, main-footer and bottom-footer. The bottom-footer usually contains copyright info and some quick links.

The footer’s markup is:

<footer id="footer" class="site-footer">
  <div class="main-footer">
    ... container > row> columns here ...
  <div class="bottom-footer">
    ... container > row> columns here ...

If you want to have a custom color for the footer, simply add this css line in custom.css and change the color with your own:

.site-footer { background: #1A1C25; }


Footer Styles:

There are 3 footer styles:

  • Default, no class needed. It’s one color only #1A1C25 with bottom footer being transparently over the main color, creating a darker color.
  • Light – will make the background white. To achieve this add .footer-light to the footer block, eg: <footer id="footer" class="site-footer footer-light">
  • Dark – will make the background dark. To achieve this add .footer-dark to the footer block, eg: <footer id="footer" class="site-footer footer-dark">


Extra styles:

  • Footer with border – the bottom footer will have a top border/separator. To achieve this add .footer-borders to the footer block, eg: <footer id="footer" class="site-footer footer-borders">
  • Full backround – enabling this, will make the whole background of the footer to be constant, or better said, there’s no bottom footer background. To achieve this add .full-black or .full-white to the footer block, eg: <footer id="footer" site-footer footer-dark footer-borders full-black>

Back To Top

Logo styles

As presented in the template’s demo – demo panel (Logo tab), there are some predefined simple styles for the logo:

1) Colored Logo (eg: )
This will colorize the logo having the template’s main color (or any color you want). Simply add .logo-colored to the logo container, result being something like <div class="logo-container logo-colored"> .

2) Offset logo
This setting depends on the colorized logo. It will offset the colorized logo into the left like .
To achive this design simply add .logo-offset to the logo container, result being something like <div class="logo-container logo-colored logo-offset"> .

3) Outside logo ( )
For this i’m afraid there isn’t any special class, just markup change. Simple move the whole logo container div a few upper levels until right before the opening <div class=”main-header”> tag.



This is a hover panel which appears upon hover mouse event over the logo. It contains anything you want, we though it should be nice to look like a business card with some important info.

Simply add your own content into .infocard div:

<div class="infocard">


Back To Top

Side menu (right)

This right side panel which usually holds extra links and info, is a button + panel toggle which openes upon clicking the “hamburger” icon and closing upon clicking the close button or scrolling the page.

It’s markup is really simple:

<div class="sm-panel" id="smp">
  <div class="sm-panel--inner">

    <h4 class="side-title">SPECIAL PAGES</h4>
    <ul class="side-menu reset-list">
      <li><a href="#">...</a></li>

  <a href="#" class="s-panel--close"><i class="vs-icon icon-times"></i></a>

And the headericon link:

<a href="javascript:void(0);" id="smt" class="headericon mobilenav-icon"><span></span></a>

Which remember, is added inside <ul class="right-nav" id="right-nav-outside"> list.

Back To Top

Menu styles

The main navigation has a few styles that i will explain more of. Keep in mind that there’s a javascript tiny snippet (in the vs-scripts.js file around line ~170) which automatically adds an active class (highlight) to the menu item that’s currently active.

All the classes that i will explain about below, they’re added to the <ul class="vs-menu"> list only.


Menu Types:

1) Default, not needing any class. It’s 100% height for the 1st level and normal on the submenu’s.

2) Fancy Menu – button-like menu items
To be added, simply add .sitemenu-fancy the result being something like <ul class="vs-menu sitemenu-fancy">

Extra styling classes:

Border around buttons – This will add a discrete border on item on hover and active. To add, use class .sitemenu-extra-border , the result being something like <ul class="vs-menu sitemenu-fancy sitemenu-extra-border"> . Remember, this style only applies to Fancy menu.

Colored buttons – Colorize the active item with full background color on hover and active. Also it removes border on “fancy” menu mode. To add, use class .sitemenu-extra-colored   , the result being something like <ul class="vs-menu sitemenu-extra-colored "> .

Bold menu items – This setting will will uppercase text and add bold font weight.  To add, use class .sitemenu-extra-strong , the result being something like <ul class="vs-menu sitemenu-extra-strong"> .

Remove arrows – Will remove arrows of menu items with submenus.  To add, use class .sitemenu-extra-no-arrows , the result being something like <ul class="vs-menu sitemenu-extra-no-arrows"> .

Submenu theme (submenu’s background color)

  • For Light submenu’s simple add class .sitemenu-submenu-light the result being something like <ul class="vs-menu sitemenu-submenu-light">.
  • For Dark submenu’s simple add class .sitemenu-submenu-dark the result being something like <ul class="vs-menu sitemenu-submenu-dark">.


Align menu in the center:

If you take a look at this page, you will notice the menu is aligned on center. To achieve that, simple add class .stg-menu-center to the #navigation nav tag. What you should have is: <nav id="navigation" class="site-main-nav stg-menu-center">

Back To Top

Sticky Header

As you saw in the demo, the sticky header is activated however it only appears when scrolling up. After a nice read here i realised that viewport height of the browser is very important and it ‘s better not to cover it with something permanently. Therefore this sticky header appears when scrolling up, basically anticipating your need of accessing another page/link in the menu.

Activating the Sticky header is really easy, you just need to add class="header-sticky" to the body tag.  Simple as that!


Settings and options:

1) Sticky header theme options:

  • hs–light – adding class="header-sticky hs--light" will make the sticky header to go white/light background.
  • hs–dark – adding class="header-sticky hs--dark" will make the sticky header to go black/dark background.

2) Sticky header always fixed to top.

You might want to make it always fixed on top, so in order to do that, simply add the class .hs--always for example: class="header-sticky hs--light hs--always" which results in a sticky light header always fixed upon scrolling.

Back To Top

Header type & style

As you can see in the demo, using the Demo Panel panel you can customize the header a lot. The styling of the header is made with custom classes added exclusively to the body tag.

There are 2(3ish) types of headers:

  1. Default header – no classes needed. Example:
  2. Absolute header
    This header will be absolutely positioned in the page, meaning that what’s after the header, for example the slideshow, will be positioned behind the header. This type is usually recommended when header is transparent fitting nicely over an image or video.
    Here’s an example of an absolute header
    To achieve this design, simply add class="header-absolute" to the body tag.
  3. Sticky header
    This isn’t actually a header type, more like a header extension. I will explain more about it in the next chapter.

Header styles:

The header is divided in 2 parts, Top-header (.top-header) and Main-header (.main-header).

Top Header:

The topheader contains a social list icon on the left side and on the right side several buttons and language panel.

There are 2 main theme styles and a general override:

  1. Light – to achieve it, add class="th--light" into the body tag
  2. Dark – for this style, add class="th--dark" into the body tag
  3. Transparent – this will take over even if a topheader theme is added. It basically removes the topheader background color.
    To achieve this style, add class="th--light OR th-dark AND th---transparent". It’s better to add theme because there’s the typography color so it’s necessary to have it.

Extra attributes:

  • Bottom border – by adding class="th---extra-border" to the body tag there will be added a border line on the bottom of the topheader. Don’t forget to select which theme to have.
  • Full bottom border – this will expand the border to be fully wide. Add class="th---extra-border th----extra-full" to the body tag .

Remember these extra attributes depend on the topheader’s theme style and they adapt after them. For example if th-light is added, the border will be darkish (assuming there’s a white background).

Main Header:

The main header contains the logo, main menu navigation and a list which contains several panels (search panel, shopping cart panel and side menu hidden).

Across the template you will notice that the logo might be outside of the container (fully aligned on the right), or several panels from the right, inside the main container of the header. This is just simple markup move, no extra tags. Just select the piece of code and move it where you want, just try looking at 2 different pages (one with logo inside  and one with it outside) or the right-nav (one that has search bar inside or other outside). Looking at the html code you will figure it out easily.

Alike top header, there are 2 main theme styles and a general override:

  1. Light – to achieve it, add class="mh--light" into the body tag
  2. Dark – for this style, add class="mh--dark" into the body tag
  3. Transparent – this will take over even if a top header theme is added. It basically removes the topheader background color.
    To achieve this style, add class="mh--light OR mh-dark AND mh---transparent". It’s better to add theme because there’s the typography color so it’s necessary to have it.

Back To Top