The Project - 2.1.0

Multipurpose HTML5 Template

created: 08/05/2015
latest update: 06/04/2018
by: HtmlCoder
email: htmlcoder.me@gmail.com

Thank you for purchasing the Project template.

If you have any questions that are beyond the scope of this documentation, please feel free to contact me http://htmlcoder.me/support I will glad to help you :-)

Version 2.1.0

1. Bootstrap 4 distribution

The version 2.1.0 includes:

2 New Home Pages
New Menu option
New footer option
New Slider option
New Font scheme
New CSS3 patterns
Bootstrap update to version 4.0.0
Several plugin updates
See detailed Changelog

Before the update, please backup all your files and your website.

There are major changes in bootstrap 4 version, you can find the list of the changes in the link that follows https://github.com/twbs/bootstrap/releases/tag/v4.0.0.

Affected Files/Folders:

bootstrap folder
css/skins folder
css/style.css file
js/coming.soon.config.js file
js/custom.js file
js/google.map.config.js file
js/template.js file
images folder (new image placeholders added)
sass folder
added new plugin typed.js to plugins folder
added new plugin slick.js to plugins folder
added new plugin countdown.js to plugins folder
plugins folder
all HTML files

2. Bootstrap 3 distribution

After the release of Bootstrap 4.0.0, we have dropped Bootstrap 3 support. In the download package of version 2.1.0 there is no Bootstrap 3 distribution. If you need BS3 version of the template, please contact us.

Update Bootstrap 3 distribution of version 2.0.5

In order to update Bootstrap 3 distribution of version 2.0.5, please copy the plugins of version 2.1.0 from the html/template/plugins path into your template, e.g. rs-plugin-5, charts etc. If you have any questions please contact support http://htmlcoder.me/support.

Update from version 2.0.5 to 2.1.0

Before the update, please backup all your files and your website.

Below you will find instructions on how you can implement the changes of version 2.1.0 to version 2.0.5, if your website is small (4 ~ 5 pages), please consider to implement your website again from scratch with the new version 2.1.0, maybe it is easier this way. If you need assistance please contact support http://htmlcoder.me/support.

- Update Bootstrap Framework to version 4.0.0

Replace the files of your bootstrap folder with the files of bootstrap version 4.0.0

Change the js reference of Bootstrap into your HTML files

from:

<script type="text/javascript" src="plugins/popper.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

to:

<script src="bootstrap/js/bootstrap.bundle.min.js"></script>

You can remove popper.min.js since we are using the bootstrap.bundle.min.js file that includes popper.min.js.

- Replace all files in your css folder with the new files from version 2.1.0, except your custom.css file

The styling of many plugins has been changed in version 2.1.0 so after the replace of CSS files the styling of many plugins (e.g. owl carousel, text rotators, countdowns etc) will be removed and you will have to implement them again. Below we give instructions for each plugin on how you can implement it again.

- Replace owl carousel with slick carousel

Create a folder inside your plugins folder, and name it slick
Copy the content of html/template/plugins/slick folder from The Project v2.1 into your plugins/slick folder OR download the latest version of slick from its repository into your plugins/slick folder.

Change the markup of your owl carousel, for example:

from

                  <div class="owl-carousel content-slider-with-controls">
                    <!-- first slide start -->
                    <div>
                    ...
                    </div>
                    .....
                  </div>

                  <div class="slick-carousel content-slider-with-controls">
                    <!-- first slide start -->
                    <div>
                    ...
                    </div>
                    .....
                  </div>

you should change the owl-carousel class to slick-carousel

Copy the initializations of slick carousel from the html/template/js/template.js (The Project v2.1) file into your js/template.js file.

In order to find the initializations you should search for the word slick
Add CSS and js references of the slick carousel to the HTML files, that you want to use the slick carousel.

Add the following CSS reference into the head section of your HTML files. The path to slick.css maybe is different on your website, so be sure that you use the correct path.

Add the following js reference before the closing body tag, into your HTML files. The path to slick.js maybe is different on your website, so be sure that you use the correct path.
If you did not replace your style.css with the new version's (The Project v2.1.0) style.css you need to add the new CSS rules, that are related with slick carousel, into your style.css. In order to do that, search for the word .slick inside the new version's style.css file and add all CSS rules into your style.css file.
Next you can remove owlcarousel since we have replace it with slick. In order to remove owl carousel, you need to delete the following:

- Delete owlcarousel2 folder

- Delete the CSS and js references of owl carousel from your html files e.g.

- Delete initializations of owl carousel from your template.js file. In order to find the initializations, you should search for the word owl and delete them. There are multiple initializations of owl carousel so delete all of them.

- Delete the CSS rules that are related with owl carousel from your style.css

- Delete the markup that is related with owl carousel from your HTML files. In order to find the related markup you should search for the word owl inside your HTML files and delete it.

- Replace morphext.js with typed.js

Create a folder inside your plugins folder, and name it typed
Copy the content of html/template/plugins/typed folder from the Project v2.1.0 into your plugins/typed folder OR download the latest version of typed.js from its repository into your plugins/typed folder.
Copy the initialization of typed.js from the html/template/js/template.js (The Project v2.1) file into your js/template.js file.

In order to find the initialization, you should search for the word typed
Add js reference of the typed.js to the HTML files, that you want to use it.

Add the following js reference before the closing body tag, into your HTML files. The path to typed.js maybe is different on your website, so be sure that you use the correct path.
If you did not replace your style.css with the new version's (The Project v2.1.0) style.css you need to add the new CSS rules, that are related with typed.js, into your style.css. In order to do that, search for the word .typed inside the new version's style.css file and add all CSS rules into your style.css file.

In order to use typed.js, you should add the following markup into your HTML files.

<div id="text-rotator-text" class="mt-4 text-rotator-text d-none">
  <p>First rotating sentence</p>
  <p>Second rotating sentence</p>
  <p>Third rotating sentence</p>
  <p>Fourth rotating sentence</p>
  ...
</div>
<!-- Your texts will rotating inside to the following element -->
<h2 id="text-rotator" class="d-inline-block text-rotator" style="min-height: 40px;"></h2>

Next you can remove Morphext since we have added the typed.js that is providing similar feature.

In order to remove Morphext, you need to delete the following:

- Delete morphext folder

- Delete the CSS and js references of morphext from your html files e.g.

- Delete initialization of morphext from your template.js file. In order to find the initialization, you should search for the word morphext and delete it.

