Elisa is a multipurpose landing page template built on Bootstrap 3.3.7. This responsive template comes with 8 Demo variations which can be used to build your product, service, marketing, app and SaaS landing pages.
You can find full documentation in this repo.
Demo for this template's variants is available here
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.
To begin using this template, choose one of the following options to get started:
- Clone the repo:
git clone https://github.com/insiderdev/elisa-template
- Fork, Clone, or Download on GitHub
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.less
To 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.mustache
page using the following syntax:{{> components/sections/[component-name] }}
Yes, this is so easy.
gulp
the default task that builds everythinggulp dev
browserSync opens the project in your default browser and live reloads when changes are madegulp sass
compiles SCSS files into CSSgulp minify-css
minifies the compiled CSS filegulp minify-js
minifies the themes JS filegulp copy
copies dependencies from node_modules to the vendor directory
Full documentation is available here