Expodash - Bootstrap5 Admin Dashboard Template.

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here.

Expodash is a clean bootstrap 5 admin dashboard and webapps template built with bootstrap latest and modern technology's. It is a fully featured dashboard and admin template comes with tones of well designed UI elements, components, widgets and applications. The template has a simple and elegant design with multi-purpose usages. Expodash is well crafted, with all the components neatly and carefully designed and arranged within most developer friendly & highly customizable template of!

# Template Features

Create your web application amazing and more professional with this super user-friendly dashboard template. NEXEL comes with all essential features that always you or your developers looking for. Build premium quality applications with mortification free UI!

# Compatibility

The term browser compatibility refers to the ability of a certain website to appear fully functional on different browsers that are available in the market. This means that the website's HTML coding, as well as the scripts on that website, should be compatible to run on the browsers.

Compatibility:

Technology:

Upcomming:

# Installation & Build

Automate time-consuming or repetitive tasks in your development workflow using Gulp. Expodash build system is a simple but powerful solution. It uses NPM scripts for its build system. To utilize the power of Gulp to achieve maximum automation to help developers saving their precious time for any kind of manual and repetitive tasks and file changes.

# Node Setup

Before installing gulp and sass first you must have NodeJs installed, NodeJS will have npm (node packaged modules).

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

Online Reference: https://nodejs.org/en/

Installing in Windows

Simply download the Windows Installer direct from the nodejs.org web site.

Installing in Mac

Simply download the Macintosh Installer direct from the nodejs.org web site.

If you want to download the package with bash:

curl "https://nodejs.org/dist/latest/node-${VERSION:-$(wget -qO- https://nodejs.org/dist/latest/ | sed -nE 's|.*>node-(.*)\.pkg.*|\1|p')}.pkg" > "$HOME/Downloads/node-latest.pkg" && sudo installer -store -pkg "$HOME/Downloads/node-latest.pkg" -target "/"

Using Homebrew:

brew install node

# SASS Setup

Before running grunt first you must check if you have sass installed in your machine. You can verify that sass is already installed by running the command.

$ sass --version

If version appear, it means sass already installed in your machine and proceed to the next topic, otherwise follow the instructions below on installing sass.

Installing in Windows

Before you start using Sass you will need to install Ruby. The fastest way to get Ruby on your Windows computer is to use Ruby Installer. It's a single-click installer that will get everything set up for you super fast.

Installing in Mac

If you prefer the command line over an application then getting Sass set up is a fairly quick process. Sass has a Ruby dependency but if you're using a Mac, congratulations, Ruby comes pre-installed.

Install SASS

Ruby uses Gems to manage its various packages of code like Sass. In your open terminal or cmd window:

$ gem install sass

You should now have Sass installed, but it never hurts to double-check.

$ sass --version

Online Reference: http://sass-lang.com/install

# Gulp Setup

Before installing gulp first you must have NodeJs installed, NodeJS will have npm (node packaged modules).

Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

Online Reference: https://gulpjs.com/

Installing the CLI

If you have previously installed a version of gulp globally, please run npm rm --global gulp to make sure your old version doesn't collide with gulp-cli.

$ npm install -g gulp-cli

Verify that gulp is successfully installed, and version of installed gulp will appear.

$ gulp --version

# Start Project

Start command prompt window or terminal and change directory to [getnexel/html/webapps] folder and run following command to install all the "dependencies and devDependencies". It could take few minutes to complete installation.

$ npm install

This will take some time and install all necessary dependencies into the node_modules directory in order for you to start developing.

Then start the development server on localhost:3000 use gulp

$ gulp

# File Structure

Understand folder structure of Expodash and everything contains with description.

Once you unzip the package from marketplace/store, you will find folder which contains precompiled and source code flavors.

• scss/, libs/, fonts/ & js/ folders are the source (src) of this template.
• assets/vendors or dist/ contains generated files from SCSS, & JS.
• assets/, html/ folder contain static css, js, html and media files.

# Quick Start

Below code is used at the beginning of all HTML pages to detect Internet Explorer browser version and set a spesific class applied to Internet Explorer versions. The base template must include all the assets commented with mandatory for all pagesin order to get the layout functioning properly. The custom assets commented with used for this page only can be skipped depending on project requirements and the assets includes must follow the below order:

# Starter Template

