# "OmahPsd Template"

DOCUMENTATION BY "OMAHPSD" V1.0

## MOBAPP

Created: 12/11/2014

By: omahpsd.com

Email: omahpsd@gmail.com

Thank you for donwload my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

## Table of Contents

- Getting Started

- HTML/1200 Grid Structure - Basic HTML information, using the 1200.gs Grid System

- Bootstrap LESS - Style Using Bootstrap LESS

- JavaScript/jQuery Plugins - Site plugin information

- Sources and Credits

### A) Getting Started - top

Since this is an HTML/CSS template, you can actually run it off your computer with little setup on the server. When you are ready to put the site on your server, upload all the files in the theme folder to your server.

### B) HTML/1200 Grid Structure - top

This theme is a fixed layout with up to 12 columns. All of the information within the main content area is nested within a div with an class of "wrapper".The general template structure is the same throughout the template as it uses the 12 column 1200.gs Bootstrap framework.

#### 1200.gs Bootstrap framework

The general concept behind the 12 column framework is that all the columns (labeled span'x') need to add up to 12 when using the 12 column version of their framework.

The Bootstrap site has a nice demo and you can also see it on the columns-all.html file included with this theme. The best way I would suggest to become familiar with this framework is to simply edit what I have already set up.

Bootstrap has a great overview of the Grid System framework you may want to check out.

### C) Style Using Bootstrap Less - top

At first glance, the CSS may look confusing, because CSS is create using LESS let me explain each below:

- style.css - Our's custom css and custom Bootstrap CSS Framework, do not edit this file.

- bootstrap.css - The Bootstrap Grid and CSS Framework, do not edit this file.

if you want to custom style you can custom file style.less on folder with name less, if you confiuse how to custem the LESS file you can see the how to use LESS on http://lesscss.org

#### Handy CSS Classes:

.clearfix - A quick way to clear floated HTML elements

.img-thumbnail - Add a soft border and padding image edge

.img-circle - Add a full rounded image edge with CSS3 rounded borders.

.img-rounded - Add a soft rounded image edge with CSS3 rounded borders.

.pull-left - Float item to left

.pull-right - Float item to right

.text-center - Center text

.text-left - Left text

.text-right - Right text

etc you can see all on bootstrap documentation

### D) JavaScript/jQuery Plugins - top

    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="component/jquery.inview/jquery.inview.min.js"></script>
    <script src="component/flexslider/jquery.flexslider-min.js"></script>
    <script src="component/ekkolightbox/ekko-lightbox.js"></script>
    <script src="component/jqBootstrapValidation-1.3.7/jqBootstrapValidation-1.3.7.min.js"></script>

#### Bootstrap jquery plugin

See all bootstrap jquery plugin setup on bootstrap documentation

#### jquery plugin inview

the content animated view effect is powered by "jquery inview" and css animmate library "http://daneden.me/animate"

jquery inview reference: inview

    //css
    .delay1{

    -webkit-animation-delay: 100ms;
    -moz-animation-delay: 100ms;
    -ms-animation-delay: 100ms;
    -o-animation-delay: 100ms;

    }
    .delay2{

    -webkit-animation-delay: 200ms;
    -moz-animation-delay: 200ms;
    -ms-animation-delay: 200ms;
    -o-animation-delay: 200ms;

    }
    .delay3{

    -webkit-animation-delay: 300ms;
    -moz-animation-delay: 300ms;
    -ms-animation-delay: 300ms;
    -o-animation-delay: 300ms;

    }
    .delay4{

    -webkit-animation-delay: 400ms;
    -moz-animation-delay: 400ms;
    -ms-animation-delay: 400ms;
    -o-animation-delay: 400ms;

    }
    .delay5{

    -webkit-animation-delay: 500ms;
    -moz-animation-delay: 500ms;
    -ms-animation-delay: 500ms;
    -o-animation-delay: 500ms;

    }
    .delay6{

    -webkit-animation-delay: 600ms;
    -moz-animation-delay: 600ms;
    -ms-animation-delay: 600ms;
    -o-animation-delay: 600ms;

    }
    .delay7{

    -webkit-animation-delay: 700ms;
    -moz-animation-delay: 700ms;
    -ms-animation-delay: 700ms;
    -o-animation-delay: 700ms;

    }
    .delay8{

    -webkit-animation-delay: 800ms;
    -moz-animation-delay: 800ms;
    -ms-animation-delay: 800ms;
    -o-animation-delay: 800ms;

    }
    .delay9{

    -webkit-animation-delay: 900ms;
    -moz-animation-delay: 900ms;
    -ms-animation-delay: 900ms;
    -o-animation-delay: 900ms;

    }
    .delay10{

    -webkit-animation-delay: 1000ms;
    -moz-animation-delay: 1000ms;
    -ms-animation-delay: 1000ms;
    -o-animation-delay: 100ms;

    }

    .hidding{
    visibility:hidden;
    }
    .visible{
    visibility:visible;
    }
    //html
    <div class="col-xs-6 hidding animated delay7" data-animated="bounceInUp">
    ....
    </div>

    //jquery
    $('.hidding').bind('inview', function(event, visible) {
    var effect = $(this).attr('data-animated');
    $(this).addClass(effect);
    $(this).addClass('visible');
    });

