1. Overview: Visio - MultiPurpose Responsive Website

Visio is a powerful website template and layout oriented which can be used to create an unlimited number of page designs. This template not just offers some pre-made page layouts, but it gives you the right tools to create the layout you want and need in no time.

All the code is built from scratch and optimized to cover a large number of scenarios that may occur during the development procees. All styles are created with LESS and the variables are well structred and optimized so you can edit them with ease.

We want to thank you that you chose Visio for your project and stay tuned, because this is just the biginning.

1.2 What's in the box

What's great about Visio is that you have everything you need in one place, no matter you need a multi-page or one page website. The files are very well organized and very easy to work with. After the unzipping process you will have the next file and folder structure:

                                   
visio-root-folder/
├── ajax/
├── assets/
│   ├── bootstrap/
│   ├── ...
├── css/
│   ├── global-style.css
├── fonts/
│   ├── font-awesome/
│   ├── ionicons/
│   ├── ...
├── images/
├── js/
├── less/
│   ├── components
│   ├── core
│   ├── effects
│   ├── headers
│   ├── variables
│   ├──├── variables.less
│   ├── assets.less
│   ├── base.less
│   ├──├── ...
└── newsletter
└── index.html
└── about.html
└── ...

Visio comes with both CSS and LESS folder. It is up to you which method will choose to customize your website. Learn more in the CSS or LESS sections.

1.3 Getting started

If you are now all set up, you can opt using the pre-defined page layouts (ex: index.html, about-1.html) or create your own by using one of the starter templates or layout concepts which contain the page's main structure.

All you have to do is to fill it up with the desired elements and content.

Starter templates

We prepared for you a set of pages that contain only the header, slidebar (optional), footer and other variations to ease your work and start the work immediately.

1. _starter-default.html Default template starter template with all the main components
2. _starter-no-slidebar.html The same as the default starter, but without the slidebar option
3. _starter-fixed-header.html Default template with fixed (sticky) header
4. _starter-boxed.html This is the boxed layout version
5. _starter-boxed-fixed-header.html This is the boxed layout version with fixed (sticky) header
6. _starter-dark.html Starter template for the dark layout version
7. _starter-default-rtl.html Right to left version all set up and ready to go for arabic languages

2. How the styles work: A brief in CSS and LESS

2.1 Visio - LESS file structure

Upated v1.1

All core file were moved from less root folder into the core folder so we can have a more organized structure.

Visio styles are created from scratch with LESS. You will get used to the way it works very easily because of the well organized files and well commented code lines. We divided the global style in smaller files which are imported in the main global file so you can keep or remove exactly what you need or use even though in most cases that won't be necessary. We managed to keep the stylesheet very light and optimized.

The LESS folder structure should be something like this:

less/
├── components/
├── core/
├── effects/
├── headers/
├── variables/
└── assets.less
└── base.less
└── ...

Folder	Description
components	It contains all the customized Bootstrap components
cored	It contains all core files that are used to create the main styles
effects	You have available a large variety of effects: image hover effects, icons effect and a lot more to come.
headers	All header/navbar styles will be kept in this folder
variables	All variables are stored in this folder. You can create new ones. Learn more in the "Variables" section

2.2 About LESS

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.

Less runs inside Node, in the browser and inside Rhino. There are also many 3rd party tools that allow you to compile your files and watch for changes. For example:

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

compiles to:

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

2.3 Setting up the enviornment

Less can be used on the command line via npm, downloaded as a script file for the browser or used in a wide variety of third party tools. See the Usage section for more detailed information.

Next, we will give you the steps needed to set up the enviornment for developing with LESS via less.js (client side) and/or a third party tool.

Client side usage

Client-side is the easiest way to get started and good for developing with Less, but in production, when performance and reliability is important, we recommend pre-compiling using node.js or one of the many third party tools available.

To start off, link your .less stylesheets with the rel attribute set to "stylesheet/less":

<link rel="stylesheet/less" type="text/css" href="global-style.less" />

Next, include less.js in a <script></script> tag in the <head> element of your page:

<script src="js/less.js" type="text/javascript"></script>

• Make sure you include your stylesheets before the script.
• When you link more than one .less stylesheet each of them is compiled independently.
• So any variables, mixins or namespaces you define in a stylesheet are not accessible in any other.
• Due to the same origin policy of browsers loading external resources requires enabling CORS

