Giter VIP home page Giter VIP logo

elisa-template's Introduction

Elisa - Multipurpose Landing Template

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.

Promo Image

You can find full documentation in this repo.

Preview

Demo for this template's variants is available here

Status

GitHub license dependencies Status devDependencies Status

Usage

Required knowledge

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.

Download

To begin using this template, choose one of the following options to get started:

Getting started

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).

Building project for production

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.

Project file structure

Elisa template/
|-- components/
|   |-- common/
|   |-- headers/
|   |-- sections/
|-- Docs/
|-- img/
|-- js/
|-- less/
    |-- components/
    |   |-- sections/
    |   |-- ...
    |-- mixins.less
    |-- style.less
    |-- variable.less

Creating Landing Page

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:

  1. Choose component from our library.
  2. Insert it to the index.mustache page using the following syntax: {{> components/sections/[component-name] }}

Yes, this is so easy.

Gulp Tasks

  • gulp the default task that builds everything
  • gulp dev browserSync opens the project in your default browser and live reloads when changes are made
  • gulp sass compiles SCSS files into CSS
  • gulp minify-css minifies the compiled CSS file
  • gulp minify-js minifies the themes JS file
  • gulp copy copies dependencies from node_modules to the vendor directory

Documentation

Full documentation is available here

elisa-template's People

Contributors

haikov avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.