Pasific Documentation Pasific Multipurpose HTML5 Template Documentation - Version 1.0.2 Latest Updated: 2 April 2016

1. Getting Started

Thank you for purchasing our item. Hope you will like it and give five stars rate from your download page. Before you get started we highly encourage you to get familiar with this documentation file. Spending half an hour reading the manual may save lot's of your time and avoid questions with obvious answers. This template has multipages and onepages layout with various style for header. There are 17 onepages and multipages available to use. For onepage we use prefix 'op-' on each filename and prefix 'mp-' for multipage. You can found all in purchasing folder.

We put all supporting files in folder "assets", such as images, javascipt, icon, font, etc. Please do not rename or remove all files and folders there. If you want to change the default color, you can do that from css color skin that stored in folder "css/color". You must have good skill in html and css to customize this template.

2. General Classes(setting.css)

Please read this section carefully. This section is very important to undrstanding about this template, so you can editing, updating, or creating new page use this template easily. You can create unlimited pages that you want just in an hour. Below the general settings of this template that you can apply to all elements in your pages.

2.1 Margin

We provide margin style for top, right, bottom and left. You just insert the margin classes into your element to give the margin effect. List of margin classes:
mt = Margin Top, for example: mt10: it means margin-top with value 10 pixel.
mr = Margin Right, for example: mr10: it means margin-right with value 10 pixel.
mb = Margin Bottom, for example: mb10: it means margin-bottom with value 10 pixel.
ml = Margin Left, for example: ml10: it means margin-left with value 10 pixel.

I use a multiple of 5 in determining the value of each padding. Each padding(top, right, bottom and left) has minimal value 5 pixel and maximal value 100 pixel.
Examples:

Element No Margin
<div> <img src="assets/img/apple-touch-icon-114x114.png" class=""> </div>	Result -->
Element With Margin
<div> <img src="assets/img/apple-touch-icon-114x114.png" class="mt10 mr10 mb10 ml10"> </div>	Result -->
Element With Margin
<div> <img src="assets/img/apple-touch-icon-114x114.png" class="mt50 mr50 mb50 ml50"> </div>	Result -->

2.2 Padding

We provide margin style for top, right, bottom and left. You just insert the margin classes into your element to give the margin effect. List of margin classes:
pt = Padding Top, for example: pt10: it means margin-top with value 10 pixel.
pr = Padding Right, for example: pr10: it means margin-right with value 10 pixel.
pb = Padding Bottom, for example: pb10: it means margin-bottom with value 10 pixel.
pl = Padding Left, for example: pl10: it means margin-left with value 10 pixel.

I use a multiple of 5 in determining the value of each margin. Each margin(top, right, bottom and left) has minimal value 5 pixel and maximal value 100 pixel.
Examples:

Element No Padding
<div class=""> <img src="assets/img/apple-touch-icon-114x114.png" > </div>	Result -->
Element With Padding
<div class="pt10 pr10 pb10 pl10"> <img src="assets/img/apple-touch-icon-114x114.png" > </div>	Result -->
Element With Padding
<div class="pt50 pr50 pb50 pl50"> <img src="assets/img/apple-touch-icon-114x114.png" > </div>	Result -->

2.3 Transparency / Alpha Opacity

We also provide alpha opacity classes that you can apply to all element in your website. We set the name of alpha opacity with prefix "alpha".
There are 9 classes for alpha opacity that sorted based on the level of transparency. Below the list of the alpha opacity classes:
alpha2: it means the element with this value will have transparency value 0.2.
alpha3: it means the element with this value will have transparency value 0.3.
alpha4: it means the element with this value will have transparency value 0.4.
alpha5: it means the element with this value will have transparency value 0.5.
alpha6: it means the element with this value will have transparency value 0.6.
alpha7: it means the element with this value will have transparency value 0.7.
alpha8: it means the element with this value will have transparency value 0.8.
alpha9: it means the element with this value will have transparency value 0.9.
alpha10: it means the element with this value will have transparency value 1 or No Transparent.

No Transparent
<div> <img src="assets/img/apple-touch-icon-114x114.png" class="alpha10"> </div>	Result -->
Transparent Level 5
<div> <img src="assets/img/apple-touch-icon-114x114.png" class="alpha5"> </div>	Result -->
Transparent Level 2
<div> <img src="assets/img/apple-touch-icon-114x114.png" class="alpha2"> </div>	Result -->

<h3 class="color-red"> Pasific </h3>

<h3 class="color-pink"> Pasific </h3>

<h3 class="color-orange"> Pasific </h3>

<h3 class="color-purple"> Pasific </h3>