<!DOCTYPE html>
<html lang="zxx">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Fully Responsive Admin & Dashboard Template"
    />
    <meta name="keyword" content="" />
    <meta name="author" content="WRAPCODERS" />
    <!--! The above 6 meta tags *must* come first in the head; any other head content must come *after* these tags !-->

    <!--! BEGIN: Google Fonts !--><link
      rel="preconnect"
      href="https://fonts.googleapis.com"
    />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <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=Outfit:wght@100..900&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap"
      rel="stylesheet"
    />

    <!--! END: Google Fonts !-->

    <!--! BEGIN: Favicon !-->
    <link
      rel="shortcut icon"
      type="image/x-icon"
      href="./../assets/images/favicon.ico"
    />
    <!--! END: Favicon !-->

    <!--! BEGIN: Apps Title !-->
    <title>eCommerce | Expodash - Admin & Dashboard Template</title>
    <!--! END: Apps Title !-->

    <!--! BEGIN: Page Vendors -!-->
    <link
      type="text/css"
      rel="stylesheet"
      href="./../assets/vendors/apexcharts/apexcharts.css"
    />
    <!--! END: Page Vendors -!-->

    <!--! BEGIN: MatisMenu CSS -!-->
    <link rel="stylesheet" href="./../assets/vendors/metismenu/metisMenu.min.css">
    <!--! END: MatisMenu CSS -!-->

    <!--! BEGIN: Flaticon CSS -!-->
    <link rel="stylesheet" href="./../assets/vendors/@flaticon/flaticon-uicons/css/all/all.css">
    <!--! END: Flaticon CSS -!-->

    <!--! BEGIN: Theme CSS -!-->
    <link rel="stylesheet" type="text/css" href="./../assets/css/theme.min.css">
    <!--! END: Theme CSS -!-->

    <!--! Start:: Color Modes JS -!-->
    <script src="./../assets/js/color-modes.min.js"></script>
    <!--! End:: Color Modes JS -!-->

    <!--! HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries !-->
    <!--! WARNING: Respond.js doesn"t work if you view the page via file: !-->
    <!--[if lt IE 9]>
      <script src="https:oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https:oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

  </head>

  <body>
    <!--! ================================================================ !-->
    <!--! Start:: Main Wrapper !-->
    <!--! ================================================================ !-->
    <div class="main-wrapper">
      <!--! ================================================================ !-->
      <!--! Start:: Main Menu !-->
      <!--! ================================================================ !-->
      <aside
        class="edash-menu position-fixed z-1030 start-0 top-0 end-0 bottom-0 bg-body-tertiary border-end"
        id="edash-menu"
      >
        <!-- Start::  Sidebar Nav -->
        <nav
          class="edash-sidebar-nav position-relative z-2"
          id="edash-sidebar-nav"
          style="height: calc(100vh - 5rem)"
        >
        </nav>
        <!-- End:: Sidebar Nav -->
      </aside>

      <!--! ================================================================ !-->
      <!--! End:: Main Menu !-->
      <!--! ================================================================ !-->
      <!--! ================================================================ !-->
      <!--! Start:: Main Content !-->
      <!--! ================================================================ !-->
      <main id="edash-main">
        <!--! ================================================================ !-->
        <!--! Start:: Header !-->
        <!--! ================================================================ !-->
        <header
          class="edash-header sticky-top d-flex align-items-end ht-80 ht-md-90"
          id="edash-header-sticky"
        >
          <div
            class="edash-header-container container-xxl w-100 ht-70 px-4 bg-body-tertiary border rounded-3 d-flex align-items-center justify-content-between position-relative"
            id="edash-header-container"
          >
            <!--! Start:: edash-header-left !-->
            <div class="edash-header-left d-flex align-items-center gap-2">

            </div>
            <!--! End:: edash-header-left !-->
            <!--! Start:: edash-header-right !-->
            <div class="edash-header-right d-flex align-items-center gap-1 gap-sm-2">

            </div>
            <!--! End:: edash-header-right !-->
          </div>
        </header>

        <!--! ================================================================ !-->
        <!--! End:: Header !-->
        <!--! ================================================================ !-->
        <!--! ================================================================ !-->
        <!--! Start:: Page Content !-->
        <!--! ================================================================ !-->
        <div
          class="edash-page-container container"
          id="edash-page-container"
        >
          <!--! Start:: Breadcumb !-->
          <div class="edash-content-breadcumb row mb-4 mb-md-6 pt-md-2">

          </div>
          <!--! End:: Breadcumb !-->
          <!--! Start:: Content Section !-->
          <div class="edash-content-section row g-3 g-md-4">


          </div>
          <!--! End:: Content Section !-->
        </div>
        <!--! ================================================================ !-->
        <!--! End:: Page Content !-->
        <!--! ================================================================ !-->
        <!--! ================================================================ !-->
        <!--! Start:: Footer !-->
        <!--! ================================================================ !-->
        <footer
          class="edash-footer-container container-xxl d-flex align-items-center justify-content-between rounded-3 p-4 mx-auto mb-3 mb-md-4 ht-64 bg-body-tertiary"
          id="edash-footer-container"
        >
        
        </footer>

        <!--! ================================================================ !-->
        <!--! End:: Footer !-->
        <!--! ================================================================ !-->
      </main>
      <!--! ================================================================ !-->
      <!--! End:: Main Content !-->
      <!--! ================================================================ !-->
      <div class="edash-menu-backdrop" id="edash-menu-hide"></div>
    </div>
    <!--! ================================================================ !-->
    <!--! End:: Main Wrapper !-->
    <!--! ================================================================ !-->
    <!--! ================================================================ !-->
    <!--! Footer Script !-->
    <!--! ================================================================ !-->
    <!--! BEGIN: Common Vendors !-->
    <script src="./../assets/js/vendors.min.js"></script>
    <!--! END: Common Vendors !-->

    <!--! BEGIN: Apps Common Init  !-->
    <script src="./../assets/js/common-init.min.js"></script>
    <!--! END: Apps Common Init  !-->


    <!--! BEGIN: Page Vendors -!-->
    <script src="./../assets/vendors/apexcharts/apexcharts.min.js"></script>
    <script
      src="./../assets/vendors/js-circle-progress/circle-progress.min.js"
      type="module"
    ></script>
    <!--! END: Page Vendors -!-->

    <!-- BEGIN: Init JS -->
    <script src="./../assets/js/dashboards/ecommerce-init.min.js"></script>
    <!-- END: Init JS-->
  </body>
