Cycling HTML Template Documentation & User Guide

  1. Contents
  2. Introduction
  3. Terminology
  4. Toggle
  5. Tooltip
  6. Carousel
  7. Icons
  8. Buttons
  9. Lazyload
  10. Google map
  11. Credit

Introduction

Thanks for purchasing Cycling HTML template by Pixudio. This documentation will give you an overview of the template's main features and how they can be customised to suit your requirements. This guide assumes basic knowledge of HTML & CSS.

We have endeavoured to make this documentation as comprehensive as possible but understand that at times, you many need to contact us for additional support. You can reach out for this support by opening a ticket at our dedicated forum on Ticksy. You will need your purchase code in order to signup, you can find this here.

Using an html template

Cycling is an HTML template - this means that all domain and hosting should be organised by you.

F.A.Q

Terminology

For you to get the most out of reading this document, we'll introduce some of the terminology used throughout so you'll be able to follow exactly what is meant.

Conventions used in this documentation

Toggle

Toggles are useful for containing large chunks of information in discrete portions and letting the user decide what is relevant to them — alternative to bombarding them with a wall of text. A toggle also helps to keep the visual layout of the page uncluttered and more visually balanced.

Markup

The toggle element is structured using a div and functions by the user clicking on the its child's data-toggle trigger to collapses / uncollapses trigger's closest parent which the has same class as triggers attribute data-toggle value.

<div class="collapsible">
  <!-- Your content -->
  <button data-toggle="collapsible">Trigger</button>
</div>

Tooltip

Tooltips are useful for showing additional information as text labels that appear when the user hovers over or touches an element.

Markup

A tooltip can be attached to any element that user can hover over or touch it, simply by adding data-tooltip attribute.

<button data-tooltip="Life is a beach!">⛱</button>

Icons

Icons serve different purposes depending on where they are used - often they are used as decoration, to illustrate a particular service for example. In other cases icons are used to help users navigate a site (a downward arrow denoting a dropdown menu for example).

Markup

Icons use the i.material-icons element and require a specific text depending on which icon set is in use.

<i class="material-icons md-24">face</i>
Class Modifiers

You can scale icons size by adding the following classes to any i.material-icons element:

Buttons

Buttons are used in various places throughout the template to implore the user to continue exploring other parts of the site, or to call them to perform an action such as sign up, book now, become a member etc.

Markup

Buttons are housed in a basic a element.

<a class="btn btn-primary btn-large" href="#">Sign up</a>
Class Modifiers

You can modify buttons by adding the following classes to an a.btn element:

Lazyload

Lazyloads images or iframes loads only when the users need them to display. In this way, user won’t have to wait for all the elements in the page to be loaded and therefore, can start using the web page sooner. The user will be seeing only the images above the fold. The rest will come as soon as user scrolls.

Markup

A lazyload element uses the class lazyload in conjunction with a data-src and/or data-srcset attribute. Optionally you can also add a src attribute with a low quality image.

<img
class="lazyload"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="image.jpg"
data-srcset="image.jpg 1800w, image-1600x900.jpg 1600w, image-1280x720.jpg 1280w, image-768x432.jpg 768w"
width="1920"
height="1080"
alt="">

Google map

Cycling offers the use of two different Google map implementations. Iframe maps are basic maps embedded directly from Google's Maps service https://www.google.com/maps, while Google API maps require an API key but allow color styling of the map, removal of obtrusive UI elements and the ability to specify your own map marker, placed in multiple locations on the map.

When to use Javascript API
When to use an Iframe embed
Obtaining a Google Maps API Key

Follow Google's instructions here on how to obtain an API key. When you have your key, proceed to the next section to learn how to set up your pages with the API key and the map.

Inserting your API Key

Replace the API key with YOUR_API_KEY:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>

Credit