Launchkit Documentation

Thank you for purchasing Launchkit HTML template with Variant builder. This documentation will guide you through the basic structure of the template and some of the common processes and functions used throughout. For a more detailed guide for the Variant builder, see the Variant documentation found in the docs/variant directory.

* Should you have issues with using Launchkit or there is something not covered in this documentation, reach out to us at and we can provide more detailed support.

1. File Structure

HTML Files

All pages for Launchkit are housed inside their own .html file. These files must reside in the root directory of the template (eg. launchkit/blog.html) in order to access the relevant CSS and Javascript files necessary for correct display.

HTML pages created with Variant Page Builder should also be placed in this same root directory.

CSS Files

The main styles for the Launchkit template are housed inside theme.css (or theme-xxxx.css depending on which colour scheme you're using). Styles for both desktop and mobile responsive are housed within this file and can be edited anytime. If you are planning to make custom edits to the style of your website, we suggest using the included custom.css file. This will make updating Launchkit a much smoother process as you can simply replace the updated theme.css file in its entirety.

The custom.css file is references in the head like so, make your own styles and overrides in this file only.

>link href="css/custom.css" rel="stylesheet" type="text/css" media="all"/<

*Note: When you update Launchkit - be sure to keep this file intact, if you overwrite it - you will lose all your custom styles!

LESS Files

If you're familiar with LESS, you can dive right into the less/ folder to find all associated LESS files (including all default Bootstrap files). The theme.less files include useful mixins and variables (such as colour schemes, standard spacing etc.)

* Note: If you are getting errors when attempting to compile theme.less in an online compiler, this is because theme.less includes references to a couple of Bootstrap less files (at the top). An OS compiler is recommended so the compiler has full access to all necessary files.

Javascript Files

scripts.js is the central javascript file in use for Launchkit. This file houses all plugin initialisations such as Flexslider, Twitterfetcher, Spectragram etc. It's also where the code for processing contact forms lives.

2. The Grid

Bootstrap Grid

Launchkit is based on Bootstrap 3.1 and uses the default Bootstrap 12 column grid system for the underlying structure of each section. Each use of the grid should be wrapped in both a container and row element. Below is a brief example for a section with three equal columns (3 for tablet and up, 6 for smartphones).

<div class="container">
	<div class="row">
		<div class="col-md-4 col-sm-6">...</div>
		<div class="col-md-4 col-sm-6">...</div>
		<div class="col-md-4 col-sm-6">...</div>

For a more detailed explanation of the Bootstrap grid - see the Bootstrap documentation here

3. Image Sliders

Slider Types

Launchkit uses Flexslider for all slider functionality. By default, there are 3 slider types:

  • Hero sliders (.hero-slider) - Large image sliders found in headers and large dividing sections. By default these sections will include slider pagination in the bottom center.
  • Testimonials sliders (.testimonials) - Text slider that features pagination at the bottom center.

Initializing a slider

The slider initializations all take place in scripts.js. To initialize a new slider type - do it inside scripts.js

<div class="my-new-slider">
	<ul class="slides">

$('.my-new-slider').flexslider({ options go here });

Common Questions

How do I change the slider timing?

Inside the slider initialization you have access to the 'slideshowSpeed' option, use it like so:

$('.my-new-slider').flexslider({ slideshowSpeed: 8000 });

The slideshow speed option is measured in milliseconds, 8000 would be 8 seconds.

How do I adjust the slide height?

Inside CSS you can set the height for the slides. The default hero-slider heights can be accessed like so:

.hero-slider .slides li{ height: 800px; }

How do I enable slider arrows?

Inside the slider initialization you have acces to the 'directionNav' option, use it like so:

$('.my-new-slider').flexslider({ directionNav: true });

4. Using Icons

Launchkit uses a custom Icon Kit contrsucted using Fontastic. For a full reference list for each icon go here

Icon Syntax

Icons use the 'i' element and each have their own unique class which dictates which glyph is shown. For a full list of available classes, see the link provided above.

<i class="icon-twitter"></i>

This code would result in the Twitter bird icon.

5. Image Backgrounds

Many elements in Launchkit, such as the hero slider elements feature full-width image backgrounds. These backgrounds are set to cover the entirety of the element they are nested within.

Covering an element with a background

Some basic HTML markup is require to cover an element with an image background. Just set the source of your image and Launchkit will do the rest.

<div class="background-image-holder">
	<img alt="Background Image" class="background-image" src="img/my-image.jpg" />

* Note: This method uses the CSS background-size: cover property to achieve the effect. This means that as the screen width is decreased, the image will be cropped toward the center of the image. If you'd like to adjust the position of the background for smaller screens, use the background-position property like so:

@media all and (max-width:767px){
	.background-element{ background-position: 20% 40%; }

6. Colour Schemes

Launchkit comes with a number of pre-built colour schemes. Using Variant, you can change the colour scheme simply by clicking the 'Colour Scheme' tab in the style sidebar and selecting your desired scheme from the swatches.

Switching schemes with CSS

Outside of Variant you will need to include the appropriate CSS file in the head of your document. For example, if you wanted to use the 'Velvet' colour scheme you would include the following:

<link href="css/theme-velvet.css" rel="stylesheet" type="text/css" media="all"/>

Creating schemes with LESS

With the included LESS files, you can easily create your own custom colour scheme. This requires you to simply change the value of the @color-primary variable inside theme.less. All other colours will be automatically generated from the @color-primary variable - this makes generating new schemes quick and easy.

7. Dark Skin

Any element in Launchkit that has a white background by default can be altered to have a dark background. This can be done in two ways:

Switching 'Dark Skin' on in Variant

As you hover over an eligible section you will see a cog appear in the right-hand corner. Click the cog and then click the 'Dark Skin' toggle.

Adding the CSS class manually

Alternatively, if you're not using Variant you can add the class 'bg-dark' to any section that has a white background by default as in the example below:

<section class="features features-1 bg-dark">...</section>

8. Instagram Feeds

Some elements in Launchkit offer the ability to embed an Instagram image feed. These elements use a data attribute 'data-user-name' in conjunction with the Spectragram jQuery plugin to fetch the latest images from the specified Instragram account.

Using the data attribute

Setting up an Instagram element is as simple as placing your username inside the data attribute like so:

<div class="instafeed" data-user-name="my-account-name">


By default, the Spectragram plugin is setup using our own Client ID and Access Token - if you have any issue using this feature, you should create your own Client ID and Access Token and place theme inside scripts.js (~line 262)

To gain access to your Client ID and Access Token, use this tutorial:

9. Twitter Feeds

The Twitter feed element uses a HTML5 data attribute called 'data-widget-id' to determine which feed to display. Changing it requires you to create a widget from your Twitter account.

Creating a widget on Twitter

  • Go to the 'Settings' page of your Twitter account and clicking 'Widgets'
  • Click 'Create New' and then 'Create Widget'
  • Go back to the 'Widgets' page and click 'Edit' on your newly created widget
  • From here you need to copy the widget id out of the url bar. The widget id is the long numerical string after /widgets/ and before /edit and paste it into the 'data-widget-id' attribute on the tweets div.

Twitter element markup

Once you've got your widget ID, paste it into the data-widget-id element of the tweets div. Leave the tweets div empty, it will be populated by the Twitterfetcher plugin when the page loads.

<div id="tweets" data-widget-id="492085717044981760"></div>

10. Linking the mail form via SMTP server

Your mail form will not work unless you have your files running on a hosting server with PHP 5. When you have your files ready on your hosting server, you need to edit the settings in /mail/mail.php to make the email function work.

Please note that you should first get your SMTP mail settings from your hosting provider before proceeding. It is also a good idea to set up your sending email address in cPanel before proceeding. Contact your hosting provider for support in this area, as we don't have access to your system to sort out these details.

Open /mail/mail.php and make the following changes:

  • Line 13: Change to your own SMTP mail server address, either a hostname or ip address. Usually if you want to use your cPanel hosting server's email system. Otherwise you can use your ISP mail server but beware you'll need to provide account login details either way.
  • Line 14: Change the port number to the port for your outgoing server supplied by your hosting provider.
  • Line 15: Change the security layer used by your outgoing/SMTP server. This can either be 'ssl', 'ssl3', 'tls' or null if you want to use no security layer. Note that when using null, there are no quote marks around the word, just the word null.
  • NOTE FOR GMAIL USERS: Gmail requires that you use port 587 with TLS security so your lines 13, 14 and 15 would look like this:
        $outgoingServerAddress      = '';     // Consult your hosting provider.
        $outgoingServerPort         = '587';                // Options: '587' , '25' - Consult your hosting provider.
        $outgoingServerSecurity     = 'tls';                // Options: 'ssl' , 'tls' , null - Consult your hosting provider.
  • Line 19: Change to your sending email account username, usually the entire email address at your domain eg: . You might need to create an email account in your cPanel for this if you don't already have one set up. Otherwise you can use the SMTP mail account info from your ISP.
  • Line 20: Change to the password for your sending email account at your domain. You might need to create an email account in your cPanel for this if you don't already have one set up.
  • Line 23: Change to the email address of the person who will be receiving and handling all the emails from the users who enquire through the website.
  • Line 24: Change to the name of the recipient who will handle all emails that come from the website.
  • Line 27: Change this to what you want the subject of the email to be in the recipient's email.
  • Line 28: Here is where you name your website, for instance "Yum Yum Restaurant Website" - this name will be used when the user does not supply a name, or when there is no email input on the form. Eg. when the form has only name and phone fileds, the email will appear to come from "Yum Yum Restaurant Website".

You will receive feedback from the Swift Mailer system on your page. You will be given an error until you get the sending settings just right. When the settings are correct, you'll receive a green box with a success message. Swift Mailer is used because it is reliable in sending, and gives feedback when message has been sent.

For a full range of documentation on configuring and using the Swift Mailer Library see here:

If you encounter a "Connection refused" problem with the contact form you may need to contact your server or email host to determine the correct SMTP settings, or fall back to using the standard mail function (see next section). When you see a timeout message, it could be that the supplied port number or security setting is wrong for your particular SMTP server.

Of course we are always here to help too! Please open a support ticket at our forum on Ticksy

11. Linking the mail form using native PHP mail()

The Mail Transport sends messages by delegating to PHP's internal mail() function.

In our experience, the mail() function is not particularly reliable. We only recommend using this if you can't get a satisfactory result using the above mentioned SMTP method.

The problem with mail() is that it "tries" to simplify things to the point that it actually makes things more complex due to poor interface design. The developers of Swift Mailer have gone to a lot of effort to make the Mail Transport work with a reasonable degree of consistency.

Serious drawbacks when using this Transport are:

  • Unpredictable message headers
  • Lack of feedback regarding delivery failures
  • Lack of support for several plugins that require real-time delivery feedback

It's a last resort, so use SMTP instead where possible.

Using the mail transport

Open mail/mail.php and make the following changes:

  • Line 9: Make sure line 9 has $emailMethod set to phpmail. That is, "phpmail" within the quotation marks on the right-hand-side of the equals sign like this:

    $emailMethod                = 'phpmail'; // REQUIRED value. Options: 'smtp' , 'phpmail'

For a full range of documentation on configuring and using the Swift Mailer Library see here:

Of course we are always here to help too! Please open a support ticket at our forum on Ticksy

12. Redirecting to a confirmation page

Launchkit can redirect your users to a confirmation page after successful submission of email forms or newsletter signup (Mail Chimp / Campaign Monitor) forms.

Default behaviour is to send the form then display a success message in a green box. Setting the success-redirect parameter on any form will override the default behaviour and send the user to your specified page instead of showing the green box. A form with a success redirect parameter would look like this:

    <form class="form-email" success-redirect="" data-success="Thanks for your submission, we will be in touch shortly." data-error="Please fill all fields correctly.">
        <input type="text" class="validate-required" name="name" placeholder="Your Name">
        <input type="text" class="validate-required validate-email" name="email" placeholder="Email Address">
        <textarea class="validate-required" name="message" rows="4" placeholder="Message"></textarea>
        <input type="submit" value="Send Message">

The address given in the success-redirect attribute should be a fully formed URL including http:// to ensure maximum compatibility.

If the attribute success-redirect is left blank, or not included in the form tag, the default behaviour will occur (green box success message appears).

13. Capturing referrer via URL ref parameter

When creating a landing page, you may wish to track traffic from a particular source. Launchkit allows you to capture the referrer on your email forms, and have it sent through as part of the enquiry email when a user submits an email form to make an enquiry.

For instance, you may like to see which visitors made an enquiry after arriving at your site from your Facebook ad link, or perhaps you have Google Ads that you'd like to track also. Whichever it is, just add the parameter ref into your links from each source and Launchkit will add that referrer info into your email. Here is an example link:

How it works

When the page loads, Launchkit will detect if there is a ref parameter and add a hidden field to each email form with the referrer value automatically set. When the form is sent, the value is picked up on the server side in mail.php and is included as part of the email text.

If there is no referrer parameter set in the URL, nothing happens and nothing is sent through. You do not have to use it, but the option is there for those who do.