Axial HTML Template Quick Start Guide

This document covers the installation and use of Axial HTML Template and often reveals answers to common problems and issues – read this document thoroughly if you are experiencing any difficulties.

In the archive you will find not only the compiled JS and CSS, but also the source code: JavaScript modules and SCSS files. We recommend using Webpack and Gulp for working with project files.

Installing Template

After unzipping the downloaded pack, you’ll find a HTML Folder with all the files.
View this template in any browser, you can display or edit the Template without an internet connection.
Use your hosting File Manager or FTP access to upload project files to your server.
Once the files are done uploading, go to www.yourdomainname.com/index.html

Template Structure

All information within the main content area is nested within a body tag. The general template structure is pretty the same throughout the template. Here is the general structure of main page (index.html).

<!doctype html>
<html lang="en">

    <head>

        <title>Axial Construct</title>
        <link rel="stylesheet preload" as="style" href="css/example.css">

    </head>

    <body>

        <header class="header primary-bg">
            ...
        </header>

        <main>            
            <section class="primary-bg section">
                ...
            </section>            
        </main>

        <footer class="footer primary-bg">
            ...
        </footer>
        <button id="scrollToTop" type="button"></button>

        <script src="js/example.js"></script>

    </body>

</html>

To include some additional styles or scripts, add code fragments after the main styles and scripts of the template.

Javascript Files

The JavaScript code is distributed in separate files to avoid loading unused code.

<script src="js/common.js"></script>

The main scripts are loaded in common.js file. These are the list of JavaScript files that are loaded in end of the <body> tag.

To fine-tune the work of scripts, we recommend using a webpack. Combine all files into one JS and use it on all pages of the site if you need it.

Google Maps Integration

Plugin includes integration with Google Maps API. To use the full functionality of Google Maps, you need to Create a Project in Google Cloud Console and Get an API Key. When you get the Api Key, paste it into the file located /js/modules/map.js

const _KEY = '';

CSS and SCSS

The CSS styles distributed in separate files to avoid loading unused code by browser.

<link rel="stylesheet preload" as="style" href="css/preload.css">
<link rel="stylesheet preload" as="style" href="css/libs.min.css">

Font and Icon styles are loaded in the preload.css file. And the styles of the main libraries are loaded in the libs.css file.

You can use and edit CSS files to flexibly customize the appearance of the template. However, our recommendation is to use the SCSS files for this, which you will find in the project folder in the scss directory.

To set color or font settings go to the file /scss/base/_variables.scss and set new values for variables. To enable loading new fonts go to /scss/global/_fontface.scss.

Web Fonts

By default, the template loads the free Google fonts, you can change the font with the one that suits you best. For headings and important text used Archivo, and for regular text and body text used Roboto font.

Images

Under the terms of the license, images are not included in the package with the code. You can purchase the images you need from Envato Elements, links to all images can be found in Engineering Company collection.