JS Structure

Main js files:

Bootstrap (bootstrap.min.js)#

Scripts being used by Bootstrap. To build your own custom load please access this url http://getbootstrap.com/customize/?id=9e12995c18085dd80bf5 and then overwrite the existing one.  This is a unique link that holds the configuration of the Boostrap build.


Plugins (kl-plugins.js)#

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

A list of plugins:

  • jQuery Easy Video background – This is a premium plugin which displays videos as normal players or backgrounds. It supports both video tags but also youtube videos.
  • jQuery Easing – Classic jQuery plugin to add mathematical easing effects
  • imagesLoaded plugin – Plugin that helps other plugins to be lauched only when the images within a specific container are loaded.
  • Twitter Post Fetcher – This will fetch the latest tweets of your Twitter account.
  • jQuery h5Validate – HTML5 form validator. Fully benefit by the html5’s validation power
  • Animated Sparkles (kl-sparkles)
  • IsotopeFilter & sort magical layouts
  • jQuery gMap – Google Maps API V3
  • jQuery UI
  • jQuery SmartScroll – This is a debouncer for the scrolling event. It basically optimizes the javascript triggers/hooks etc. upon scrolling.
  • jQuery SmartResize – This is a debouncer for the browser resize event. It basically optimizes the javascript triggers/hooks etc. upon resizing your browser. It increases performance.
  • jQuery Appear plugin  – Used for the elements in viewport animation when scrolling
  • SmoothScroll – Customizes the scrolling effect making it a bit more eased. I must admit it does affect performance and if needed i recommend deleting the script.
  • jQuery Flickr Plugin – This will fetch the latest images from your Flickr account. Make sure you get an id here http://idgettr.com/
  • jQuery Magnific Popup – Awesome and lightweight popups. Also really powerful and customisable.
  • jQuery carouFredSel – This is a really powerful carousel solution. There are literally tons of resources and demos online.
  • jQuery v1.10.1

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


 Kallyas Scripts (kl-scripts.js)#

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

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

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


Custom Scripts (kl-custom.js)#

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


Other scripts:#

Modernizr (js/modernizr.min.js)

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