Browser Options

Options are defined by setting them on a global less object before the <script src="less.js"></script>:

<script>
  less = {
    env: "development",
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    rootpath: ":/a.com/"
  };
</script>
<script src="js/less.js"></script>

Third party tool

For developing and compiling the modifications made in LESS files you will need to download an app. We recommend Koala App for its simplicity and well thought functionality. One of the great functionalities it has is Real-time Compilation which will help you a lot by compiling and saving the modification you make into a CSS file automatically.

Click here to download Koala App

Edit and compile with Koala App

• 1

  Open Koala App and include the Visio project. Seek the global-style.less and open it. When you press "Compile", it automatically creates a css folder in the root folder and puts the compiled file with the same name and the .css extension. After that, as long as you keep the Koala App opened in this state and have the "Auto Compile" option checked, it will re-compile this file each time you make modifications in it or a dependency file and save it.

• 2

  Open Sublime Text 3 or the code editor of your choice and include the Visio root folder

• 3

  Open variables.less from the variables folder. You will see that each category of variables (backgrounds, colors, header, layout etc) is very well delimited and commented so you can easily figure out what are they doing.

• 4

  Now, this is the part where you will play and create you own design. Change colors, background, fonts (choose any font from Google Fonts library and import it within this file or separately via http in the head section), border radiuses, navbar etc.

• 5

  After you are done, save all the files. If the global-styles is not already compiled, go in Koala App and compile it. We recommend before compiling to select from Output Style the "Compress" option. It will compress the css file so it will decrease a lot the KB number.

2.4 Creating new LESS styles

Is highly recommended that all the customized user styles to be stored only within custom.less file from the less folder so you can update this theme everytime with no effort.

Note When you update Visio, make sure not to ovveride the custom.less file that may contain styles you created with the empty one from Visio pack. That's why, before every update, you should backup your project files.

2.5 Working with LESS variables

The variables file is located in less > variables > variables.less.

All variables are well organized and grouped by sections/elements. We tried to comment it as well as possible so you can easily figure out what does each variable.

Note We recommend not to modify the original variables.less file, but use the already created variables-custom.less instead located in the same folder.

Copy and paste the variables or group of variables from the original file in variables-custom.less and replace existing values with your new ones and preview your changes by using one of the methods described in "Setting up the enviornment".

3. Customize theme with LESS

Next, we will show you how to customize Visio at a basic level so you can get started with a fresh and original layout.

3.1 Set up fonts and headings

To set up fonts is easy. There are two ways for doing it: via Google font or manually

Via Google fonts

Update v1.1

• 1

  Go to Google fonts and choose your webfont. You can import it in the base.less file with a standard CSS @import or directly in the head section of your page via <link> tag. All fonts are now include in the head section via <link> tag

• 2

  Replace @fontFamily-1 with the font you want to use on headings, headers or special titles.

• 3

  Replace @fontFamily-2 with the font you want to use on large text content.
  Note Replace both variables with the same value if you want only one font type on your website.

Via manual import

• 1

  Copy the font files in the fonts folder: fonts > other

• 2

  Open fonts.less file from the less folder and create your font type as you can see in the example exposed there.

• 3

  Replace @fontFamily-1 and/or @fontFamily-2 with the font family name you just created.

This is all you have to do to change the font types of your website.

Check out all the other variables to change font sizes, weight, transforms, color etc. The same procedure applies to the headings too.

3.2. Set up base colors

Update v1.1

Now it is time to go to the fun part. Visio comes with a lot of features that allow you to be as creative as you want. For that we put at your disposal 5 base colors that can be used in your template as you need.

Each base color variable is represented by a special CSS class that can be used on a large variety of elements in your website. Also it can be used to color the main sections so you can delimit the content in a nice and colorful way.

Next we will explain how Visio base colors are thought and how can you use them in your project by creating your one color palette:

Variable	Class	Description
@colorBase-1	.bg-base-1	This is the website's main color. Choose what color would you want your website to have
@colorBase-2	.bg-base-2	This is the website's second main color. In case you want a two color website choose a contrast color. If not, replace it with the same value as @bgBase-1
@colorBase-3	.bg-base-3	This is the website's third main color. In case you want a three color website choose a contrast color. If not, replace it with the same value as @bgBase-1
@colorBase-4	.bg-base-4	Replace it with a dark color that comes in contrast with the first three base colors.
@colorBase-5	.bg-base-5	Replace it with a light color that comes in contrast with the first three base colors.