<h3 class="color-blue"> Pasific </h3>

<h3 class="color-cyan"> Pasific </h3>

<h3 class="color-green"> Pasific </h3>

<h3 class="color-yellow"> Pasific </h3>

<h3 class="color-dark"> Pasific </h3>

<h3 class="color-gray"> Pasific </h3>

<h3 class="color-light"> Pasific </h3>

<h3 class="color-black"> Pasific </h3>

<h3 class="color-pasific"> Pasific </h3>

<h3 class="color-primary"> Pasific </h3>

<h3 class="color-success"> Pasific </h3>

<h3 class="color-info"> Pasific </h3>

<h3 class="color-warning"> Pasific </h3>

<h3 class="color-danger"> Pasific </h3>

<div class="bg-red">
<h3 class="color-light"> Pasific </h3>
</div>

<div class="bg-pink">
<h3 class="color-light"> Pasific </h3>
</div>

<div class="bg-orange">
<h3 class="color-light"> Pasific </h3>
</div>

<div class="bg-purple">
<h3 class="color-light"> Pasific </h3>
</div>

<div class="bg-blue">
<h3 class="color-light"> Pasific </h3>
</div>

<div class="bg-cyan">
<h3 class="color-light"> Pasific </h3>
</div>

<div class="bg-green">
<h3 class="color-light"> Pasific </h3>
</div>

<div class="bg-yellow">
<h3 class="color-light"> Pasific </h3>
</div>

<div class="bg-dark">
<h3 class="color-light"> Pasific </h3>
</div>

<div class="bg-gray">
<h3 class="color-dark"> Pasific </h3>
</div>

<div class="bg-light">
<h3 class="color-red"> Pasific </h3>
</div>

<div class="bg-black">
<h3 class="color-light"> Pasific </h3>
</div>

<div class="bg-pasific">
<h3 class="color-light"> Pasific </h3>
</div>

<div class="bg-primary">
<h3 class="color-light"> Pasific </h3>
</div>

<div class="bg-success">
<h3 class="color-light"> Pasific </h3>
</div>

<div class="bg-info">
<h3 class="color-light"> Pasific </h3>
</div>

<div class="bg-warning">
<h3 class="color-light"> Pasific </h3>
</div>

<div class="bg-danger">
<h3 class="color-light"> Pasific </h3>
</div>

<div class="bg-grad-blue">
<h3 class="color-light"> Pasific </h3>
</div>

<div class="bg-grad-violet">
<h3 class="color-light"> Pasific </h3>
</div>

<div class="bg-grad-blood-mary">
<h3 class="color-light"> Pasific </h3>
</div>

<div class="bg-grad-bora">
<h3 class="color-light"> Pasific </h3>
</div>

<div class="bg-grad-mojito">
<h3 class="color-light"> Pasific </h3>
</div>

<div class="bg-grad-orange">
<h3 class="color-light"> Pasific </h3>
</div>

<div class="bg-grad-purple">
<h3 class="color-grad-purple"> Pasific </h3>
</div>

<div class="bg-grad-stellar">
<h3 class="color-light"> Pasific </h3>
</div>

<div class="bg-grad-day-tripper">
<h3 class="color-light"> Pasific </h3>
</div>

3. Navigation

There are three navigation styles that you can use for now, they are: fullwidth navigation, center navigation, and sticky navigation. For onepage, the navigation only in same page, so we use smooth scrolling and scrollspy to do that. For multipage, we use dropdown menu with megamenu style.

Fullwidth Navigation

Fullwidht navigation is navigation that use width 100% of screen size, if you use large display, you can see the different between fullwidth and center navigation.

<nav class="navbar navbar-custom megamenu navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    .. navigation code here ..
  </div>
</nav>

Center Navigation

Center navigation is navigation that use width 1170px of screen size.

<nav class="navbar navbar-custom megamenu navbar-fixed-top" role="navigation">
  <div class="container">
    .. navigation code here ..
  </div>
</nav>

Sticky Navigation

Sticky Navigation will stop at the top of the page when page scrolled. You can use same code for the navigation, just insert javascript custom code at the bottom of the page before close body tag to actived the sticky menu.

<nav class="navbar navbar-custom megamenu navbar-fixed-top" role="navigation" id="stckynav" >
  <div class="container">
    .. navigation code here ..
  </div>
</nav>

