Documentation

Preparation

Before starting to work with a template, you need to prepare. It is recommended to perform the next preparation steps:

Software

For proper work with the website template, we recommend downloading all the required software. The list of the necessary software is available on the template's preview page.

The requirements for various templates can be subject to change, so we will list the most basic ones:

  • First, you'll need proper unzipping software for password-protected sources_#########.zip package extracting. You may use WinZip 9+ (Windows) and Stuff it Expander 10+ (Mac). This is a mandatory software.
  • You might also require Adobe Photoshop (v. CS3 or higher). It is used for source .PSD files editing and is needful in case of graphic design changes performing or template images editing.
  • You should also use code editor, i. e. Sublime Text, Notepad++, Atom, etc. for template files source code editing.
  • For files uploading to server FTP manager will be also required, like FileManager at your hosting control panel or desktop applications, such as Total Commander, FileZilla, CuteFTP, etc.
  • If you are a developer or want to compile the source code, you will also need to install.Node.js.

Hosting

You can just run the file index.html directly from the site folder, but you will not see all template features. For the website to be properly displayed, you need to upload the template to a hosting server.

In case you have existing server already, please check if it meets Website Template requirements, listed at template preview page. For most templates PHP 5.2+ version is the only requirement.

You may also install Website Template to your computer locally by using localhost. In order to set up local server you may use WAMP, AppServ, MAMP or any similar software. All of them are installed same as regular application.

Feel free to check the following tutorials on how to set up local server:

Template structure

This section includes information on complete template and its separate files structure.

Package structure

After HTML Website Template package extracting you'll see the following files structure:

  • Documentation – includes template's documentation files (on template editing and setup).
  • Screenshots – includes template's sceenshots. Not to be used at live site.
  • dev – contains all files in their initial form (an abbreviation of 'development')
    • components – the folder with components
      • – the folder name matches the component name and includes the source files (any number of such folders is allowed)
        • *.pug
        • *.scss
        • *.css
        • *.js
        • *.min.js
        • *.php
    • *.html - template pages
  • dist – contains the optimized files to be sent to a server (abbreviation of 'distribution')
    • components – the folder with components
      • – the folder name matches the component name and includes the source files (any number of such folders is allowed but there can't be any *.pug and *.scss files)
        • *.css
        • *.min.js
        • *.php
    • *.html - template pages
  • package.json – file containing all necessary information about the project
  • gulpfile.js – file for generating Gulp tasks
  • config.js – file with parameters for executable Gulp tasks
  • info.txt – includes information on a password-protected "sources" folder.

HTML Structure

HTML Website Template .html pages structure is built on the following principle:

<!DOCTYPE html>
<html lang="en">
<head>

<!-- Your Stylesheets, Scripts & Title -->
  ...

  </head>
  <body>

  <!-- Page -->
  <div class="page">
  <!-- Header -->
  <header class="page-header">

  ...

  </header>

  <!-- Page Content -->

  <section>
  <div class="container">

  ...

  </div>
  </section>

  <section>
  <div class="container">

  ...

  </div>
  </section>


  <!-- Page Footer -->
  <footer class="page-footer">
  <div class="container">

  ...

  </div>
  </footer>
  </div>

  </body>
  </html>

CSS Structure

Basic HTML Website Templates styles are located in base.css file.

Our templates are divided into components. Styles for each component are located in the corresponding folder.

Template customization

Template items animation on page scroll

HTML Website Templates use Animate.css css library for the implementation of scroll animation. In order to enable scroll animation for entire page elements you should add data-animate attribute to html tag.

<html lang="en" data-animate='{"class":"fadeIn"}'>

You should also specify appropriate animation class for target item. Click here to check the list of available classes and live examples.

Source(css)

Colors

You can find the default theme colors in their visual display and the HTML color codes below. Design colors will help you to see the complete color scheme of your template and use it for the elements you might need to add.

Please mind that the block below includes the default color scheme of the template you purchased. If you change the design and choose a different color palette for your website - feel free to use it accordingly.

Default theme colors

  • #ffffff
  • #000
  • #1c54e2
  • #a4bbf9
  • #264555
  • #dde0e9
  • #f6f7f9
  • #fafafb

Photos

The images used on the demo site are for demonstration purposes only and are not included in the download files. You can pick the appropriate illustration on stock websites like the one mentioned below.

Unsplash – https://unsplash.com/

Fonts and Icons

For your convenience, we have listed the ultimate list o fonts and the font and icon toolkit used in this template`s design. You can find the import URLs in the box below. This will be useful if you would like to include some extra text in the template and follow the initial design typography. Usually, we use web safe Google web fonts and include them via embedding. Thus we can make sure that your website fonts will be displayed correctly on different devices with any browsers/operating systems used.

All icon fonts that you need can be downloaded and included to your website in a separate file for each font.

  • Gothic A1
  • Font Awesome
  • Material Design Icons

Each font is included in the script.js file as a component:

Code example 
components.fontAwesome = {                                // component name
	selector: '[class*="fa-"]',                             // css selector for including font
	styles: './components/font-awesome/font-awesome.css'    // path to file
};

components.mdi = {
	selector: '[class*="mdi-"]',
	styles: './components/mdi/mdi.css'
};

components.fontGothicA1 = {                                // component name
	selector: 'html',                                        // global selector for all files
	styles: 'https://fonts.googleapis.com/css2?family=Gothic+A1:wght@300;400;500;600;800&display=swap' // Google fonts include link
};

Source File (CSS)

The HTML template you have purchased includes a CSS base file (style sheets) which is aimed at improving its appearance on the web. It has a clean code and you can change it as far as you need to customize the overall look of your website. It helps to expand the horizons, add effects, and improve the HTML presentation.

Using the CSS source file you can customize the backgrounds, font styles, and sizes, change color schemes, blend and include the style information from different sources. If you want a little extra - you can also add custom CSS tweaks to your website using special CSS plugins.

Code example <!-- Main Styles --> <link rel="stylesheet" href="css/base.css">

Source File (JS)

Below you can find the information related to the plugins used for the default version of this theme. Thus, you can use jQuery Validation Plugin. It offers a whole set of advanced customization options for the template`s forms. One more useful feature is the Google Maps JavaScript API, which is also included. Thanks to it you can easily display your location on any of the website pages.

Code example <script src="js/core.min.js"></script> <script src="js/script.js"></script>

Customization

How to Change logo image

One of the major components of the brand identity is its logo. Here you can find the screenshot which shows how to add/change your logo image in the HEADER section of the template.

How to Change Copyright

One more important component if the copyright information which is usually put in the lower part of your website FOOTER. Look at the image below to see how to add or update the copyright information.

How to change Menu item text and Link

One more important component if the copyright information which is usually put in the lower part of your website FOOTER. Look at the image below to see how to add or update the copyright information.

Contact us

We hope that the documentation was useful and you will manage to launch a successful online project with the help of this template. If you have any queries, or if there is anything else we could help you with - contact us by pressing the button below.

Contact us

Components

All of standard components are listed on the official Bootstrap framework page

Modules

Grid System

HTML Website Templates include Bootstrap Grid system

Credits

HTML Website Templates use some external JS, PHP, CSS etc. software solutions, listed below. All of materials used are distributed for free and as an open source (MIT, CC, GPL).

CSS & Fonts

Modified font icon packages:

jQuery & Java Script

PHP