Welcome to the Kayzen User Guide

Overview

Welcome to the Kayzen user guide. Contained within your download should be a dev directory as well as a prod directory. This guide will focus only on the contents of the prod directory, which contains all the HTML, CSS and JavaScript files required to build your theme. The dev directory contains all the source files from which Kayzen is built. For a more comprehensive documentation focusing on the source files, visit the developer guide on Github.

Developer Guide Advanced

The developer guide is the documentation for Kayzen available on Github. The developer guide is geared more for advanced developers who are comfortable with Sass and the command line.

Compatibility

Whilst we thoroughly enjoy experimenting with the latest technologies, we also like to ensure that our products work on a wide vareity of devices. Our themes are compatible with all the latest browsers and devices, degrading gracefully where applicable.

10+

Getting Started

Project Architecture

The prod directory of your download has the following folder layout:


├── app
│   ├── fonts
│   │   └── ...
│   ├── images
│   │   └── ...
│   ├── scripts
│   │   └── ...
│   ├── styles
│   │   └── ...
│   └── themes
│       └── ...
├── pages
│   └── ...
├── themes
│   └── ...

The only directory required to start a Kayzen project is the app directory. To learn which files need to be included in your HTML, visit the Basic HTML Structure section. The other two directories contain the demo HTML templates.

By default, we provide all assets uncompressed. This is to allow you to easily make changes to Kayzen's features and options out the box without having to worry about any build tools.

Drag & Drop Page Builder

Click here to view a live demo of the page builder.

The quickest way to get started with Kayzen is to use the provided drag & drop page builder. This allows you to quickly create HTML pages using premade sections seen throughout the demo pages.

The Kayzen page builder is a modified version of the popular HTML Builder.

Installation

  • Upload the dev/builder/dist/ directory to yourdomain.com/builder/dist/
  • Upload the prod/app/ directory to yourdomain.com/app/
  • Upload the prod/templates/ directory to yourdomain.com/templates/

Usage

  • Vist yourdomain.com/builder/dist/, create and export your pages
  • Upload your exported HTML pages to yourdomain.com

Ensure file permisions are set to 777 if you experience 500 internal server error on them (right click > inspect element > console).

Basic HTML Structure

Each HTML page that is provided with Kayzen and generated by the page builder has a layout similar to the following example:

<!DOCTYPE html>
<html>
        
    <head>
        <!-- Page Title -->
        <title>Kayzen - Multi-Purpose HTML5 Theme</title>
        
        <!-- Meta Tags -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="Multi-Purpose HTML5 Theme.">
        <meta name="viewport" content="width=device-width, initial-scale=0.9">
        <meta name="HandheldFriendly" content="True">
        <meta name="MobileOptimized" content="320">

        <!-- Icons -->
        <link rel="apple-touch-icon" href="/app/images/apple-icon-touch.png">
        <link rel="icon" href="/app/images/favicon.png">
        <!--[if IE]><link rel="shortcut icon" href="/app/images/favicon.ico"><![endif]-->

        <!-- Stylesheets -->
        <link rel="stylesheet" href="/app/themes/Kayzen/app.css">  

        <!-- pseudojQuery start -->
        <script src="/app/scripts/pseudojQuery-start.js"></script>        
    </head>
    
    <body>
        
        <div id="site-content">
            <!-- SITE CONTENT -->
        </div>

        <!-- UI Enhancements -->

        <!-- Site Overlay -->
        <div class="site-overlay" id="site-overlay"></div>

        <!-- Styles JSON Configuration -->
        <div id="modulesConfigJSON"></div>
        
        <!-- Scripts -->
        <script type="text/javascript" src="/app/scripts/jquery.js"></script>
        <script type="text/javascript" src="/app/scripts/pseudojQuery-end.js"></script>
        <script type="text/javascript" src="/app/themes/Kayzen/app.js"></script>

    </body>

</html>

In order for any HTML page to be compatible with Kayzen, it should load the following resources:

  • /app/themes/Kayzen/app.css
  • /app/scripts/pseudojQuery-start.js (must be loaded before jQuery)
  • /app/scripts/jquery.js
  • /app/scripts/pseudojQuery-end.js (must be loaded after jQuery)
  • /app/themes/Kayzen/app.js (must be loaded after jQuery)