Example of color palette

Note Each base color has a text color attached so you don't need to worry about the content's color inside containers that have base colors as backgrounds.

Variable	Class	Description
@colorBaseText-1	.c-text-1	Replace with a color that can be readable on top of @colorBase-1. The same applies for the next variables.
@colorBaseText-2	.c-text-2
@colorBaseText-3	.c-text-3
@colorBaseText-4	.c-text-4
@colorBaseText-5	.c-text-5

Note To use the base color as text color use instead of .c-text-1 the .c-base-1 class. Apply the same procedure for any of the 5 base colors

3.3 Edit header properties

//== Navbar 

//## Navbar font family
@navbarFontFamily:          @fontFamily-1;

@navbarItemDelimiter:       transparent;            
@navbarBg-1:                #FFF;               // Default navabr background color
@navbarBg-2:                #232323;            // Alternative navbar background color (ex: navbar-inverse)         
@navbarBorderBottomHeight:  0;
@navbarBorderBottomColor:   lighten(@navbarBg-1, 10%);

@navbarItemBg:              transparent;
@navbarItemBgHover:         transparent;
@navbarItemBorderRadius:    0;

@navbarItemTextColor:               #333;
@navbarItemTextColorHover:          @colorBase-1;
@navbarItemTextColorActive:         @colorBase-1;
@navbarItemTextColorActiveHover:    @colorBase-1;
@navbarItemFontSize:                15px;
@navbarItemFontWeight:              500;
@navbarItemTextTransform:           capitalize;

@navbarItemArrowFontSize:           8px;

4. Theme customization

Visio comes with 1 default style. Since the main styles are built with LESS there is no need to use other styles beside the global-style.css.

4.2 Creating custom styles

If you need to create/edit some styles we recommend you to use the custom-style.css from the css folder. This way you will be able to get all the updates without having to make any modification.

If you don't need to make custom styles, remove the connexion made in the head section of your page and keep only the global style.

4.3 Boxed layout

On the body tag, add the class .body-boxed

<div class="body-wrap body-boxed">
    ...
</div>

If you want a boxed layout with no margins, add the .body-boxed-no-margin class next to the .body-boxed class

<div class="body-wrap body-boxed body-boxed-no-margin">
    ...
</div>

To add a background color or image on the body, we created 9 pre-defined classes (3 colors, 3 patterns, 3 images) that can be added on the body tag. Each of these classes has a variable that can be easily changed in the variables.less.

Class name	LESS variable	Description
.body-bg-1	@bodyBg-1	Replace the LESS variable value with a HEX or RGB color
.body-bg-2	@bodyBg-2	Replace the LESS variable value with a HEX or RGB color
.body-bg-3	@bodyBg-3	Replace the LESS variable value with a HEX or RGB color
.body-bg-4	@bodyPattern-1	Replace this variable with an image located in the images -> patterns folder or simply replace the pattern image with your own.
.body-bg-5	@bodyPattern-2	Replace this variable with an image located in the images -> patterns folder or simply replace the pattern image with your own.
.body-bg-6	@bodyPattern-3	Replace this variable with an image located in the images -> patterns folder or simply replace the pattern image with your own.
.body-bg-7	@bodyImg-1	Replace this variable with an image located in the images -> backgrounds folder or simply replace the background image with your own.
.body-bg-8	@bodyImg-2	Replace this variable with an image located in the images -> backgrounds folder or simply replace the background image with your own.
.body-bg-9	@bodyImg-3	Replace this variable with an image located in the images -> backgrounds folder or simply replace the background image with your own.

4.4 Headers and navigations

Visio comes with 3 types of headers, default, opaque, transparent each one having an inverse version

Header types

You can see below the main HTML structure for each header type. Click on each one to see more informations:

Note Each header type can be found its special page. Check out the pages that have the filename beginning with "header-".

Make the header fixed (sticky)