- Delete the markup that is related with morphext from your HTML files. In order to find the related markup you should search for the word text-rotator inside your HTML files and delete it.

- Replace jquery.countdown.js with new jquery.countdown.js

Create a folder inside your plugins folder, and name it countdown
Copy the content of html/template/plugins/countdown folder from the Project v2.1.0 into your plugins/countdown folder OR download the latest version of jquery.countdown.js from its repository into your plugins/countdown folder.
Add js reference of the jquery.countdown.js to the HTML files, that you want to use it.

Add the following js reference before the closing body tag, into your HTML files. The path to jquery.countdown.js maybe is different on your website, so be sure that you use the correct path.
Replace your coming.soon.config.js file with the new version's (The Project v2.1.0) html/template/js/coming.soon.config.js file.
If you did not replace your style.css with the new version's (The Project v2.1.0) style.css you need to add the new CSS rules, that are related with jquery.countdown.js, into your style.css. In order to do that, search for the word .countdown inside the new version's style.css file and add all CSS rules into your style.css file.

- Update other plugins

Simply replace the files of the following plugins in order to update them.

Update slider revolution to version 5.4.7.2
Update isotope to version 3.0.5
Update jQuery to version 3.3.1
Update charts.js to version 2.7.2
Update jquery.fullpage.js to version 2.9.6
Update imagesloaded.pkgd.min.js to version 4.1.4

- Update template.js file

template.js file is located into the html/template/js folder.

Add
```
// USE STRICT
"use strict";
                
```
to the beginning of your template.js, so that your file will change from:

to:
this defines that JavaScript code should be executed in "strict mode".
Add
```
var animatedObject;
```
to the function of animations:
Add
```
var countingObject;
```
to the function of countTo:
Change the code of Full Width Image Overlay

from:

to:

- Update google.map.config.js

Simply replace your google.map.config.js file with the new version's (The Project v2.1.0) html/template/js/google.map.config.js file and re-set your location.

- Remove modernizr

In version 2.1.0 we have removed modernizr since we think that it is not needed for the template. In order to remove it do the following:

Delete modernizr.js file.
Delete js reference of modernizr.js from your html files e.g.

Make the following change to your template.js file.

3.1) Change the hover function, from:

to:

3.2) Change the code below of "Show dropdown on click only for mobile devices", from:

to:

3.3) Change the code below of "Full Width Slider with Transparent Header Calculations", from:

to:

3.4) Change the code below of "Mega menu fixed width":

from

                  Modernizr.mq('only all and (min-width: 992px)')

to:

                  $(window).width() > 971

3.5) Change the code below of "Fixed header", from:

to:

3.6) Change animations function, from:

if ($("[data-animation-effect]").length>0) {
  $("[data-animation-effect]").each(function() {
    if(Modernizr.csstransitions) {
      var waypoints = $(this).waypoint(function(direction) {
        animatedObject = $(this.element);
        animatedObject.addClass('animated object-visible ' + animatedObject.attr("data-animation-effect"));
        this.destroy();
      },{
        offset: '90%'
      });
    } else {
      $(this).addClass('object-visible');
    }
  });
};

to:

if ($("[data-animation-effect]").length>0) {
  $("[data-animation-effect]").each(function() {
    var waypoints = $(this).waypoint(function(direction) {
      var animatedObject;
      animatedObject = $(this.element);
      animatedObject.addClass('animated object-visible ' + animatedObject.attr("data-animation-effect"));
      this.destroy();
    },{
      offset: '90%'
    });
  });
};

3.7) Change the "Animated Progress Bars" function, from:

if ($("[data-animate-width]").length>0) {
  $("[data-animate-width]").each(function() {
    if (!Modernizr.csstransitions) {
      $(this).find("span").hide();
    };
    var waypoints = $(this).waypoint(function(direction) {
      $(this.element).animate({width: $(this.element).attr("data-animate-width")}, 800 );
      this.destroy();
      if (!Modernizr.csstransitions) {
        $(this.element).find("span").show('slow');
      };
    },{
      offset: '90%'
    });
  });
};

to:

if ($("[data-animate-width]").length>0) {
  $("[data-animate-width]").each(function() {
    var waypoints = $(this).waypoint(function(direction) {
      $(this.element).animate({width: parseInt($(this.element).attr("data-animate-width")) + '%'}, 800 );
      this.destroy();
    },{
      offset: '90%'
    });
  });
};

3.8) Delete the following code, from "Smooth Scroll":

so that the following line:

if(($(".header.fixed").length>0) && (Modernizr.mq('only all and (min-width: 768px)'))) {

will change to:

if($(".header.fixed").length>0) {

If you did not replace your style.css with the new version's (The Project v2.1.0) style.css you need to change the following CSS rules. Change the following lines, from:

.video-background,
.video-background-banner {
  position: relative;
  overflow: hidden;
}
.video-background video,
.video-background-banner video {
  min-width: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-attachment: scroll;
  min-height: 100%;
  height: auto;
  width: auto;
  top: 0%;
  left: 0%;
  background-size: cover;
  display: none;
  position: absolute;
}
.video.videoautoplay .video-background video,
.video.videoautoplay .video-background-banner video {
  display: block;
}
.video-background-banner .video-background-poster,
.video-background .video-background-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-attachment: scroll;
  background-size: cover;
  z-index: 0;
}
.video.videoautoplay .video-background-banner .video-background-poster,
.video.videoautoplay .video-background .video-background-poster {
  display: none;
  background-image: none !important;
}

to:

.video-background,
.video-background-banner {
  position: relative;
  overflow: hidden;
}
.video-background video,
.video-background-banner video {
  min-width: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-attachment: scroll;
  min-height: 100%;
  height: auto;
  width: auto;
  top: 0%;
  left: 0%;
  background-size: cover;
  position: absolute;
  display: block;
}
.video-background-banner .video-background-poster,
.video-background .video-background-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-attachment: scroll;
  background-size: cover;
  z-index: 0;
}

- Remove jquery.parallax-1.1.3.js

In version 2.1.0 we have removed jquery.parallax-1.1.3.js since you can achieve a similar effect by using vanilla CSS by just adding the following CSS rules into your custom.css file:

.parallax {
  background-position: 0 0;
  background-attachment: fixed;  
}

In order to remove jquery.parallax-1.1.3.js do the following:

Delete jquery.parallax-1.1.3.js file.
Delete js reference of jquery.parallax-1.1.3.js from your html files e.g.
Delete initialization of jquery.parallax-1.1.3.js from your template.js file. In order to find the initialization, you should search for the word parallax and delete it.

Delete the following code:

- Remove jquery.slimscroll.js

Simply delete slimscroll folder.

- Remove jquery.knob.min.js

Delete jquery.knob.min.js file.
Delete js reference of jquery.knob.min.js from your html files e.g.
Delete initialization of jquery.knob.min.js from your template.js file. In order to find the initialization, you should search for the word knob and delete it.

- Remove php contact forms

In version 2.1.0 we have removed php contact forms from the Project template since this template is aiming to focus only to the front-end (design, styling etc) without any additional functionality, so we want to keep the template minimal.

Please notice that after the removal of PHP contact forms, your contact forms will not be functional, so you need to implement this feature on your own with the method of your choice if you want to keep your contact forms functional.

In order to remove the code that is related with PHP contact forms do the following:

Delete template/php folder
Delete jquery.validate.js file
Delete the following js references from your html files e.g.
Delete initializations of jquery.validate.js from your template.js file. In order to find the initializations, you should search for the word validate and delete them.

- Remove fontello fonts

Replace all your fontello icons (icons that starting with icon-* class) with fontawesome icons

for example the
```
<i class="icon-mail"></i>
```
to
```
<i class="fa fa-envelope"></i>
```
you can find all available fontawesome icon in the link that follow https://fontawesome.com/v4.7.0/cheatsheet/
Remove html/template/fonts/fontello folder
Remove the following CSS reference from the head section of your HTML files.
```
<link href="fonts/fontello/css/fontello.css" rel="stylesheet">
```

How to Update Bootstrap Framework?

The Project is a static HTML template so you need to update the Bootstrap framework manually, we highly recommend you check the repository https://github.com/twbs/bootstrap of bootstrap framework for new releases, and update it on your website if there are new releases.

In the template we keep all the files of bootstrap framework in a single folder html/template/bootstrap so that you can update it easily.

In order to update the bootstrap framework you need to download the latest version from its repository https://github.com/twbs/bootstrap and replace the files of html/template/bootstrap folder in the template, with the updated files.

Alternatively, you can add bootstrap framework in your website, via BootstrapCDN this way there is no need to download source files, you can read more on how you can add bootstrap framework via CDN on your website in the link that follows http://getbootstrap.com/docs/4.0/getting-started/introduction/

If you need assistance in order to update Bootstrap framework, contact us.

Plugins

All the files in html/template/plugins folder are third-party code, that are externally maintained by their own authors or contributors and have their own licenses. We are using these plugins into our template in order to support various features (e.g. sliders). The Project template includes 2 Premium plugins (Isotope, Slider Revolution) and several Open Source plugins.

Below, you will find the list of plugins that are included in the Project template, as well instructions on how you can update or remove a plugin from the template.

1) PREMIUM PLUGINS

1.1) Slider Revolution

The Slider Revolution plugin is used for the main sliders (in banner section) of the template. Slider revolution plugin has its own license, the slider-revolution plugin must only be used within the Project template. It is not permitted to extract and use the slider-revolution plugin outside of the template.

In order to use the plugin on a stand-alone basis, you should buy your own license from https://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848.

1.2) Isotope

The Isotope plugin is used for the masonry layout with filters (e.g. html/template/portfolio-grid-1-3-col.html). Isotope plugin has its own license. For more info please visit https://isotope.metafizzy.co/license.html

You can update isotope plugin by downloading the latest version from its repository https://github.com/metafizzy/isotope.

2) OPEN SOURCE PLUGINS

In the list that follows you can find the URLs for the websites or repositories of the open source plugins that we are using in the Project template. We HIGHLY RECOMMEND you check (or watch) the repositories of the third party plugins for updates, bug fixes etc and use the updated versions, in order to keep your website updated. If you need assistance in order to remove or update a plugin, please contact us.

Current Plugins

Name: Bootstrap notify
Usage: Creates "Growl-like" notifications e.g. html/template/features-menus-onhover-no-animations.html
GitHub Repository: https://github.com/mouse0270/bootstrap-notify
License: The MIT License
Name: Charts
Usage: Simple HTML5 Charts using the canvas element e.g. html/template/components-charts.html
GitHub Repository: https://github.com/chartjs/Chart.js
License: The MIT License
Name: Countdown
Usage: A simple and html agnostic date countdown plugin for jQuery e.g. html/template/page-coming-soon.html
GitHub https://github.com/hilios/jQuery.countdown
License: The MIT License
Name: CountTo
Usage: Creates counters e.g. html/template/components-counters.html
GitHub Repository: https://github.com/mhuggins/jquery-countTo
License: The MIT License
Name: Fullpage
Usage: A simple and easy to use library to create fullscreen scrolling websites
e.g. html/template/index-agency.html
GitHub Repository: https://github.com/alvarotrigo/fullPage.js
License: The MIT License
Name: ImagesLoaded
Usage: Detects when images have been loaded, used with Isotope plugin
GitHub Repository: https://github.com/desandro/imagesloaded
License: The MIT License
Name: Jasny Bootstrap
Usage: Used for offcanvas menu e.g. html/template/features-headers-offcanvas-left.html
GitHub Repository: https://github.com/jasny/bootstrap/
License: Apache 2.0 license
Name: Magnific Popup
Usage: Fast, light and responsive lightbox plugin used in images e.g. html/template/components-lightbox.html
GitHub Repository: https://github.com/dimsemenov/Magnific-Popup
License: The MIT License
Name: Pace
Usage: Page loader e.g. html/template/components-page-loaders.html
GitHub Repository: https://github.com/HubSpot/pace
License: The MIT License
Name: Slick
Usage: Used in carousels and content sliders e.g. html/template/components-content-sliders.html
GitHub Repository: https://github.com/kenwheeler/slick
License: The MIT License
Name: Typed
Usage: Used for text rotators e.g. html/template/features-sliders-text-rotator.html
GitHub Repository: https://github.com/mattboldt/typed.js
License: The MIT License
Name: Waypoints
Usage: Waypoints is a library that makes it easy to execute a function
whenever you scroll to an element. It is used for the sticky menu and to on-page
scroll animations.
GitHub Repository: https://github.com/imakewebthings/waypoints
License: The MIT License
Name: jQuery
Usage: Needed in order to run jQuery plugins.
Download: https://jquery.com/download/
License: The MIT License