You can of course replace Kayzen in the above paths with any theme you have available. For a list of available default themes, click here.

Features & Options

Custom Themes

One of the most powerful features of Kayzen is the ability to create your own themes (details on how to do so are available in the Developer Guide). In general, Kayzen themes are interchangable and not dependent on specific HTML markup, which means you can theoretically change to a new theme just by loading the neccessery JS and CSS without having to worry about effects on your HTML.

Click Here to view the available default themes.

To change to a different theme, all you need to do is replace the theme name when loading your JS/CSS asset in yout HTML, e.g:


<link rel="stylesheet" href="/app/themes/Kayzen/app.css">  

becomes...


<link rel="stylesheet" href="/app/themes/Nexus/app.css">  

Ensure you change both the app.css and app.js paths when switching themes

Responsive Grid System

Kayzen comes with a bespoke custom grid system built from the ground up to work seamlessly throughout the theme, unlike other themes which simply take parts from Bootstrap. Kayzen-GS is availalbe for free on Github if you want to check it out but are not a Kayzen customer.

The default grid system is based off of 12 columns, which will become stacked ("respond") at 940px by default (all of this is of course customizable).

Basic Example


<div class="row">
    <div class="span-4">
        ...
    </div>
    <div class="span-4">
        ...
    </div>
    <div class="span-4">
        ...
    </div>
</div>

Click Here to view demos, examples and instructions on how to use all the various different rows and columns which come as part of the default Kayzen grid system.

Working Twitter Feed

Kayzen comes with a customised Twitter Feed which you may have seen used in the footer section. To change the Twitter user from which Tweets are pulled form, locate the data-twitter-handle attribute in your HTML, and pass your desired Twitter username:


<div id="footer-twitter-feed" data-twitter-handle="envato">
    ...
</div>

Your footer Twitter feed will now pull tweets from @envato.

Globally changing the Twitter Feed username is covered in the Developer Guide.

Working Contact Form

The contact form uses Formspree; a quick and easy to use solution which requires no setup, just substitute your email address in the action attribute on the form element and you're good to go.


<form action="https://formspree.io/YOUR@EMAIL.COM" id="contactForm" method="post">
    ...
</form>

To change which page your users get sent to upon completing the form, add the below hidden input field with your desired URL value, ensuring it has a name attribute of _next:


<form action="https://formspree.io/YOUR@EMAIL.COM" id="contactForm" method="post">
    <input type="hidden" name="_next" value="thankyou.html" />
    ...
</form>

For more features and examples, check out the Formspree homepage.

Google Map

To change any of the Google Map options, you'll need to open app/themes/YOURTHEME/app.js, and at the very bottom locate the following code:


$('#google-map').googleMap();

Changing options works by passing the option and value to the plugin like so:


$('#google-map').googleMap({
    option-1: value,
    option-2: value
});

Colors/Style

Head over to Snazzy Maps and pick your favourite style, then click the "Copy Code to Clipboard" button, or simply copy the code manually. Once you have your code copied, paste is as the value for the styles option:


$('#google-map').googleMap({
    styles: [
        {
            ...
        }
    ]
});

Location

To change the defauly location which the map lands on, pass the longitude and latitude options to the plugin:


$('#google-map').googleMap({
    longitude: 48.195387,
    latitude: -63.171387,
});

Hint: You can use this website to get your coordinates.

Parallax Effects

Kayzen uses the Stellar.js jQuery plugin for parallax effects.

To make an element's background have a parallax effect, add the data-stellar-background-ratio attribute to your element:


<div data-stellar-background-ratio="0.5">...</div>

Click Here to read the relevant section of the official Stellar.js documentation.

Video Background

You can use a Youtube or Vimeo video as the background for the Billboard element of your pages.

Youtube


<section class="billboard-videoBg">
    <div class="auto-resizable-iframe">
        <iframe allowfullscreen="" src="src="http://www.youtube.com/embed/Q3oItpVa9fs?theme=light&autoplay=1"></iframe>
    </div>
</section>

Vimeo


<section class="billboard-videoBg">
    <div class="auto-resizable-iframe">
        <iframe id="billboard_video" src="https://player.vimeo.com/video/87701971?autoplay=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
