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

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
Dark theme

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

Copy
gulp build --dark
OR use npm command.
Copy
npm run build:dark
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/
|   ├── audio/
|   ├── images/
|   ├── js/
|   ├── scss/
|   ├── vendors/
|   |   ├── bootstrap/
|   |   └── remixicon/
|   ├── 404.html
|   ├── about.html
|   ├── add-event.html
|   ├── add-music.html
|   ├── album-details.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="Listen App - Online Music Streaming App Template">
    <meta name="keywords" content="music template, music app, music web app, responsive music app, music, themeforest, html music app template, css3, html5">

    <title>Listen App - Online Music Streaming App</title>

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

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

    <!-- Styles -->
    <link rel="stylesheet" href="css/plugins.bundle.css" type="text/css">
    <link rel="stylesheet" href="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=Open+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    ...
</head>
<body>

    <!-- Line loader [[ Find at scss/framework/loader.scss ]] -->
    <div id="line_loader"></div>

    <!-- Start:: loader [[ Find at scss/framework/loader.scss ]] -->
    <div id="loader">
        <div class="loader">
            <div class="loader__eq mx-auto">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <span class="loader__text mt-2"></span>
        </div>
    </div>
    <!-- End:: loader -->

    <!-- Start:: wrapper [[ Find at scss/framework/wrapper.scss ]] -->
    <div id="wrapper">
    
        <!-- Start:: sidebar [[ Find at scss/framework/sidebar.scss ]] -->
        <aside id="sidebar">...</aside>
        <!-- End:: sidebar -->
    
        <!-- Start:: header [[ Find at scss/framework/header.scss ]] -->
        <header id="header">...</header>
        <!-- End:: header -->
        
        <!-- Start:: page content [[ Find at scss/framework/wrapper.scss ]] -->
        <main id="page_content">

            <!-- Hero [[ Find at scss/framework/hero.scss ]] -->
            <div class="hero" style="background-image: url(...);"></div>

            <!-- Start:: under hero [[ Find at scss/framework/hero.scss ]] -->
            <div class="under-hero container">

                <!-- Start:: section [[ Find at scss/framework/section.scss ]] -->
                <div class="section">...</div>
                <!-- End:: section -->

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

            </div>
            <!-- End:: under hero -->

            <!-- Start:: footer [[ Find at scss/framework/footer.scss ]] -->
            <footer id="footer">...</footer>
            <!-- End:: footer -->

        </main>
        <!-- End:: page content -->

    </div>
    <!-- End:: wrapper -->

    <!-- Start:: player [[ Find at scss/framework/player.scss ]] -->
    <div id="player">...</div>
    <!-- End:: player -->

    <!-- Backdrop [[ Find at scss/framework/wrapper.scss ]] -->
    <div id="backdrop"></div>

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

</body>
</html>