Tourly HTML Template Documentation

Thank you for purchasing the Tourly template! I hope you enjoy the template and make something beautiful from it.

Please read all the documentation below and feel free to email me if you have any further questions.

Table of Contents

  1. Introduction
  2. Setting Up
  3. Project Structure
  4. Overview
  5. Getting Started
  6. Banner
  7. Gallery
  8. Location and Map
  9. Booking Form
  10. Credits


Before setting up the template, please make sure you have the following tools and basic knowledge:

Setting Up

To get started, unzip the Tourly files contents into an appropriate location.

Open Git Bash for Windows or Terminal on Mac or Linux and cd into the Tourly template location.


cd dev/tourly-one-page-html-css-template

After you're in the working directory, run npm install and wait for all the packages to install.

Once the packages have installed, run the command gulp and Tourly should automatically launch in a new browser window.

Project Structure

When you go into the Tourly project, you should see 2 folders:

During development, all work and modifications are to be made in the src/ (short for source) folder.

The final website is compiled into the dist/ (short for distribution) folder.

Note: You can run gulp clean in the terminal to remove the dist folder and run gulp build to republish your project in the dist folder.


Tourly is built on top of Base – a minimal HTML/CSS framework similar to Bootstrap and Foundation, but a lot more lightweight.

It includes normalize, resets, typography, lists, blockquotes, code blocks, forms and a 12 column responsive grid. If you would like a better understanding of what's in the framework, please check out the Base Docs

Getting Started

To get started, open terminal and cd into the tourly-one-page-html-css-template project.

Inside the project, run the command gulp.

Your web browser should launch with the Tourly website loaded.

You can know open the folder with Sublime text editor and start making changes to files within the src/ folder.

If you require a new banner image, it is recommended you have an optimised image with the dimensions: 1200px wide by 780px+ high.

Put your new banner image in src/img/ and restart your website (CTRL + C in terminal and re-run the gulp command).

Once your website is re-running, you will need to modify the banner SCSS file:


If you have saved your new banner image as a new name, you will need to modify line 38 and update the banner image name.


In order to wire up your gallery, you will need 2 sets of photos.

A set of thumbnails with a minimum recommended size of 600px wide by 380px+.

A set of full sizes images with a minimum recommended size of 800px wide by 530px+.

The caption below the lightbox uses the title attribute set on the


<a title="A beautiful picture" href="img/photo-1.jpg" class="gallery-item-link">

Location and Map

To update the map location, you will need to find out the Latitude and Longitude coordinates.

To do this, open and type on the place you would like the map to start (eg: The Breezes Hotel).

When the search returns a result, the geo coordinates will be returned in the address bar of your browser.

GEO Coordinates of Map

Copy the coordinates and open the default.js file in Sublime text editor.


Jump to lines 45 and 53 and replace the geo coordinates with your new ones as required.

Google map

Booking Form

To change the email in the booking form, open index.html in Sublime text editor


Modify the form spree URL.

Booking email


To change the subscription URL for the newsletter, you will need a MailChimp account.

Follow the MailChimp guide for setting up the initial form.

When you get the HTML for the embeddable form, grab the following 2 values from all the code:

Embeddable Newsletter HTML

Once you have these values, open the index.html file.


Replace the form action URL (line 317) and form bot input value (line 329) with your own.



Thank you for your support and if you have any further questions, please feel free to email me.