For making headers sticky, we used Bootstrap's affix functionality. Just add .header-affix class next to .header, data-offset-top="x", where x is the offset value you want to add before the affixed navbar appears, and data-nav-animation="slideInDown". You can select any animation from the animate.css plugin. Check out all the animation options here: https://daneden.github.io/animate.css/

<div class="header header-affix" data-offset-top="80" data-nav-animation="slideInDown" id="header"> 
    <nav class="navbar navbar-main" role="navigation" id="slide-nav">
        ...
    </nav>
</div>

Navbar options

navbar-shadow

You can add a smooth shadow under the header by adding this class next to .navbar-main class.

4.5 Mobile navigations

Visio comes with two mobile navigation types: vertical (Bootstrap's default) and slide left (Visio alternative) menu. We think that this is a feature that must be available for everyone so we tried to keep it as simple as possible without interfering in the default HTML code.

Next, we will show you the two options with the code demonstration:

Vertical (Bootstrap's default)

You can find the live example and code separately in page-mobile-nav-1.html.

<div class="header" id="header"> 
    <!-- NAVBAR -->
    <nav class="navbar navbar-main navbar-shadow" role="navigation">
        <div class="container relative">
            <div class="navbar-header">
                <!-- NAVBAR TOGGLE -->
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                
                <!-- SLIDEBAR TOGGLE -->
                <button type="button" class="slidebar-toggle btn-st-trigger" data-effect="st-effect-1">
                    <span class="sr-only">Toggle slidebar</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                
                <!-- LOGO -->
                <a class="navbar-logo" href="index.<?php echo $pageExt; ?>">
                    <img id="logoOne" src="images/logo/logo-1-a.png" class="hide">
                    <img id="logoTwo" src="images/logo/logo-1-b.png">
                </a>
            </div>

            <div id="navbar-collapse" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
                <ul class="nav navbar-nav navbar-right">    

                    <!-- Search form for small resolutions only -->
                    <li class="hidden-md hidden-lg">
                        <form class="form-mobile-nav" role="form">
                            <div class="input-group input-group-lg">
                                <input type="text" class="form-control" placeholder="Search for things you want ...">
                                <span class="input-group-btn">
                                    <button class="btn btn-base-1" type="button">
                                        <i class="fa fa-search"></i>
                                    </button>
                                </span>
                            </div>
                        </form>
                    </li>

                    <!-- Navbar links come below this comment -->
                    ...
                </ul>
            </div>
        </div>
    </nav>
</div>

Slide left (Visio alternative)

You can find the live example and code separately in page-mobile-nav-2.html.

<div class="header" id="header">
    <!-- NAVBAR -->
    <nav class="navbar navbar-main navbar-shadow" role="navigation" id="slide-nav">
        <div class="container relative">
            <div class="navbar-header">
                <!-- NAVBAR TOGGLE -->
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                
                <!-- SLIDEBAR TOGGLE -->
                <button type="button" class="slidebar-toggle btn-st-trigger" data-effect="st-effect-1">
                    <span class="sr-only">Toggle slidebar</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                
                <!-- LOGO -->
                <a class="navbar-logo" href="index.<?php echo $pageExt; ?>">
                    <img id="logoOne" src="images/logo/logo-1-a.png" class="hide">
                    <img id="logoTwo" src="images/logo/logo-1-b.png">
                </a>
            </div>

            <div id="slidemenu">
                <ul class="nav navbar-nav navbar-right">
                    <!-- Search wrapper for small resolutions only -->
                    <li class="hidden-md hidden-lg">
                        <form class="form-mobile-nav" role="form">
                            <div class="input-group input-group-lg">
                                <input type="text" class="form-control" placeholder="Search for things you want ...">
                                <span class="input-group-btn">
                                    <button class="btn btn-base-1" type="button">
                                        <i class="fa fa-search"></i>
                                    </button>
                                </span>
                            </div>
                        </form>
                    </li>
                    
                    <!-- Navbar links come below this comment -->
                    ...
                </ul>
            </div>
        </div>
    </nav>
</div>

4.6 Footers

You have available many types of footers. You can find the live example and code separately in the pages that have the filename beginning with footer-.

4.7 Helper classes

There are a lot of helpful classes in this theme that can be used in a a large number of scenarios. Below is the table with all the helper classes and what do they do:

Note All helper classes are located in helper.less

Remove/Reset classes

Class	Description
no-margin	Remove any margin of the element on which it is applied.
no-padding	Remove any padding of the element on which it is applied.
no-border	Remove the borders of the element on which it is applied.
no-radius	Remove the rounded corners of elements on which it is applied.

Quick font customization

Class	Description
text-caps	Transform the text to caps lock.
text-capitalize	Capitalize the first letter of each word from the text container.
text-normal	Remove any text transform.
text-right	Align text to right.
text-left	Align text to left.
text-center	Center text.
strong	Make the font weight bold.
strong-400	You have different weight font values, if the font familly has all this options.
strong-500	Light bold font weight.
strong-600	Bold font weight.
strong-700	Strong bold font weight.

Quick border classes

The quick border class color value can be changed from the variables file: variables.less. Edit the border color by setting a new value to the @borderColor variable.

Class	Description
ba	Add a 1px solid border around the element you applied the class on.
bt	Add a 1px solid border on top of the element you applied the class on.
br	Add a 1px solid border on right of the element you applied the class on.
bb	Add a 1px solid border on bottom of the element you applied the class on.
bl	Add a 1px solid border on left of the element you applied the class on.

Quick border radius classes

Easily you can make any element have the corners rounded. Change the default border radius from variables.less.

Class	Description
rounded	Adds the default roundness to the element on which it is applied. Edit its value by setting a new value to @borderRadius-default variable.
rounded-xs	Adds the extra small roundness to the element on which it is applied. Edit its value by setting a new value to @borderRadius-xs variable.
rounded-sm	Adds the small roundness to the element on which it is applied. Edit its value by setting a new value to @borderRadius-sm variable.
rounded-md	Adds the medium roundness to the element on which it is applied. Edit its value by setting a new value to @borderRadius-md variable.
rounded-lg	Adds the large roundness to the element on which it is applied. Edit its value by setting a new value to @borderRadius-lg variable.

Quick width and height classes

Class	Description
width-10 width-20 width-30 ... width-100	Set a width on the element on which it is applied. The width value is in percentage [%] (ex: width-10 -> width: 10%, width-20 -> width: 20% and so on).
min-height-100 min-height-200 min-height-300 ... min-height-600	Set a minimum height on the element on which it is applied. The min-height value is in pixels [px] (ex: min-height-100 -> min-height: 100px, min-height-200 -> min-height: 200px and so on).

Quick padding classes

Class	Description
p-10 p-20 p-30 p-40 p-50	Set the general padding of the element on which it is applied in pixels [px]. For example: p-10 -> padding: 10px; p-20 -> padding: 20px; and so on.
pt-10 pt-15 pt-20 pt-30 pt-40 pt-50	Set the top padding of the element on which it is applied in pixels [px]. For example: pt-10 -> padding-top: 10px; pt-20 -> padding-top: 20px; and so on.
pr-10 pr-15 pr-20 pr-30 pr-40 pr-50	Set the right padding of the element on which it is applied in pixels [px]. For example: pr-10 -> padding-right: 10px; pr-20 -> padding-right: 20px; and so on.
pb-10 pb-15 pb-20 pb-30 pb-40 pb-50	Set the bottom padding of the element on which it is applied in pixels [px]. For example: pb-10 -> padding-bottom: 10px; pb-20 -> padding-bottom: 20px; and so on.
pl-10 pl-15 pl-20 pl-30 pl-40 pl-50	Set the left padding of the element on which it is applied in pixels [px]. For example: pl-10 -> padding-left: 10px; pl-20 -> padding-left: 20px; and so on.

Quick margin classes

Class	Description
m-10 m-20 m-30 m-40 m-50	Set the general margin of the element on which it is applied in pixels [px]. For example: m-10 -> margin: 10px; m-20 -> margin: 20px; and so on.
mt-10 mt-15 mt-20 mt-30 mt-40 mt-50	Set the top margin of the element on which it is applied in pixels [px]. For example: mt-10 -> margin-top: 10px; mt-20 -> margin-top: 20px; and so on.
mr-10 mr-15 mr-20 mr-30 mr-40 mr-50	Set the right margin of the element on which it is applied in pixels [px]. For example: mr-10 -> margin-right: 10px; mr-20 -> margin-right: 20px; and so on.
mb-10 mb-15 mb-20 mb-30 mb-40 mb-50	Set the bottom margin of the element on which it is applied in pixels [px]. For example: mb-10 -> margin-bottom: 10px; mb-20 -> margin-bottom: 20px; and so on.
ml-10 ml-15 ml-20 ml-30 ml-40 ml-50	Set the left margin of the element on which it is applied in pixels [px]. For example: ml-10 -> margin-left: 10px; ml-20 -> margin-left: 20px; and so on.

5. Other

5.1 Free updates: Learn more

With each purchased license for Visio you get free lifetime updates. Access the following link to get yours: Wrapboostrap - Download resender

5.2 Credits

All the plugins are located in the assets folder.

Free plugins

Plugin name	Description	URL
Animate	A cross-browser library of CSS animations. As easy to use as an easy thing.	http://daneden.github.io/animate.css
Bootstrap	Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.	http://getbootstrap.com/
Bootstrap RTL	Bootstrap RTL provides simple yet robust right-to-left capability for Bootstrap 3, by employing new theming feature of it. Simply put its CSS after bootstrap's original CSS, to the pages designed by Bootstrap 3. It works just like an extension on top of the original Bootstrap:	https://github.com/morteza/bootstrap-rtl
Easy Pie Chart	Easy pie chart is a jQuery plugin that uses the canvas element to render simple pie charts for single values. These charts are highly customizable, very easy to implement, scale to the resolution of the display of the client to provide sharp charts even on retina displays, and use requestAnimationFrame for smooth animations on modern devices. http://rendro.github.io/easy-pie-chart/
Fancybox	Modern lightbox for media showing.	http://fancybox.net/
Isotope	Filter & sort magical layouts	http://isotope.metafizzy.co/
Milestone counter	Milestone counter is for animating numbers in certain intervals.
Page scroller	Easy scroll-to-top functionality	http://mattvarone.com/web-design/uitotop-jquery-plugin/
Owl carousel 2	Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.	http://owlcarousel.owlgraphic.com/
Parallax	Parallax.js is a dirt simple parallax scrolling effect inspired by Spotify.com and implemented as a jQuery plugin.	http://pixelcog.github.io/parallax.js/
Time Circles	TimeCircles is a jQuery plugin that provides a nice looking way to either count down towards a certain time, or to count up from a certain time. The goal for TimeCircles is to provide a simple yet dynamic tool that makes it very easy to provide visitors an attractive countdown or timer.	https://github.com/wimbarelds/TimeCircles
Waypoints	Waypoints is the easiest way to trigger a function when you scroll to an element.	http://imakewebthings.com/waypoints/
Wow Animation	Reveal Animations When You Scroll. Easily customize animation settings: style, delay, length, offset, iterations.	http://mynameismatthieu.com/WOW/
Vide	Easy as hell jQuery plugin for video backgrounds.	http://vodkabears.github.io/vide/

Premium plugins

Note Premium plugins need their own license before using it in your project. You can find in the table below the URL where you can purchase any othe the needed plugins.

Plugin name	Description	URL
Cubeportfolio	Cube Portfolio is a jQuery grid plugin that provides powerfull portfolio system, beautiful animated filtering, custom captions and it’s perfect for portfolio projects, horizontal slider, images gallery, team members, blog posts or any other ordered grid content.	http://codecanyon.net/item/cube-portfolio-responsive-jquery-grid-plugin/6372959
Layer Slider	LayerSlider is a premium multi-purpose slider for creating image galleries, content sliders, and mind-blowing slideshows with must-see effects.	http://kreaturamedia.com/layerslider-responsive-jquery-slider-plugin/

Image and other graphic sources

Even though we are using free-comercial licensed images and graphic, below you can find the table with the image sources we used in our template.

All images are used for preview purpose only. If you would like to use any of these images in your project, please make sure that you have a proper license

Image sources

All images contained in this folder are properly licensed for free commercial use. You can find below the sources used to get all images categorized by the folder's name:

• pixabay.com
• gratisography.com
• www.flickr.com
• graphicburger.com
• unplash.com
• firmbee.com
• picjumbo.com

Graphics (icons, patterns, mockups)

• subtlepatterns.com/
• firmbee.com

Note Take a look at the license.txt located in the images folder. You will find there the source and URL for each image we have used in Visio.