Introduction

Code Layout

Code order is important for the template to function correctly. All the scripts except loader.js should be included at the end of body tag.

Reference

<!DOCTYPE html>
<html lang="en" data-footer="true">
  <head>
  
    <!-- Font Tags Start -->
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600&display=swap" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="font/CS-Interface/style.css" />
    <!-- Font Tags End -->

    <!-- Vendor Styles Start -->
    <link rel="stylesheet" href="css/vendor/bootstrap.min.css" />
    <link rel="stylesheet" href="css/vendor/OverlayScrollbars.min.css" />
    <!-- Vendor Styles End -->

    <!-- Template Base Styles Start -->
    <link rel="stylesheet" href="css/styles.css" />
    <!-- Template Base Styles End -->

    <!-- User Styles Start -->
    <link rel="stylesheet" href="css/main.css" />
    <!-- User Styles End -->

    <!-- Loader Start -->
    <script src="js/base/loader.js"></script>
    <!-- Loader End -->

  </head>

  <body>

    <!-- Content Container Start -->
    <div id="root">

      <!-- Nav Content Start -->
      <div id="nav" class="nav-container d-flex"></div>
      <!-- Nav Content End -->

      <!-- Main Content Start -->
      <main></main>
      <!-- Main Content End -->

      <!-- Footer Content Start -->
      <footer></footer>
      <!-- Footer Content End -->
      
    </div>
    <!-- Content Container End -->

    <!-- Vendor Scripts Start -->
    <script src="js/vendor/jquery-3.5.1.min.js"></script>
    <script src="js/vendor/bootstrap.bundle.min.js"></script>
    <script src="js/vendor/OverlayScrollbars.min.js"></script>
    <script src="js/vendor/autoComplete.min.js"></script>
    <script src="js/vendor/clamp.min.js"></script>
    <!-- Vendor Scripts End -->

    <!-- Acorn Icons Start -->
    <script src="icon/acorn-icons.js"></script>
    <script src="icon/acorn-icons-interface.js"></script>
    <!-- Acorn Icons End -->

    <!-- Template Base Scripts Start -->
    <script src="js/base/helpers.js"></script>
    <script src="js/base/globals.js"></script>
    <script src="js/base/nav.js"></script>
    <script src="js/base/search.js"></script>
    <script src="js/base/settings.js"></script>
    <!-- Template Base Scripts End -->

    <!-- Page Specific and Initialization Scripts Start -->
    <script src="js/common.js"></script>
    <script src="js/scripts.js"></script>
    <!-- Page Specific and Initialization Scripts End -->

  </body>
</html>