Ascension 1.0 - Template Documentation

How to use and customize an existing template

This page explains how to find a template you like and customize that to your liking. It covers both basic and advanced methods.

Using the basic workflow

In order to get started, you must first find a template you like. For that, the easiest way is to check out the official demos. The HTML files you received (Fig. 1) have the exact same structure as the demos, but contain placeholder images due to copyright limitations.

The dist folder structure
Fig. 1) The dist folder structure.

Once you found a template you like, do the following:

  1. Rename that file to index.html.
  2. Open the file in your code editor of choice.
  3. Make any changes you see fit and preview the final result in a browser.
  4. Make sure you're also changing the information contained in the head portion of your document: title, description and author.
  5. Once you're happy with the result, upload that HTML file along with the assets/ folder to your live server.

Tip: The markup for all pages is written in a modular fashion so you can mix and match sections to your liking. Each major section/module starts with a comment (Fig. 2). I'm doing this to divide the code into manageable chunks.

Each major block starts with a comment
Fig. 2) Each major block starts with a comment.

Using the advanced workflow

The advanced workflow gives you more flexibility when customizing an existing template. If you don't know how to get started, check out the dedicated documentation page. Then, here's what you need to do:

  1. Find a template you like by checking out the demos.
  2. Find that template under src/pages/.
  3. Rename that file to index.html.
  4. Make the necessary changes as you see fit. You might need to edit partial files.
  5. To get the best experience, execute the gulp command in the terminal. This will watch and compile HTML files and you can see the results live in the browser.
  6. Once you're happy with the result, execute npm run build to create the production files and copy only the ones you need to the live server.
  7. Alternatively, use the npm run deploy command to build the production files and upload them automatically to your server.