#### jquery nav/one page nav

The one page nav, powered by "jQuery-One-Page-Nav" is very easy to manage. Please see the code in script.js to copy and modify to fit your needs. Full option reference: https://github.com/davist11/jQuery-One-Page-Nav

jQuery-One-Page-Nav setup:

    $('ul.navbar-nav').onePageNav({
    scrollSpeed: 1000,
    scrollThreshold: 0.25
    });

#### Flexslider jquery plugin

the slider on this theme is powered by 'jquery flexslider', Please see the code in script.js to copy and modify to fit your needs.

See all flexslider jquery plugin setup on http://flexslider.woothemes.com

     //jquery
    	$('#mobSlider').flexslider({
        animation: "fade"
    	});
    	$('#screenShoot').flexslider({
        animation: "slide"
    	});

in KOME style4 the image slider size we use is 1362px x 851px and for the image on resize we use the jquery plugin 'resizeimagetoparent' see the documentastion on https://github.com/levymetal/jquery-resize-image-to-parent

    (function(){
    //function
    boxHeight();
    })();

    function imageResizeParent(){
    $('.myImg').resizeToParent();
    }

#### jquery bootstrap lightbox

Image preview onthis template is powered by jquery bootstrap lightbox, Full option reference: http://ashleydw.github.io/lightbox/

And the setup is like the following code:

    //html
    <a href="img/demopic1.jpg" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Image Title Here"><img src="img/EyeIcon.png" alt="mobapps" /></a>
    $(window).load(function(){
    //call function
    lightboxPhoto();

    })();

    function lightboxPhoto() {
        $(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
        event.preventDefault();
        $(this).ekkoLightbox();
        });
    }

#### jquery validation

The falidation contact form, powered by "jQuery jqBootstrapValidation" is very easy to manage. Please see the code in script.js to copy and modify to fit your needs. Full option reference: http://reactiveraven.github.com/jqBootstrapValidation

jquery backstretch setup:

     $("input,select,textarea").not("[type=submit]").jqBootstrapValidation();

### E) Sources, Credits and Font - top

I've used the following images, icons or other files as listed.

- Bootstrap CSS Framework - http://getbootstrap.com/
- jQuery - www.jquery.com
- jQuery nav - http://github.com/davist11/jQuery-One-Page-Nav
- Slider Flexslider-http://flexslider.woothemes.com
- jQuery jqBootstrapValidation - http://reactiveraven.github.com/jqBootstrapValidation
- jQuery bootsrap Lightbox - http://ashleydw.github.io/lightbox/
- jQuery inview - http://srobbin.com/jquery-plugins/backstretch/
- IE9.js - Project Hosting on Google Code: http://html5shiv.googlecode.com/svn/trunk/html5.js
- google font:

      WebFontConfig = {
    	google: { families: [ 'Open+Sans:300,700,400,600:latin' ] }
      };
      (function() {
    	var wf = document.createElement('script');
    	wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
    	  '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    	wf.type = 'text/javascript';
    	wf.async = 'true';
    	var s = document.getElementsByTagName('script')[0];
    	s.parentNode.insertBefore(wf, s);
      })();