</section>

Google Fonts

Kayzen only uses Google Fonts and makes it easy to add your own.

To edit/remove/add Google Fonts, open app/themes/YOURTHEME/app.css, where you will find at the top the Google Font imports:


@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,900);
@import url(http://fonts.googleapis.com/css?family=Raleway:100,300,700,900);

Once you have imported your desired fonts, you can update the helper classes to use the new families by locating the following code in the same file (app.css), and replacing the font-family value:


.font-1 {
  font-family: "Lato";
}

.font-2 {
  font-family: "Raleway";
}

Kayzen uses Owl-Carousel 2 for all carousels. Creating a carousel is simple, just add the carousel class to your container of elements:


<div class="carousel">
    <div>carousel item</div>
    <div>carousel item</div>
    <div>carousel item</div>
    <div>carousel item</div>
</div>

For more options and customizability, visit the official Owl Carousel documentation.

Magnific Popup

Kayzen uses the Magnific Popup jQuery plugin for all lightboxes and galleries.

Lightbox (single image)

To cause an element to open a specific image in a lightbox on click, use the rel="lightbox" attribute:


<a href="image-1.jpg" rel="lightbox">...</a>

Gallery

To create a gallery of multiple images, add the lightbox-gallery class to your container of thumbnails:


<div class="lightbox-gallery">
    <a href="image-1.jpg" rel="lightbox">
        <img src="image-1.jpg" width="50px">
    </a>
    <a href="image-2.jpg" rel="lightbox">
        <img src="image-2.jpg" width="50px">
    </a>
    <a href="image-3.jpg" rel="lightbox">
        <img src="image-3.jpg" width="50px">
    </a>
</div>

For more help and information, visit the official Magnific Popup documentation.

Font Awesome Icons

Kayzen uses Font Awesome for all icons. A full list of available icons can be found on the Font Awesome website.

Icon Button

You can create a button using Font Awesome icons like so:


<a class="button-icon" href="#">
    <i class="fa fa-apple"></i>
</a>

Checkout the Buttons page for available button modifiers.

Custom Sections

Header

Logo

To replace the default logo with your own, locate the element with the logo class in your HTML and update the image path with the path to your logo:


<div class="logo">
    <a href="/index.html">
        <img src="/app/images/logo-white.png" alt="logo" />
    </a>
</div>

Sticky Header

To cause the header to be sticky when scrolled, append -sticky to the app-header component:


<header class="app-header-bar-absolute-sticky">
    ...
</header>

Side Header

To create either a left or right sidebar header, append -side-left or -side-right to the app-header component, removing all other modifiers:


<header class="app-header-side-left">
    ...
</header>

Footer

Twitter Feed

To change the Twitter user from which Tweets are pulled form, locate the data-twitter-handle attribute, and pass your desired Twitter username:


<div id="footer-twitter-feed" data-twitter-handle="envato">
    ...
</div>

Your footer Twitter feed will now pull tweets from @envato.

Earth Slider

Click Here to view an example of the Earth Slider.

The Earth Slider support an unlimited number of pins, though 3 are provided by default. You can change which pin acts as the starting one by locating the following code in the pageScripts() function on any page that uses the Earth Slider (the function will be in the HTML embedded within script tags):


<script>
    
    $(document).ready(pageScripts);
    
    function pageScripts() {
        $('.earth-slider').KayzenEarthSlider();
    }
    
</script>

To change the starting pin pass the startingSection option to the plugin:


$('.earth-slider').KayzenEarthSlider({
    startingSection: 4
});

This will set the fourth section as the default starting one (assuming your custom Earth Slider had 4 pins).

Resources

All third party resources including any stock images used and included in this theme have appropriate licenses for copying, modifying and re-distributing, but should be replaced with your own content where appropriate.

Tools/Utilities

Kayzen makes use of many available open source tools which are all available on Github. Your download comes with everything you need to use the default themes, but for advanced customization you can get all the third party tools used on Github as git submodules.

Stock Images

The following graphics are included with an extended license from Graphic River:

All other graphics are created by us.

Fonts

Everything else, including all code and images, except where explictly stated, is created by us.

Notes

Support

We will happily provide any basic support for our customers free of charge on the ThemeForest comments section.