</html>

# Head

<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
  name="description"
  content="Fully Responsive Admin & Dashboard Template"
/>
<meta name="keyword" content="" />
<meta name="author" content="WRAPCODERS" />
<!--! The above 6 meta tags *must* come first in the head; any other head content must come *after* these tags !-->

<!--! BEGIN: Google Fonts !--><link
  rel="preconnect"
  href="https://fonts.googleapis.com"
/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<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=Outfit:wght@100..900&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap"
  rel="stylesheet"
/>

<!--! END: Google Fonts !-->

<!--! BEGIN: Favicon !-->
<link
  rel="shortcut icon"
  type="image/x-icon"
  href="./../assets/images/favicon.ico"
/>
<!--! END: Favicon !-->

<!--! BEGIN: Apps Title !-->
<title>eCommerce | Expodash - Admin & Dashboard Template</title>
<!--! END: Apps Title !-->

<!--! BEGIN: Page Vendors -!-->
<link
  type="text/css"
  rel="stylesheet"
  href="./../assets/vendors/apexcharts/apexcharts.css"
/>
<!--! END: Page Vendors -!-->

<!--! BEGIN: MatisMenu CSS -!-->
<link rel="stylesheet" href="./../assets/vendors/metismenu/metisMenu.min.css">
<!--! END: MatisMenu CSS -!-->

<!--! BEGIN: Flaticon CSS -!-->
<link rel="stylesheet" href="./../assets/vendors/@flaticon/flaticon-uicons/css/all/all.css">
<!--! END: Flaticon CSS -!-->

<!--! BEGIN: Theme CSS -!-->
<link rel="stylesheet" type="text/css" href="./../assets/css/theme.min.css">
<!--! END: Theme CSS -!-->

<!--! Start:: Color Modes JS -!-->
<script src="./../assets/js/color-modes.min.js"></script>
<!--! End:: Color Modes JS -!-->

<!--! HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries !-->
<!--! WARNING: Respond.js doesn"t work if you view the page via file: !-->
<!--[if lt IE 9]>
  <script src="https:oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https:oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

</head>

# Navigation

<!--! ================================================================ !-->
<!--! Start:: Main Menu !-->
<!--! ================================================================ !-->
<aside
  class="edash-menu position-fixed z-1030 start-0 top-0 end-0 bottom-0 bg-body-tertiary border-end"
  id="edash-menu"
>
  <!-- Start::  Sidebar Nav -->
  <nav
    class="edash-sidebar-nav position-relative z-2"
    id="edash-sidebar-nav"
    style="height: calc(100vh - 5rem)"
  >
  </nav>
  <!-- End:: Sidebar Nav -->
</aside>
<!--! ================================================================ !-->
<!--! End:: Main Menu !-->
<!--! ================================================================ !-->

# Header

<!--! ================================================================ !-->
<!--! Start:: Header !-->
<!--! ================================================================ !-->
<header
  class="edash-header sticky-top d-flex align-items-end ht-80 ht-md-90"
  id="edash-header-sticky"