<script>
  $(function(){ $("#stickynav).sticky();})
</script>

4. Change Logo

It's easy to change or replace the logo with your company logo.

<a class="navbar-brand page-scroll" href="#page-top">
  <img src="assets/img/logo/YourLogoName.png">
</a>

5. Animations

Paisifis has many CSS3 animation that you can apply to all elements that you want. CSS3 Animation by: https://daneden.github.io/animate.css/.
See all animation here: Shortcode Animation. It's easy to apply the animation to an element.

<div>
<h3 class="animated infinite" data-animation="pulse"> Pasific </h3>
</div>

<div>
<h3 class="animated infinite" data-animation="swing"> Pasific </h3>
</div>

<div>
<h3 class="animated infinite" data-animation="rubberBand"> Pasific </h3>
</div>

And many more. Check all animations here: http://mybootheme.com/demo/shortcode-animations.html

6. OWL - Carousel

This template support owl carousel to make smooth scrolling effect to all website elements, such as: content box, testimonial, client logo, etc. And it's easy to apply. You can set how many elements that you want to slide, from one, two, three, until six. For more detail about this plugin, you can visit original author from here: http://owlgraphic.com/owlcarousel/index.html

Owl Carousel with one item to slide

<div id="owlSectionOneItem">
  <div> .. Item One .. </div>
  <div> .. Item Two .. </div>
  <div> .. Item Three .. </div>
  <div> .. Item Four .. </div>
</div>

Owl Carousel with two item to slide

<div id="owlSectionTwoItem">
  <div> .. Item One .. </div>
  <div> .. Item Two .. </div>
  <div> .. Item Three .. </div>
  <div> .. Item Four .. </div>
</div>

Owl Carousel with three item to slide

<div id="owlSectionThreeItem">
  <div> .. Item One .. </div>
  <div> .. Item Two .. </div>
  <div> .. Item Three .. </div>
  <div> .. Item Four .. </div>
</div>

Owl Carousel with four item to slide

<div id="owlSectionFourItem">
  <div> .. Item One .. </div>
  <div> .. Item Two .. </div>
  <div> .. Item Three .. </div>
  <div> .. Item Four .. </div>
</div>

Owl Carousel with five item to slide

<div id="owlSectionFiveItem">
  <div> .. Item One .. </div>
  <div> .. Item Two .. </div>
  <div> .. Item Three .. </div>
  <div> .. Item Four .. </div>
</div>

Owl Carousel with six item to slide

<div id="owlSectionSixItem">
  <div> .. Item One .. </div>
  <div> .. Item Two .. </div>
  <div> .. Item Three .. </div>
  <div> .. Item Four .. </div>
</div>

7. HTML5 BG Video

This template support HTML5 Background Video. Put your video file in "assets/video/yourvideoname.mp4". Please provide video in mp4, ogg, and webm format.

Custom JS for HTML5 Background Video(assets/js/main/jquery.backgroundvideo.js)

$(document).ready(function() {
    var videobackground = new $.backgroundVideo($('#video-container'), {
      "align": "centerXY",
      "width": 1280,
      "height": 720,
      "path": "assets/video/",
      "filename": "yourvidename",
      "types": ["mp4","ogg",webm"],
      "preload": true,
      "autoplay": true,
      "loop": true
    });
  });

8. Other Customizations

For other customizations like Text changing, you can simply do it in any code editing software. Just replace the current text with your text. Then Save it. That's all

9. Need Help

If you have any issues customizing, or if you need any help regarding this template, or to just Say Hi, Please contact me on support@myboodesign.com

10. Credits

1. Twitter Bootstrap, http://getbootstrap.com/
2. Magnific Popup, http://dimsemenov.com/plugins/magnific-popup/
3. OwlCarousel, http://owlgraphic.com/owlcarousel/index.html
4. CSS3 Animation, https://daneden.github.io/animate.css/
5. Hover Effect, http://ianlunn.github.io/Hover/
6. Range Slider, http://ionden.com/a/plugins/ion.rangeSlider/en.html
7. Simple Text Rotator, https://github.com/peachananr/simple-text-rotator
8. JQuery Typed, https://github.com/mattboldt/typed.js/
9. JQuery Appear, https://github.com/morr/jquery.appear
10. Isotope, isotope.metafizzy.co
11. JQuery CounTo, https://github.com/mhuggins/jquery-countTo
12. Modernizr, https://modernizr.com/
13. Parallax JS, http://pixelcog.github.io/parallax.js/
14. Bootstrap Progress Bar, http://www.minddust.com/project/bootstrap-progressbar/demo/bootstrap-3-3-4/
15. JQuery Circle Progress, http://kottenator.github.io/jquery-circle-progress/
16. Particles JS, http://vincentgarreau.com/particles.js
17. Jquery Youtube Player https://github.com/pupunzi/jquery.mb.YTPlayer

Thank you :)