Table of Contents

Introduction

This Theme is built using:

You will want to take a look at their documentation before we get started.

Files you will need to edit to customize the theme:

  • INDEX.HTML contains all the HTML structure needed to run the theme.
  • CSS/LESS:
    • Default contains some general variables and effects
    • Main contains the main styles for the theme
    • Medias contains the styles what manage the responsive
  • JS
    • Main.js contains the main functions what manage the theme
    • Charts-def.js contains the definition and data for the charts

Quick Start

Our theme has all the different cases you will want to use. The easiest way to use will be just copying and pasting, and then editing.

The site is based on sections and slides, sections move vertically and slides are subsections what move horizontally.

Here is shown the typical code for a SECTION. Check the documentation from Bootstrap to learn how we used container, row and columns classes for structure.

Each section has a different ID we use to navigate thru.

Basically the whole theme works in the same way.

Here is shown the code to use SLIDES.

Slides can contain more Bootstrap structures, imges, text, anything you need.

The Slides are always used within a Section, because they are used as subsections. They move horizontally instead of vertically.

We add the background images to SLIDES and SECTIONS by using CSS.

The styles of this theme are done by LESS. Check both LESS and CSS, al the code is commneted for an easy editing.

How to create charts? The charts are built using ChartsJS. Please take a look to the documentation to learn how to create your different Charts. In our example all charts are defined in the charts-def.js file located in the js folder.

Regarding the HTML structure, the chart is always in a section with the class "charts" and wrapped in a div called "wrap-chart". Then there is the canvas where the Chart is displayed and a div where the legend is displayed.

We show all the charts available in our example. Remember you need to edit the JS to create and add the data to the chart.

Our advise

Don't be afraid seeing so much code, play around copying, pasting and editing. That's the best away to learn how our theme works. You will figure out really fast. The theme is always using the same structure over and over. Have fun!