>
  <div
    class="edash-header-container container-xxl w-100 ht-70 px-4 bg-body-tertiary border rounded-3 d-flex align-items-center justify-content-between position-relative"
    id="edash-header-container"
  >
    <!--! Start:: edash-header-left !-->
    <div class="edash-header-left d-flex align-items-center gap-2">

    </div>
    <!--! End:: edash-header-left !-->
    <!--! Start:: edash-header-right !-->
    <div class="edash-header-right d-flex align-items-center gap-1 gap-sm-2">

    </div>
    <!--! End:: edash-header-right !-->
  </div>
</header>
<!--! ================================================================ !-->
<!--! End:: Header !-->
<!--! ================================================================ !-->

# Content

<!--! ================================================================ !-->
<!--! Start:: Page Content !-->
<!--! ================================================================ !-->
<div
  class="edash-page-container container"
  id="edash-page-container"
>
  <!--! Start:: Breadcumb !-->
  <div class="edash-content-breadcumb row mb-4 mb-md-6 pt-md-2">

  </div>
  <!--! End:: Breadcumb !-->
  <!--! Start:: Content Section !-->
  <div class="edash-content-section row g-3 g-md-4">


  </div>
  <!--! End:: Content Section !-->
</div>
<!--! ================================================================ !-->
<!--! End:: Page Content !-->
<!--! ================================================================ !-->

# Footer

<!--! ================================================================ !-->
<!--! Start:: Footer !-->
<!--! ================================================================ !-->
<footer
  class="edash-footer-container container-xxl d-flex align-items-center justify-content-between rounded-3 p-4 mx-auto mb-3 mb-md-4 ht-64 bg-body-tertiary"
  id="edash-footer-container"
>

</footer>

<!--! ================================================================ !-->
<!--! End:: Footer !-->
<!--! ================================================================ !-->

# Scripts

<!--! ================================================================ !-->
<!--! Footer Script !-->
<!--! ================================================================ !-->
<!--! BEGIN: Common Vendors !-->
<script src="./../assets/js/vendors.min.js"></script>
<!--! END: Common Vendors !-->

<!--! BEGIN: Apps Common Init  !-->
<script src="./../assets/js/common-init.min.js"></script>
<!--! END: Apps Common Init  !-->


<!--! BEGIN: Page Vendors -!-->
<script src="./../assets/vendors/apexcharts/apexcharts.min.js"></script>
<script
  src="./../assets/vendors/js-circle-progress/circle-progress.min.js"
  type="module"
></script>
<!--! END: Page Vendors -!-->

<!-- BEGIN: Init JS -->
<script src="./../assets/js/dashboards/ecommerce-init.min.js"></script>
<!-- END: Init JS-->

# Fonts settings

To change the font-family you will have to edit the file css/style.css. If the font is a standard one, built the system by default, you can just write it here.
body { font-family: 'Public Sans', Arial, Helvetica, sans-serif; } // or whatever you want (e.g. "Outfit")

Also you can use Google Font and connect it to your website.

1. Go to: http://www.google.com/fonts.
2. Choose the appropriate font.
3. Click the Quick-use button ().
4. Choose the styles that you want;
5. Choose the character sets that you want.
6. Below that click on the @import tab and copy this line.
7. Paste this line to that css/style.css file on body tag instead of the default (e.g. font-family: 'Public Sans', Arial, Helvetica, sans-serif; )

# Source & Credit

We're very thankful to all the creative minds for their great products and plugins which are used Vuexy.

NOTE: Please note that all images used in the template are presented only for demo purposes. Images come from https://www.pexels.com/ , https://www.freepik.com/ , https://storyset.com/ .Images are subjected to the copyright of their authors. It is the responsibility of the buyer to check its copyright before usage.

# Images Credit

# Source & Credit

We've used the following images, icons or other plugins URL, License as listed.

# Plugins Credit

We've used the following images, icons or other plugins URL, License as listed.

Licenses ©

Use of an item is bound by the license you purchase. A license grants you a non-exclusive and non-transferable right to use and incorporate the item in your personal or commercial projects. There are several licenses available:

Single License Use of an item is bound by the license you purchase. A license grants you a non-exclusive and non-transferable right to use and incorporate the item in your personal or commercial projects. There are several licenses available:

Multiple License Use of an item is bound by the license you purchase. A license grants you a non-exclusive and non-transferable right to use and incorporate the item in your personal or commercial projects. There are several licenses available:

Extended License Use of an item is bound by the license you purchase. A license grants you a non-exclusive and non-transferable right to use and incorporate the item in your personal or commercial projects. There are several licenses available: