Bootstrap Starter Kit

General Information

Version: 1.4

Version Date: 16th May 2015

Author: Theme Spirit

Thank you for purchasing Bootstrap Starter Kit. If you have any questions that are not covered in this documentation, or encounter any problems, please contact us at support@bootstrapstarterkit.com

A friendly note to anyone using an illegal copy of Bootstrap Starter Kit... Naughty, naughty!

We would of course prefer that you buy Bootstrap Starter Kit, this will allow us to dedicate more of our time into developing it further, but if you must be a scurvy pirate then so be it.

Please be aware that we reserve the right to not offer support to anyone we suspect of pirating this software.

Product Overview

Bootstrap Starter Kit was created as a great shortcut for learning and creating Bootstrap prototypes and websites.

There are several different ways to use Bootstrap Starter Kit:

Copy and paste the content blocks into the empty skeleton file.
Use the drag-and-drop 'HTML Builder' to create your page designs 'on-the-fly'.
Start with one of the pre-built pages and add your own content.

Requirements

A HTML editor.
To use the drag-and-drop HTML Builder requires a web server with PHP enabled.

Installation

Unzip the file you downloaded from Creative Market
Locate the 'bskit-builder' folder, this is found in the 'HTML Files'
Upload this folder to your live web server
Navigate to the folder in your web browser (eg. http://yourwebsite.com/bskit-builder/)
Enjoy building loads of great sites

How it Works

We've tried to make things as easy as possible for you to use and customize Bootstrap Starter Kit, and to use it how you want to.

You might just be looking for some pre-styled blocks to drop into an existing project, or you might be wanting to learn Bootstrap and aren't sure where to start, or you might be wanting to quickly prototype some pages for an urgent client meeting.

However you want to use Bootstrap Starter Kit is up to you.

File Structure

In the 'HTML Files' folder are the following folders:

bskit-builder - This is the HTML Builder that you need to upload to a web server to use.
Content Blocks - Contains the separate block files.
Pre-Built Templates - These are coming soon.
Skeleton File - A blank HTML file with all CSS and JS references linked, ready to paste the HTML Blocks into.
Style Library - Our library for re-styling Bootstrap. More Style Libraries will be released in future updates.

Copy and Paste Content Blocks

Just as it says, copy and paste.

We have separated the blocks into the following categories:

Headers
Promo Blocks
Content Blocks
Gallery Blocks
Team Blocks
Pricing Tables
Blog
Contact Blocks
Footer Blocks

There is also a 'Common Files' folder which has files used by all of the content blocks.

In the 'HTML Files' folder you will find a skeleton file which you simply need to copy the html blocks into for them to work. All CSS and JS files are already linked, so just put the HTML of the blocks you want to use and BOOM!

Drag-and-drop HTML Builder

The HTML Builder is a great tool for being able to visually see the blocks as you drag them in to position and decide which layout works best for your site.

The builder includes some simple editing functions, for changing text content, style and importing images, the individual block's code can also be edited from the builder.

Once you have the layouts finished you can export your page(s) which will download all the necessary files to your computer.

Pre-built Templates

We will put together a few page ideas to get you started if you would prefer to do it that way.

These will be coming very soon.

Keep an eye for template pages in future updates.

HTML Builder

Element Editing

The HTML Builder allows users to drag content blocks onto a canvas and drop them where they'd like them to appear. These blocks can be re-positioned on the page by clicking and dragging again. Hovering over a placed content block will display options to 'View Source', 'Reset' or 'Delete'.

Content Editing

The HTML Builder allows for certain portions of text to be edited from within the builder, by selecting the 'Content' option at the top of the screen, then click the text block you wish to edit.

Detail Editing

Selecting the 'Detail' option at the top also allows you to edit images, text details (size, color etc) and icons.

Pages

The HTML Builder allows you to create multiple pages for export.

To add a new page, simply click the "Add" button at the bottom of the left panel. You can change the page (file) names by clicking the 'edit' icon next to each page, please keep your 'Home' page as 'index'.

To delete a page, simply click the 'cross' icon next to the page you'd like to remove.

Export HTML

Once you are happy with your page layout(s), click the 'Export' button at the top or down the left panel.

The software will then collect together all HTML files along with all CSS, JS and Image files and will download to your computer as a ZIP file.

Please note: The HTML Builder does NOT allow work in progress to be saved, so please be careful if you are doing a lot of edits in the builder.

Whether you are creating a one page site or a site with several pages, the files that get exported are the same (all css, js, fonts, images etc), so if you are wanting to use the builder for a lot of editing it might be safer to do a few pages at a time and then just copy the .html files into one of the exported folders, everything should still work fine.

The excellent HTML Builder software was created by ChillyOrange. The full HTML Builder documentation can be found here.

Changing Navigation

Due to various factors, it is not possible to change some navigation from within the HTML Builder, nor is it possible to copy the navigation you use on one page to another in the builder. For these reasons we suggest using an external HTML editor to set up your navigation, which you can then easily copy across your other pages if you have any.

By all means drag-and-drop the navigation style you wish to use to each of your pages, then, after exporting your site, open up the index.html file and edit the navigation.

Contact Form Email Address

Just locate file called 'contact-form.php' which you will find in the JS folder of your exported site. Open this file and go to line 48 and just change the email address to where you want the enquiry emails to go to.

Changing Google Map Location

Due to certain limitations, getting the Google Map to work properly requires a little bit of code editing.

When you drag the Map Block onto the page you will see it has a pre-set location, to change this to your location please follow these steps.

1. Create your map page and 'Export' your site.

2. Open the HTML file containing your Map in your HTML editor software, and find the part that refers to 'map'.

3. The map's API conflicts with the builder and creates lots (and lots) of unnecessary code that we need to get rid of. So select from after class="map" where it starts style=" all the way to the bottom of the big mess of code it creates. And hit delete.

You should be left with this below.

4. Now just close the div tag, so it should look like this below.

5. Next, scroll all the way to the bottom of your page where the Javascript file references are...

6. And remove the line above and below the Google Map script link, so it should look like below.

That will get the map working properly, now we just need to change your coordinates.

7. Open the JS folder from your export and find the bskit-scripts.js file and open it. Scroll down until you find the code that relates to Google Maps (it is labeled). Now just change the coordinates to your location.

8. If you are not sure how to get your coordinates on Google Maps, just find your location (zoom in as much as possible) and centre the location you want to pin-point in the middle of the window. Then copy the 2 sets of coordinates from the URL.