Introduction

Basic tips and quick guide that will help you to build this project.

For utilizing this Template, you would require fundamental comprehension of HTML, CSS and Javascript, if you don't mind give your inquiry a brisk Google or visit W3Schools as topic issues get top need.

Installation

Template build with advanced development toolset such as Gulp, Node.js and SCSS which provide automate painful or time-consuming tasks in your development workflow.

Basically this template made using Gulp so you can get a dist/ folder after build a gulp. Use this folder to upload on your server.

Quick install

For utilizing this template you have do some basic steps that is mention below:

Node.js

For influencing utilization of this template to genuine power you'll require Gulp, and for Gulp you'll require Node.js to be installed on your system. Download the most recent rendition of Node.js from here

Recommend Node 14 latest version.

Gulp CLI

After installing Node.js, you need to install Gulp on your system. Run this below command in Terminal/CMD of your system.

Copy
npm install gulp-cli -g
Installing dependencies

Open Terminal/CMD in the tools/ folder and run this command: npm install. This command will install the dependencies required for this template, for example build tools like SASS Compiler, Autoprefixer etc.

Copy
npm install
Running the environment

To start working with the template, just open Terminal/CMD in the template folder and run gulp serve. This will start the work environment for you. Now you can edit the template in the Code Editor of your choice.

Copy
gulp serve
OR use npm command.
Copy
npm run serve
Distribution folder

To make deployable template, just open Terminal/CMD in the template folder and run this command: gulp build. This will generate dist/ folder in your template directory.

Copy
gulp build
OR use npm command.
Copy
npm run build
Production ready

To make deployable template, just open Terminal/CMD in the template folder and run this command: gulp build --prod. This will generate dist/ folder in your template directory. You can directly upload this folder to your server.

Copy
gulp build --prod
OR use npm command.
Copy
npm run build:prod

Structure

Take a look common structure of this template.

File structure

Please see below a arrangement of files for this project. You can discover this project by this folders

theme/
├── src/
|   ├── assets/
|   |   ├── images/
|   |   ├── js/
|   |   └── scss/
|   ├── vendors/
|   |   ├── bootstrap/
|   |   ├── jquery-ui/
|   |   └── stars/
|   ├── 404.html
|   ├── about.html
|   ├── add-listing.html
|   ├── blog-details.html
|   ├── blog-list.html
|   └── ...
└── tools/
    ├── gulp/
    ├── gulpfile.js
    └── package.json

Their are two main folders one is src/ and second one is gulp/. In src/ we are included all the source and gulp/ represent gulp files are necessary to build this template so Do not modify gulp/

Starter template

A common HTML code which is used in most of the HTML pages in this project. It is also a basic skeleton of this project

Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta Tag -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Seo Meta -->
    <meta name="description" content="Listigo | Directory Bootstrap 4 Template">
    <meta name="keywords" content="listing dashboard, directory panel, listing, responsive directory, directory template, themeforest, listing template, css3, html5">

    <title>Listigo | Directory Bootstrap 4 Template</title>

    <!-- Favicon -->
    <link href="assets/images/logos/favicon.png" rel="icon">

    <!-- IOS Touch Icons -->
    <link rel="apple-touch-icon" href="assets/images/logos/touch-icon-iphone.png">
    <link rel="apple-touch-icon" sizes="152x152" href="assets/images/logos/touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/images/logos/touch-icon-iphone-retina.png">
    <link rel="apple-touch-icon" sizes="167x167" href="assets/images/logos/touch-icon-ipad-retina.png">

    <!-- Styles -->
    <link rel="stylesheet" href="assets/css/plugins.bundle.css" type="text/css">
    <link rel="stylesheet" href="assets/css/styles.bundle.css" type="text/css">

    <!-- Google fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;400;600;700;800;900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap" rel="stylesheet">
    ...
</head>
<body>

    <!-- Begin | Sign in Modal -->
    <div class="modal fade" id="sign_in" role="dialog" aria-hidden="true">...</div>
    <!-- End | Sign in Modal -->

    <!-- Begin | Forgot Modal -->
    <div class="modal fade" id="forgot" role="dialog" aria-hidden="true">...</div>
    <!-- End | Forgot Modal -->

    <!-- Begin | Wrapper [[ Find at scss/frameworks/base/wrapper.scss ]] -->
    <div id="wrapper">
    
        <!-- Begin | Loading [[ Find at scss/frameworks/base/loader.scss ]] -->
        <div id="loading">...</div>
        <!-- End | Loading -->

        <!-- Begin | Header [[ Find at scss/frameworks/base/header.scss ]] -->
        <header id="header" class="plain-header fixed-top">...</header>
        <!-- End | Header -->

        <!-- Begin | Intro Section [[ Find at scss/frameworks/base/section.scss ]] -->
        <section id="intro_section">...</section>
        <!-- End | Intro Section -->

        <!-- Placed all section -->
        ...

        <!-- Begin | Footer [[ Find at scss/frameworks/base/footer.scss ]] -->
        <footer id="footer">...</footer>
        <!-- End | Footer -->

        <!-- Scroll Top [[ Find at scss/frameworks/theme/scroll-top.scss ]] -->
        <a href="#intro_section" class="btn btn-danger btn-only-icon target scroll-top">...</div>

        <!-- Begin | Sidebar [[ Find at scss/frameworks/base/sidebar.scss ]] -->
        <aside id="sidebar">...</aside>
        <!-- End | Sidebar -->

    </div>
    <!-- End | Wrapper -->

    <!-- Script -->
    <script src="assets/js/plugins.bundle.js"></script>
    <script src="assets/js/scripts.bundle.js"></script>

</body>
</html>