Removed or replaced plugins

Name: Owl carousel 2
Usage: Used in carousels and content sliders, replaced with slick plugin
(see Update section, in order to replace it)
GitHub Repository: https://github.com/OwlCarousel2/OwlCarousel2
License: The MIT License
Name: jquery.parallax-1.1.3.js
Usage: Used in order to create parallax effect, this plugin is removed because
it is not maintained by its author
(see Update section, in order to remove it)
GitHub Repository: https://github.com/IanLunn/jQuery-Parallax
License: The MIT License
Name: jquery.slimscroll.js
Usage: May used in combine with fullpage.js, we don't need it in the template.
GitHub Repository: https://github.com/rochal/jQuery-slimScroll
(just remove its folder template/html/plugins/slimscroll in order to remove it)
License: The MIT License
Name: jquery.validate.js
Usage: Used in combine with php contact forms, we don't need it in the template
since we don't have php contact forms anymore.
(see Update section, in order to remove it)
GitHub Repository: https://github.com/jquery-validation/jquery-validation
License: The MIT License
Name: jquery.knob.min.js
Usage: Used to create circular progress bars, not needed in the template
GitHub Repository: https://github.com/aterrien/jQuery-Knob
(see Update section, in order to remove it)
License: The MIT License
Name: morphext.js
Usage: Used to create text rotators, replaced with typed.js
(see Update section, in order to replace it)
GitHub Repository: https://github.com/MrSaints/Morphext
License: The MIT License
Name: jquery.countdown.js
Usage: Used to create text countdowns, replaced with countdown.js
(see Update section, in order to replace it)
GitHub Repository: https://github.com/kbwood/countdown
License: The MIT License
Name: Modernizr
Usage: Helps to Cross-browser compatibility, not needed in the template
(see Update section, in order to remove it)
GitHub Repository: https://github.com/Modernizr/Modernizr
Update: If you decide to keep this plugin, in order to update it you can use the link that is given
in the comments of the modernizr.js file and build the updated version.
License: The MIT License

How to Update a plugin?

The Project template is a static HTML template so you have to update or maintain the plugins manually. If you want to keep your website updated we highly recommend you check (or watch) the repositories of the third party plugins for updates, bug fixes, vulnerability fixes etc, and use the updated versions of the plugins on your website. Below we give general instructions on how you can update a separate plugin inside the template.

For example let's update charts.js

First thing to do, is to get the updated version of the plugin from its repository. You can find the repositories for each plugin that is used into the Project template in the plugins list above.
Next you need to find the folder of charts.js inside the template. That's easy because we keep all third party plugins inside a single folder: html/template/plugins so the charts.js file is located inside the html/template/plugins/charts folder.
Next, replace the old files with the updated files that you have got from Charts.js repository

If you need assistance in order to update a plugin, contact us.

How to Remove a plugin?

You can remove a plugin if you don’t want the feature that is providing or if it is not maintained actively by its authors and you want to replace it with an other of your choice. In order to remove a plugin do the following:

General Guide

Delete its folder from html/template/plugins folder.
Delete related HTML markup from the related HTML files.
Delete the css and js references from your HTML files e.g. for slick plugin this is the
```
<link href="plugins/slick/slick.css" rel="stylesheet">
```
css reference and this is the
```
<script src="plugins/slick/slick.min.js"></script>
```
js reference.
Delete its initialisation from the js/template.js file.

Example

For example, let's remove slick carousel from the template

First, we remove its folder from the html/template/plugins folder.
Second, we remove related HTML markup. In order to find related markup we search for slick word inside the HTML file.
Delete, the css and js references from your HTML files. In order to find related references we search for slick word inside the HTML file.
Next, we should find its initialisation in html/template/js/template.js file and remove it. In order to find related initialisation we search for slick word inside the template.js file.

If you need assistance in order to remove a plugin, contact us.

Files Structure

