This documentation is made for describing all aspects of development your website using our beautiful theme. We've done everything we can to make this as easy as possible for you.
You may learn some basic things at w3school and MDN.
We're using the following tools to provide you with the best file scructure and an amazing development experience:
- Mustache as a template engine. Usually we're using it for including components inside the main page. It allows us to build pages easily.
- Gulp as a tasks runner.
- Less as css pre-processor.
If you already downloaded theme open your project folder and run npm install to install project's libraries.
Open your command line and run gulp and then gulp dev. This command will build the template and open it inside the browser (if not, please open http://localhost:3000 inside browser).
When you finished with your project just run gulp and your built template will be placed inside dist folder. You can upload this folder directly to your hosting via FTP.
Elisa template/
|-- components/
| |-- common/
| |-- headers/
| |-- sections/
|-- Docs/
|-- img/
|-- js/
|-- less/
|-- components/
| |-- sections/
| |-- ...
|-- mixins.less
|-- style.less
|-- variable.lessTo create a new landing page you have to edit index.mustache file inside root folder and fill it with components (all components are described below).
To add a new component to your page:
- Choose component from our library.
- Insert it to the
index.mustachepage using the following syntax:{{> components/sections/[component-name] }}
Yes, this is so easy.
We have included a subtile animations for elements while scrolling. You can also add the effect to any element by adding the following class and data-* attributes. For example you want to aplly on scroll animations to a
<div class="wow fadeInDown" data-wow-delay="0.1s">This template uses Animate.css plugin for animations. So you have the option to change the effect from any available options on Animate.css Such as fadeInDown , fadeInUp , zoomIn, bounceInDown, bounceInLeft etc. Please note that the Class names are CASE SENSITIVE.
If you don't want to use the onscroll animation, You can simply change the data-scroll-animation to false from the tag.
<!-- Change the data-scroll-animation to false -->
<body class="home" data-scroll-animation="false">Here's the list of all components you can choose.
How to include: {{> components/common/navbar-dark }}
File for HTML customization: components/common/navbar-dark.mustache
File for Styles customization: less/components/navigation.less
How to include: {{> components/common/navbar-light }}
File for HTML customization: components/common/navbar-light.mustache
File for Styles customization: less/components/navigation.less
How to include: {{> components/common/footer }}
File for HTML customization: components/common/footer-light.mustache
File for Styles customization: less/components/footer.less
How to include: {{> components/common/footer-light }}
File for HTML customization: components/common/footer.mustache
File for Styles customization: less/components/footer.less
Headers are top page component. You can choose one of the following templates and customize it for your needs:
How to include: {{> components/headers/image-gradient }}
File for HTML customization: components/headers/image-gradient.mustache
File for Styles customization: less/components/header.less edit header.general__image-gradient
Customizable LESS properties:
| Meaning | Variable name | Where to find? |
|---|---|---|
| Background image url | @header-background-image-url |
less/components/header.less line 1 |
Gradient background start color (bottom left). Default is @theme-primary |
@header-gradient-start-color |
less/components/header.less line 2 |
Gradient background end color (bottom left). Default is @theme-secondary |
@header-gradient-end-color |
less/components/header.less line 3 |
SketchApp sources for devices mockups are included in the bundle.
How to include: {{> components/headers/devices-on-right }}
File for HTML customization: components/headers/devices-on-right.mustache
File for Styles customization: less/components/header.less edit header.devices-on-right
Customizable LESS properties:
| Meaning | Variable name | Where to find? |
|---|---|---|
| Background pattern url | @header-background-pattern-url |
less/components/header.less line 4 |
Gradient background start color (bottom left). Default is @theme-primary |
@header-gradient-start-color |
less/components/header.less line 2 |
Gradient background end color (bottom left). Default is @theme-secondary |
@header-gradient-end-color |
less/components/header.less line 3 |
How to include: {{> components/headers/bottom-laptop }}
File for HTML customization: components/headers/bottom-laptop.mustache
File for Styles customization: less/components/header.less edit header.bottom-laptop
Customizable LESS properties:
| Meaning | Variable name | Where to find? |
|---|---|---|
Gradient background start color (bottom left). Default is @theme-primary |
@header-gradient-start-color |
less/components/header.less line 2 |
Gradient background end color (bottom left). Default is @theme-secondary |
@header-gradient-end-color |
less/components/header.less line 3 |
How to include: {{> components/headers/mobile-on-right }}
File for HTML customization: components/headers/mobile-on-right.mustache
File for Styles customization: less/components/header.less edit header.mobile-on-right
Customizable LESS properties:
| Meaning | Variable name | Where to find? |
|---|---|---|
Gradient background start color (bottom left). Default is @theme-primary |
@header-gradient-start-color |
less/components/header.less line 2 |
Gradient background end color (bottom left). Default is @theme-secondary |
@header-gradient-end-color |
less/components/header.less line 3 |
How to include: {{> components/headers/mobile-on-right-small }}
File for HTML customization: components/headers/mobile-on-right-small.mustache
File for Styles customization: less/components/header.less edit header.mobile-on-right-small
Customizable LESS properties:
| Meaning | Variable name | Where to find? |
|---|---|---|
Gradient background start color (bottom left). Default is @theme-primary |
@header-gradient-start-color |
less/components/header.less line 2 |
Gradient background end color (bottom left). Default is @theme-secondary |
@header-gradient-end-color |
less/components/header.less line 3 |
How to include: {{> components/headers/video-on-right }}
File for HTML customization: components/headers/video-on-right.mustache
File for Styles customization: less/components/header.less edit header.video-on-right
Customizable LESS properties:
| Meaning | Variable name | Where to find? |
|---|---|---|
Gradient background start color (bottom left). Default is @theme-primary |
@header-gradient-start-color |
less/components/header.less line 2 |
Gradient background end color (bottom left). Default is @theme-secondary |
@header-gradient-end-color |
less/components/header.less line 3 |
How to include: {{> components/sections/2-features }}
File for HTML customization: components/sections/2-features.mustache
File for Styles customization: less/components/sections/features-2.less
How to include: {{> components/sections/3-features }}
File for HTML customization: components/sections/3-features.mustache
File for Styles customization: less/components/sections/features.less
How to include: {{> components/sections/6-features }}
File for HTML customization: components/sections/6-features.mustache
File for Styles customization: less/components/sections/features.less
How to include: {{> components/sections/6-features-top }}
File for HTML customization: components/sections/6-features-top.mustache
File for Styles customization: less/components/sections/features.less
How to include: {{> components/sections/contact-with-map }}
File for HTML customization: components/sections/contact-with-map.mustache
File for Styles customization: less/components/sections/contact-with-map.less
How to include: {{> components/sections/contact-default }}
File for HTML customization: components/sections/contact-default.mustache
File for Styles customization: less/components/sections/contact-default.less
How to include: {{> components/sections/blog-1 }}
File for HTML customization: components/sections/blog-1.mustache
File for Styles customization: less/components/sections/blog-row-1.less
How to include: {{> components/sections/split-fullscreen }}
File for HTML customization: components/sections/split-fullscreen.mustache
File for Styles customization: less/components/sections/split-fullscreen.less
How to include: {{> components/sections/splash-default }}
File for HTML customization: components/sections/splash-default.mustache
File for Styles customization: less/components/sections/splash.less
How to include: {{> components/sections/splash-light }}
File for HTML customization: components/sections/splash-light.mustache
File for Styles customization: less/components/sections/splash.less
How to include: {{> components/sections/splash-dark }}
File for HTML customization: components/sections/splash-dark.mustache
File for Styles customization: less/components/sections/splash.less
How to include: {{> components/sections/newsletter }}
File for HTML customization: components/sections/newsletter.mustache
File for Styles customization: less/components/sections/newsletter.less
How to include: {{> components/sections/testimonials-default }}
File for HTML customization: components/sections/testimonials-default.mustache
File for Styles customization: less/components/sections/testimonials.less
How to include: {{> components/sections/testimonials-quotes }}
File for HTML customization: components/sections/testimonials-quotes.mustache
File for Styles customization: less/components/sections/testimonials.less
How to include: {{> components/sections/team }}
File for HTML customization: components/sections/team.mustache
File for Styles customization: less/components/sections/team.less
How to include: {{> components/sections/download-section }}
File for HTML customization: components/sections/download-section.mustache
File for Styles customization: less/components/sections/download-section.less
How to include: {{> components/sections/dsplit-feature-1 }}
File for HTML customization: components/sections/split-feature-1.mustache
File for Styles customization: less/components/sections/split-feature-1.less