Craigs Documentation

HTML Template

About

This is a documentation for Craigs HTML template. It means that it is a static HTML template and it's not compatible with WordPress. You need to have some basic knowledge about HTML, CSS and JavaScript language.

Use Localhost and API Key!

In order to run this template with Google Maps properly, you need to use Localhost, for example XAMPP and you need to obtain a Google Maps API Key

Basic HTML structure

<!doctype html>
<html lang="en-US">
<head>

 <!-- CSS, Fonts, Title -->
 ...

</head>

<body>
    <!-- MAIN PAGE WRAPPER -->
    <div class="page">

        <!-- HEADER & HERO -->
        <header class="hero"></header>

        <!-- MAIN CONTENT -->
        <section class="content"></section>

        <!-- FOOTER -->
        <footer class="footer"></footer>

    </div>

  <!-- Javascripts -->
  ...
 
</body>
</html>

List, Grid & Masonry Listing

Default Size

Items (Ads) can be displayed in three different styles: grid, listing or masonry

.grid

Items will be displayed as a grid

<div class="items grid"> ... </div>

.list

Items will be displayed as list.

<div class="items list"> ... </div>

.masonry

Items will be displayed as masonry.

<div class="items masonry"> ... </div>

Compact Size

.grid .compact

Items will be displayed as a compact grid

<div class="items grid compact"> ... </div>

.list .compact

Items will be displayed as a compact list.

<div class="items list compact"> ... </div>

NoteMasonry listing has no "compact" option

Responsive Grid Listing Settings

You can set how the grid list will be displayed on different screen resolutions using these classes:

XL resolution

.grid-xl-4-items .grid-xl-3-items .grid-xl-2-items

LG resolution

.grid-lg-4-items .grid-lg-3-items .grid-lg-2-items

MD resolution

.grid-md-4-items .grid-md-3-items .grid-md-2-items

XS Resolution (mobile)

grid will have always 100% width.

Example

In this example, items will be displayed as 4 in XL resolution, 3 in LG resolution and 2 in MD resolution.

    <div class="items grid grid-xl-4-items grid-lg-4-items grid-md-4-items"></div>

Background Class

You can set a background image or color for .block, .hero-wrapper or any other relative positioned element.

Background Color

Use data-background-color attribute for color.

<section class="block">
    ...
    <div class="background" data-background-color="#fff"></div>
</section>

Background Image

<section class="block">
    ...
    <div class="background">
        <div class="background-image">
            <img src="assets/img/background-image.jpg" alt="">
        </div>
    </div>
</section>

Important: If your background image is dark, use has-dark-background class

Hero Image Background

Here is an example of using .background-image class for Hero header.

<header class="hero has-dark-background">
        <div class="hero-wrapper">
            ...
            <div class="background">
                <div class="background-image">
                    <img src="assets/img/hero-background-image.jpg" alt="">
                </div>
            </div>
        </div>
</header>

Google Maps API Key

A first step if you want to use Google Maps is to get an API key from this link.. Otherwise you'll get grey map and Oops! Something went wrong. message.

Then on every page where with the map find this code at the bottom of the page:

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

Where replace text YOUR_API_KEY with your own API you've get.

Hero Map & Database

Hero Google map in index-3.html page uses external MySQL database.

<script>
    var latitude = 40.7344458;
        var longitude = -73.86704922;
        var mapElement = "map-homepage";
        var mapDefaultZoom = 13;
        var mapAutoZoom = false;
    heroMap(latitude,longitude, mapElement, mapDefaultZoom, mapAutoZoom);
</script>

Where latitude and longitude represents a center of the map.
mapAutoZoom enables or disables auto zooming on all visible markers.

Database

You need to run this template on some Localhost server. For example XAMPP. Example databse is located ad assets/example_database.

To change the database login credentials and name, find the assets/php/data.php file, where you can change:

$serverName = "localhost";
$username = "root";
$password = "";
$databaseName = "craigs_database";

Google Map

To display Google map you need to create an element with the map class and with unique ID and .height-***px class for defining a height of the map. Read more here about height CSS class.

<div class="map height-300px" id="your-map-id"></div>

Then at the bottom of the page after <script> list enter this code:

<script>
    var latitude = 51.511971;
    var longitude = -0.137597;
    var markerImage = "assets/img/map-marker.png";
    var mapTheme = "light";
    var mapElement = "your-map-id";
    simpleMap(latitude, longitude, markerImage, mapTheme, mapElement);
</script>

Note Map can have light and dark theme. If you use dark theme, use also markerImage = "assets/img/map-marker-w.png";

CSS

.has-dark-background use when you have element with a dark background.

.block gives an element padding top and padding bottom

.box gives an element padding, white background and shadow

.center centers a text or an inline element

.no-shadow disables shadow on element

.height-100px give element 100px height

.height-150px

.height-200px

.height-250px

.height-300px

.height-350px

.height-400px

.height-450px

.height-500px

.opacity-5 opacity 0.05

.opacity-10 opacity 0.1

.opacity-20

.opacity-30

.opacity-40

.opacity-50 opacity 0.5

.opacity-60

.opacity-70

.opacity-80

.opacity-90 opacity 0.9

.text-align-right

.text-align-left

columns-4 set 4 columns dor ul, ol, dd elements

columns-3 set 3 columns dor ul, ol, dd elements

columns-2 set 2 columns dor ul, ol, dd elements

Forms

Submit Form

When you open source code of submit.html and find a .form-submit form, you can see several .form-slide elements in .from-slides#category-tabs. This slides with different inputs for each category are dynamically changed when user changes the .change-tab <select> element. Only input data from active tab are sent through form. Other inputs are disabled.

There also two hidden inputs:

#latitude
#longitude

Which are passed in case you need these data in the databse.

Email Form

First of all, you need to edit your incoming email address. Open assets/php/email.php and change this email address:

$to = 'hello@example.com';

Email forms needs to have .email class:

<form class="form email"></form>

Then these variables are passed to PHP file located at assets/php/email.php:

$_POST['name']
$_POST['subject']
$_POST['email']
$_POST['phone']
$_POST['message']

These are default, but you can add your own. For example we want two new inputs for the Newsletter. You can check this in the index-2.html when you find Get the Latest Ads in Your Inbox. Here is the select and input field which we want to collect. We have named them:

<select name="newsletter_category"> ... </select>

<input name="newsletter_email" type="email">

Now open assets/php/email.php and check the code:

if( isset($_POST['newsletter_category']) ){
    $subject = 'Newsletter subscriber from Craigs';
    $category = $_POST['newsletter_category'];

    $body .= "";
    $body .= "Category: ";
    $body .= $category;
    $body .= "\n\n";
}
if( isset($_POST['newsletter_email']) ){
    $email = $_POST['newsletter_email'];

    $body .= "";
    $body .= "Email: ";
    $body .= $email;
    $body .= "\n\n";
}

Variables newsletter_category and newsletter_email are passed via $_POST and sent to your email address.

Enable Search in Select element

The template uses Selectize.js plugin for styling select HTMl elements. You can enable searching through the select options by adding data-enable-search="true" to your <select>.

Prior to v 1.0.3

In the earlier version of the template, there was data-disable-search="true" used. Now disabled search in select elements is by default.