- template (The Project template)
- - bootstrap (All Bootstrap files. We keep all of them in this folder to make updates easily)
- - css (CSS files of the template)
- - - skins (CSS skin files)
- - email_templates (HTML email templates)
- - fonts (External font libraries)
- - - font-awesome
- - images (All the images of the template)
- - js (Javascript files of the template)
- - sass (All the sass files of the Project's template)
- - plugins (All external libs. We keep all of them in this folder to make updates easily.)
- - videos (All video files)

Html Structure

The template is based on Bootstrap 4 v4.0.0 Framework - http://getbootstrap.com/

Bootstrap 4 includes a powerful mobile-first flexbox grid system for building layouts of all shapes and sizes.
It’s based on a 12 column layout and has multiple tiers, one for each media query range.

If you need more information, please visit this site: https://getbootstrap.com/docs/4.0/layout/grid/

CSS Structure

Folder bootstrap

This folder contains all the Bootstrap stylesheets

bootstrap/css/bootstrap.css (Generic styles, responsive grid styles, resets & normalization)

Folder css

This folder contains the stylesheets of the template

css/style.css This stylesheet contains all the style rules of the template, do not modify this file, place all your custom css rules into custom.css file.
css/animations.css This stylesheet contains all the css rules for the animations of the template
css/animate.css This stylesheet contains css rules for the animations of the template, it is imported into the animations.css
css/print-invoice.css This stylesheet contains all the print css rules for invoice
css/typography-default.css This stylesheet contains the default typography scheme of the template, see Typography section
css/typography-scheme-2.css This stylesheet contains an alternative typography scheme, see Typography section
css/print-invoice.css This stylesheet contains all the print css rules for invoice
css/custom.css In this stylesheet you should put your own custom css rules so that you can update the template without issues when new versions will be released

Folder css/skins

This folder contains all the color schemes of the template

css/skins/blue.css (blue skin)
css/skins/brown.css (brown skin)
css/skins/cool_green.css (cool green skin)
css/skins/dark_cyan.css (dark cyan skin)
css/skins/dark_red.css (dark red skin)
css/skins/gold.css (gold skin)
css/skins/gray.css (gray skin)
css/skins/green.css (green skin)
css/skins/light_blue.css (light blue skin)
css/skins/orange.css (orange skin)
css/skins/pink.css (pink skin)
css/skins/purple.css (purple skin)
css/skins/red.css (red skin)
css/skins/vivid_red.css (vivid red skin)

Javascript

Folder js

template.js: The initialization of the elements, libs and features is made by the this file, do not modify this file, place all your custom js code into custom.js file.
custom.js: You should place your custom scripts in this file, so that you can update the template without issues when new versions will be released
google.map.config.js: Configuration of google map in contact page see below
coming.soon.config.js: Configuration of coming soon page see below

Folder plugins

All external js libraries are in the plugins folder. We keep all of them in this folder to make updates easily.

RTL support

In websites with right-to-left text direction, use the following CSS files in the head section of your HTML file:

css/rtl_style.css
css/rtl_typography-default.css

instead of css/style.css and css/typography-default.css.

Every HTML file in the template can be used in websites with right-to-left text direction, by replacing the style.css with rtl_style.css file and typography-default.css with rtl_typography-default.css file, in the head section.

We have prepared an example index-rtl.html page, so that you can use it as a guide. If you face any issues related with RTL version, please report it to support.

LTR, RTL and SASS

The Project template, uses sass mixins smartly (in A1 group, see diagram), in order to create both left-to-right and right-to-left versions from the same core (styling) sass files.

In the following diagram you can see the structure and the logic of the sass files inside the template:

RTL version is not supported with LESS preprocessor in the Project template, if you are planing to build RTL websites please use SASS preprocessor.

Typography

In version 1.3 we have separated the typography CSS rules from the style.css file, in order to easily change and/or add new typography schemes to the template.

In css folder you will find typography schemes files:

typography-default.css: Is the default typography scheme of the Project's template. Used font families and CSS rules are the same with the previous versions of the template.
If you are planing to update your site, in order to keep this font scheme add a reference for this file into the head section of your HTML file.

typography-scheme-2.css: Is added in version 1.3. Used fonts are Lato for the body and Roboto slab for the headings of the template.
In order to use this font scheme add a reference for this file into the head section of your HTML file.

Customization & Styles

Skins

To change the default color scheme, please replace the red.css to the following tag in your head:

<link href="css/skins/light_blue.css" rel="stylesheet">

Layout Style

The template has two different layout modes, Wide and Boxed. The wide one is the default option, if you want to use the Boxed version, add the boxed class to <body> tag as below:

<body class="boxed">

Background Patterns

There are 9 background patterns. Background patterns are available only in boxed layout mode. In order to apply a background pattern all you have to do is to add one of classes pattern-1 ... pattern-9 to body tag.

<body class="pattern-1 boxed">

Fonts

To change the embedded fonts, please take a look in the head part of the website and you will find these tags:

              <link href="//fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic" rel="stylesheet" type="text/css">
              <link href="//fonts.googleapis.com/css?family=Raleway:700,400,300" rel="stylesheet" type="text/css">
              <link href="//fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
              <link href="//fonts.googleapis.com/css?family=PT+Serif" rel="stylesheet" type="text/css">

To change the fonts, visit the http://www.google.com/webfonts choose a font and use the generated code.

Header Top Options

Dark Header Top

To make the background of header-top dark, add the class dark to .header-top.

<div class="header-top dark">

Example: features-headers-classic-dark.html

Colored Header Top

To apply the color of the current color-scheme to the background of header-top, add the class colored to .header-top.

<div class="header-top colored">

Example 1: features-headers-colored.html
Example 2: features-headers-colored-dark.html

Light Header Top

To make the background of header-top light you don't need to add any classes to .header-top.

<div class="header-top">

Example: features-headers-classic.html

Header Options

Fixed Header

By default the positioning of main navigation is set to fixed. To change this behavior delete the fixed class from the header.

              <header class="header fixed clearfix">

Example of static header: features-headers-simple.html

Dark/Light header

By default the header is light add the dark class to .header in order to change it from light to dark version.

<header class="header fixed dark clearfix">

Example of Light Header: features-headers-classic.html
Example of Dark Header: features-headers-classic-dark.html

Transparent header

Add the transparent class to body in order to make the header transparent.

<body class="no-trans transparent-header">

Example of Default/Semi Transparent: features-headers-default.html
Example of Dark/Semi Transparent: features-headers-default-dark.html

Predifined Header Examples

Default/Semi Transparent: features-headers-default.html
Dark/Semi Transparent: features-headers-default-dark.html
Classic Light: features-headers-classic.html
Classic Dark: features-headers-classic-dark.html
Colored Light: features-headers-colored.html
Colored Dark: features-headers-colored-dark.html
Full Width: features-headers-full-width.html
Offcanvas Left: features-headers-offcanvas-left.html
Offcanvas Right: features-headers-offcanvas-right.html
Logo Centered: features-headers-logo-centered.html
Slider Top: features-headers-slider-top.html
Simple Static: features-headers-simple.html

Menu Options

In Order to disable the animations of main menu remove the class animated from the .main-navigation div.

            <div class="main-navigation with-dropdown-buttons">

Example: features-menus-onhover-no-animations.html

In Order to make the submenus open with click event instead of hover add the class onclick to the .main-navigation div.

            <div class="main-navigation onclick with-dropdown-buttons">

Example 1: features-menus-onclick.html
Example 2 (Animations Disabled): features-menus-onclick-no-animations.html

Dark/Light footer

By default the footer is Light add the dark class to #footer in order to change it from light to dark version.

<footer id="footer" class="dark">

Example of Light Footer: features-footers-default.html
Example of Dark Footer: index-corporate-1.html

Page Loaders

We are using pace plugin in order to create amazing page loaders, for more info about pace plugin please visit https://github.com/HubSpot/pace/.

In order to apply a page loader to a page, add the following script to your html file, right before the closing body tag.

              <!-- Pace javascript -->
              <script type="text/javascript" src="plugins/pace/pace.min.js"></script>

Then add one of classes page-loader-1 ... page-loader-6 to body tag.

<body class="page-loader-1">

Take a look to the following examples:

Option 1: components-page-loaders.html
Option 2: components-page-loaders-2.html
Option 3: components-page-loaders-3.html
Option 4: components-page-loaders-4.html
Option 5: components-page-loaders-5.html
Option 6: components-page-loaders-6.html

Icons

We are using fontawesome library in The Project Template checkout all available icons:

Fontawesome

Sliders

1. Home Page Slider

Home page slider is implemented with Slider Revolution. Slider Revolution is an all-purpose slide displaying solution that allows for showing almost any kind of content with highly customizable, transitions, effects and custom animations. Due to its visual oriented interface and countless options, Slider Revolution is suited for beginners and pro’s alike!

More info here https://revolution.themepunch.com/jquery. See the detailed documentation of Slider Revolution plugin here.

Basic HTML markup of Full Screen Slideshow:

              <div class="slider-banner-container">
                <div class="slider-banner-fullscreen">
                  <ul class="slides">
                    <!-- slide 1 -->
                    <li> ... </li>
                    <!-- slide 2 -->
                    <li> ... </li>
                    <!-- slide 3 -->
                    <li> ... </li>
                  </ul>
                </div>
              </div>

Example: features-sliders-fullscreen.html

Basic HTML markup of Full Width Slideshow:

              <div class="slider-banner-container">
                <div class="slider-banner-fullwidth">
                  <ul class="slides">
                    <!-- slide 1 -->
                    <li> ... </li>
                    <!-- slide 2 -->
                    <li> ... </li>
                    <!-- slide 3 -->
                    <li> ... </li>
                  </ul>
                </div>
              </div>

Example: features-sliders-fullwidth.html

Basic HTML markup of Full Width Big Height Slideshow:

              <div class="slider-banner-container">
                <div class="slider-banner-fullwidth-big-height">
                  <ul class="slides">
                    <!-- slide 1 -->
                    <li> ... </li>
                    <!-- slide 2 -->
                    <li> ... </li>
                    <!-- slide 3 -->
                    <li> ... </li>
                  </ul>
                </div>
              </div>

Example: features-sliders-fullwidth-big-height.html

Basic HTML markup of Boxed Width Slideshow:

              <div class="slider-banner-container">
                <div class="slider-banner-boxedwidth">
                  <ul class="slides">
                    <!-- slide 1 -->
                    <li> ... </li>
                    <!-- slide 2 -->
                    <li> ... </li>
                    <!-- slide 3 -->
                    <li> ... </li>
                  </ul>
                </div>
              </div>

Example 1 Light Background: features-sliders-boxedwidth-light.html
Example 2 Dark Background: features-sliders-boxedwidth-dark.html
Example 3 Default Background: features-sliders-boxedwidth-default.html

Slideshow with Video Background:

The video of slideshow is located into the videos folder. The filename of the video is background-video-banner. Just replace this file with your video file.
Example: features-sliders-video-background.html

Text Rotator:

Typed.js plugin is used to create simple text rotators. A JavaScript Typing Animation Library.

Example 1: features-sliders-text-rotator.html
Examples: components-text-rotators.html

2. Content Sliders

In version 2.1.0 we replaced owlcarousel2 with slick carousel, that we think is more flexible and has more features.

Slick Carousel is used to create simple content sliders or carousels, please see components-content-sliders.html

Slick Carousel is touch enabled jQuery plugin that lets you create beautiful responsive carousel sliders. Please check the website of the plugin for more info https://github.com/kenwheeler/slick/

Variations of content slider:

1. Content Slider with Controls (Autoplay off)

              <div class="slick-carousel content-slider-with-controls">
                <!-- first slide start -->
                <div>
                ...
                </div>
                .....
              </div>

2. Content Slider with Controls 2 (Autoplay off)

              <div class="slick-carousel content-slider-with-large-controls">
                <!-- first slide start -->
                <div>
                ...
                </div>
                .....
              </div>

3. Content Slider without controls (Autoplay on)

              <div class="slick-carousel content-slider">
                <!-- first slide start -->
                <div>
                ...
                </div>
                .....
              </div>

4. Content Slider with Controls (Autoplay on)

              <div class="slick-carousel content-slider-with-controls-autoplay">
                <!-- first slide start -->
                <div>
                ...
                </div>
                .....
              </div>

5. Content Slider with Controls 2 (Autoplay On)

              <div class="slick-carousel content-slider-with-large-controls-autoplay">
                <!-- first slide start -->
                <div>
                ...
                </div>
                .....
              </div>

Variations of carousels:

1. Carousel (Autoplay off)

              <div class="slick-carousel carousel">
                <!-- first slide start -->
                <div>
                ...
                </div>
                .....
              </div>

2. Carousel (Autoplay on)

              <div class="slick-carousel carousel-autoplay">
                <!-- first slide start -->
                <div>
                ...
                </div>
                .....
              </div>

3. Clients

              <div class="slick-carousel clients">
                <!-- first slide start -->
                <div>
                ...
                </div>
                .....
              </div>

Isotope Filtering

For the Filtering, The Project is using the Isotope plugin https://github.com/metafizzy/isotope

You can find examples of isotope filtering in the following pages:

Coming Soon Page

Regarding coming soon page only thing you need to do is to set the time at which the countdown expires.
To do this, please open "js/coming.soon.config.js" file and change the date in the this line:

Social Media

Social Media HTML Markup

              <ul class="social-links">
                <li><a target="_blank" href="http://www.facebook.com"><i class="fa fa-facebook"></i></a></li>
                <li><a target="_blank" href="http://www.twitter.com"><i class="fa fa-twitter"></i></a></li>
                <li><a target="_blank" href="http://plus.google.com"><i class="fa fa-google-plus"></i></a></li>
                <li><a target="_blank" href="http://www.skype.com"><i class="fa fa-skype"></i></a></li>
                <li><a target="_blank" href="http://www.instagram.com"><i class="fa fa-instagram"></i></a></li>
                <li><a target="_blank" href="http://www.linkedin.com"><i class="fa fa-linkedin"></i></a></li>
                <li><a target="_blank" href="http://www.pinterest.com"><i class="fa fa-pinterest"></i></a></li>
                <li><a target="_blank" href="http://www.flickr.com"><i class="fa fa-flickr"></i></a></li>
                <li><a target="_blank" href="https://foursquare.com"><i class="fa fa-foursquare"></i></a></li>
                <li><a target="_blank" href="https://soundcloud.com"><i class="fa fa-soundcloud"></i></a></li>
                <li><a target="_blank" href="https://www.tumblr.com"><i class="fa fa-tumblr"></i></a></li>
                <li><a target="_blank" href="https://www.vimeo.com"><i class="fa fa-vimeo-square"></i></a></li>
                <li><a target="_blank" href="https://www.behance.net"><i class="fa fa-behance"></i></a></li>
                <li><a target="_blank" href="http://www.reddit.com"><i class="fa fa-reddit"></i></a></li>
                <li><a target="_blank" href="http://www.drupal.org"><i class="fa fa-drupal"></i></a></li>
                <li><a target="_blank" href="#"><i class="fa fa-share-alt"></i></a></li>
                <li><a target="_blank" href="https://vine.co"><i class="fa fa-vine"></i></a></li>
              </ul>

Colored social icons

              <ul class="social-links colored">
                <li class="facebook"><a target="_blank" href="http://www.facebook.com"><i class="fa fa-facebook"></i></a></li>
                <li class="twitter"><a target="_blank" href="http://www.twitter.com"><i class="fa fa-twitter"></i></a></li>
                <li class="googleplus"><a target="_blank" href="http://plus.google.com"><i class="fa fa-google-plus"></i></a></li>
                <li class="skype"><a target="_blank" href="http://www.skype.com"><i class="fa fa-skype"></i></a></li>
                <li class="instagram"><a target="_blank" href="http://www.instagram.com"><i class="fa fa-instagram"></i></a></li>
                <li class="linkedin"><a target="_blank" href="http://www.linkedin.com"><i class="fa fa-linkedin"></i></a></li>
                <li class="pinterest"><a target="_blank" href="http://www.pinterest.com"><i class="fa fa-pinterest"></i></a></li>
                <li class="flickr"><a target="_blank" href="http://www.flickr.com"><i class="fa fa-flickr"></i></a></li>
                <li class="youtube"><a target="_blank" href="https://www.youtube.com"><i class="fa fa-youtube"></i></a></li>
                <li class="foursquare"><a target="_blank" href="https://foursquare.com"><i class="fa fa-foursquare"></i></a></li>
                <li class="soundcloud"><a target="_blank" href="https://soundcloud.com"><i class="fa fa-soundcloud"></i></a></li>
                <li class="tumblr"><a target="_blank" href="https://www.tumblr.com"><i class="fa fa-tumblr"></i></a></li>
                <li class="vimeo"><a target="_blank" href="https://www.vimeo.com"><i class="fa fa-vimeo-square"></i></a></li>
                <li class="dribbble"><a target="_blank" href="https://dribbble.com/"><i class="fa fa-dribbble"></i></a></li>
                <li class="behance"><a target="_blank" href="https://www.behance.net/"><i class="fa fa-behance"></i></a></li>
                <li class="vine"><a target="_blank" href="https://vine.co"><i class="fa fa-vine"></i></a></li>
                <li class="stumbleupon"><a target="_blank" href="https://www.stumbleupon.com/"><i class="fa fa-stumbleupon"></i></a></li>
              </ul>

Large icons

Add the class large to <ul> tag as below:

            <ul class="social-links large">
              ...
            </ul>

Square Icons

Add the class square to <ul> tag as below:

            <ul class="social-links square">
              ...
            </ul>

Circural icons

Add the class circle to <ul> tag as below:

            <ul class="social-links circle">
              ...
            </ul>

Dark icons

Add the class dark to <ul> tag as below:

            <ul class="social-links dark">
              ...
            </ul>

Default icons

Add the class default to <ul> tag as below:

            <ul class="social-links default">
              ...
            </ul>

Social Buttons

              <a target="_blank" href="https://www.twitter.com" class="btn btn-animated twitter">Twitter<i class="pl-10 fa fa-twitter"></i></a>
              <a target="_blank" href="https://www.facebook.com" class="btn btn-animated facebook">Facebook<i class="pl-10 fa fa-facebook-square"></i></a>
              <a target="_blank" href="https://plus.google.com" class="btn btn-animated googleplus">Google+<i class="pl-10 fa fa-google-plus"></i></a>
              <a target="_blank" href="https://www.skype.com" class="btn btn-animated skype">Skype<i class="pl-10 fa fa-skype"></i></a>
              <a target="_blank" href="https://www.instagram.com" class="btn btn-animated instagram">Instagram<i class="pl-10 fa fa-instagram"></i></a>
              <a target="_blank" href="https://www.linkedin.com" class="btn btn-animated linkedin">Linkedin<i class="pl-10 fa fa-linkedin"></i></a>
              <a target="_blank" href="http://www.pinterest.com" class="btn btn-animated pinterest">Pinterest<i class="fa fa-pinterest"></i></a>
              <a target="_blank" href="http://www.flickr.com" class="btn btn-animated flickr">Flickr<i class="fa fa-flickr"></i></a>
              <a target="_blank" href="https://foursquare.com" class="btn btn-animated foursquare">Foursquare<i class="fa fa-foursquare"></i></a>
              <a target="_blank" href="https://soundcloud.com" class="btn btn-animated soundcloud">Soundcloud<i class="fa fa-soundcloud"></i></a>
              <a target="_blank" href="https://www.tumblr.com" class="btn btn-animated tumblr">Tumblr<i class="fa fa-tumblr-square"></i></a>
              <a target="_blank" href="https://www.vimeo.com" class="btn btn-animated vimeo">Vimeo<i class="fa fa-vimeo-square"></i></a>
              <a target="_blank" href="https://www.youtube.com" class="btn btn-animated youtube">Youtube<i class="fa fa-youtube"></i></a>
              <a target="_blank" href="https://dribbble.com/" class="btn btn-animated dribbble">Dribbble<i class="fa fa-dribbble"></i></a>
              <a target="_blank" href="https://www.behance.net/" class="btn btn-animated behance">Behance<i class="fa fa-behance"></i></a>
              <a target="_blank" href="https://vine.co" class="btn btn-animated vine">Vine<i class="fa fa-vine"></i></a>
              <a target="_blank" href="https://www.stumbleupon.com/" class="btn btn-animated stumbleupon">Stumbleupon<i class="fa fa-stumbleupon"></i></a>
              <a target="_blank" href="https://www.xing.com/" class="btn btn-animated xing">Xing<i class="fa fa-xing"></i></a>

See more examples of social icons into components-social-icons.html page.

Google Maps

The Project comes with a great Google maps integration. Making it easy for your visitor to locate your business on the map plays an ever-growing role nowadays.

In order to setup the Google maps:

Get your API key from https://developers.google.com/maps/documentation/javascript/get-api-key.
Set your API key inside the HTML file that you are using the google maps:
To set the location of your business change the default Latitude, Longitude and Zoom of the Google map, please replace the following values inside js/google.map.config.js file:

Animations Effect

animate.css https://github.com/daneden/animate.css

You can add some Animations / Transitions to the elements which fires when an element scrolls into view. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

Usage:

              <div class="object-non-visible" data-animation-effect="fadeInLeft" data-effect-delay="0">
              ...
            </div>

The Attribute data-effect-delay is Optional and is set in Miliseconds.

The animation can be set to:

bounce
flash
pulse
rubberBand
shake
swing
tada
wobble
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
flip
flipInX
flipInY
lightSpeedIn
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
slideInUp
slideInDown
slideInLeft
slideInRight
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
hinge
rollIn

The Project animations

fadeInUpSmall
fadeInDownSmall
fadeInLeftSmall
fadeInRightSmall

Credits

Demo images

Unsplash by - https://unsplash.com/ - License
Gratisography by Ryan McGuire - https://gratisography.com/ - License
Jeshoots by Jan Vasek - https://jeshoots.com/ - License
Pexels by Ingo Joseph, Bruno Joseph and Tizian Lengemann - https://www.pexels.com/ - License
Pixabay by Hans Braxmeier & Simon Steinberger GbR - http://pixabay.com/ - License
Lorempixel by Felix Holler - http://lorempixel.com/ - License
Nick Nguyen - https://www.flickr.com/photos/nicktakespics/
Christian Kadluba - https://www.flickr.com/photos/pokpok/
Ruocaled - https://www.flickr.com/photos/ruocaled/
Martin Cathrae - https://www.flickr.com/photos/suckamc/
Robin - https://www.flickr.com/photos/fotoosvanrobin/
Pink Sherbet Photography - https://www.flickr.com/photos/pinksherbet/
Fotolia - http://eu.fotolia.com/
Perfect Pixels - http://p-px.com/

The images used on the live demo website are for demonstration purposes only and are not included in the downloaded files of the template.

Demo Videos

Life of Vids by Leeroy - http://www.lifeofvids.com/ - License
Beachfront B-Roll - http://www.beachfrontbroll.com/

The videos used on the live demo website are for demonstration purposes only and are not included in the downloaded files of the template.

Fonts

Font Awesome by Dave Gandy - https://fontawesome.com/v4.7.0/ - License
Google Fonts - http://www.google.com/fonts

Resources

Bootstrap Framework by @mdo and @fat - http://getbootstrap.com/ - License
Jasny Bootstrap by Arnold Daniels - https://github.com/jasny/bootstrap/ - License
Bootstrap Notify by Mouse0270 aka Robert McIntosh - https://github.com/mouse0270/bootstrap-growl - License
jQuery - https://jquery.org/ - License
Chart.js - by Chart.js https://github.com/chartjs/Chart.js - License
Typedjs - by Matt Boldt - https://github.com/mattboldt/typed.js - License
jQuery Countdown to by Edson Hilios - https://github.com/hilios/jQuery.countdown - License
jQuery Count to by Matt Huggins - https://github.com/mhuggins/jquery-countTo - License
jQuery Magnific popup by Dmitry Semenov - https://github.com/dimsemenov/Magnific-Popup - License
Slider Revolution by Themepunch - https://revolution.themepunch.com/jquery
Slick carousel by Slick Carousel - https://github.com/kenwheeler/slick/ - License
Waypoints by Caleb Troughton - https://github.com/imakewebthings/waypoints - License
Pace by Hubspot - https://github.com/HubSpot/pace/ - License
Fullpage by Alvaro Trigo - https://github.com/alvarotrigo/fullPage.js - License
Imagesloaded by David DeSandro - https://github.com/desandro/imagesloaded - License
Animate CSS by Daniel Eden - https://github.com/daneden/animate.css - License
Isotope Jquery plugin by metafizzy.co - https://github.com/metafizzy/isotope - License A license to use the included Isotope Library is provided, as part of our Developer License scheme for the plugin. As clarified in the license scheme possessed by htmlcoder.me: "Users do not need to purchase their own commercial license for the Software, so long as they are not acting as Developers, developing their own commercial Applications with the Software."

License

License of The Project (HTML files, css folder (except animate.css file), css/skins folder, js folder etc).

You can’t use the template in any application allowing an end user to customise a digital product to their specific needs, such as an “on demand”, “made to order” or “build it yourself” application.

Third party code, that contained into plugins folder or into other folders, is licensed under its own license.

End of Documentation

Thank you very much for purchasing the Project template and for reading this documentation :-)

The Project - 2.1.0

Multipurpose HTML5 Template

Version 2.1.0

1. Bootstrap 4 distribution

The version 2.1.0 includes:

Affected Files/Folders:

2. Bootstrap 3 distribution

Update Bootstrap 3 distribution of version 2.0.5

Update from version 2.0.5 to 2.1.0

- Update Bootstrap Framework to version 4.0.0

- Replace all files in your css folder with the new files from version 2.1.0, except your custom.css file

- Replace owl carousel with slick carousel

- Replace morphext.js with typed.js

- Replace jquery.countdown.js with new jquery.countdown.js

- Update other plugins

- Update template.js file

- Update google.map.config.js

- Remove modernizr

- Remove jquery.parallax-1.1.3.js

- Remove jquery.slimscroll.js

- Remove jquery.knob.min.js

- Remove php contact forms

- Remove fontello fonts

How to Update Bootstrap Framework?

Plugins

1) PREMIUM PLUGINS

1.1) Slider Revolution

1.2) Isotope

2) OPEN SOURCE PLUGINS

Current Plugins

Removed or replaced plugins

How to Update a plugin?

How to Remove a plugin?

General Guide

Example

Files Structure

Html Structure

CSS Structure

Folder bootstrap

Folder css

Folder css/skins

Javascript

Folder js

Folder plugins

RTL support

LTR, RTL and SASS

Typography

Customization & Styles

Skins

Layout Style

Background Patterns

Fonts

Header Top Options

Dark Header Top

Colored Header Top

Light Header Top

Header Options

Fixed Header

Dark/Light header

Transparent header

Predifined Header Examples

Menu Options

Dark/Light footer

Page Loaders

Icons

Sliders

1. Home Page Slider

Basic HTML markup of Full Screen Slideshow:

Basic HTML markup of Full Width Slideshow:

Basic HTML markup of Full Width Big Height Slideshow:

Basic HTML markup of Boxed Width Slideshow:

Slideshow with Video Background:

Text Rotator:

2. Content Sliders

Variations of content slider:

Variations of carousels:

Lightbox

Isotope Filtering

Coming Soon Page

Social Media