Analysing the Starter Template

We have provided a skeleton template code below for you to copy. Follow this guide to understand and make a quick start.


For HTML Users/Customizers

We have used some common plugins in all our themes. We have linked their path in the starter base code. You can copy the below code and start to create a new page in no time.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> Page Title </title>
    <link rel="shortcut icon" href="image/png/favicon.png" type="image/x-icon">

    <!-- Bootstrap , fonts & icons  -->
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./fonts/icon-font/css/style.css">
    <link rel="stylesheet" href="./fonts/typography-font/typo.css">
    <link rel="stylesheet" href="./fonts/fontawesome-5/css/all.css">

    <!-- Plugin'stylesheets  -->
    <link rel="stylesheet" href="./plugins/aos/aos.min.css">
    <link rel="stylesheet" href="./plugins/fancybox/jquery.fancybox.min.css">
    <link rel="stylesheet" href="./plugins/nice-select/nice-select.min.css">
    <link rel="stylesheet" href="./plugins/slick/slick.min.css">

    
    <!-- Vendor stylesheets  -->
    <link rel="stylesheet" href="./plugins/theme-mode-switcher/switcher-panel.css">
    <link rel="stylesheet" href="./css/main.css">

    <!-- Custom stylesheet -->
  </head>
  <body data-theme-mode-panel-active data-theme="light">
    <div class="site-wrapper overflow-hidden">
      





    </div>

    <!-- Plugin's Scripts -->
    <script src="./plugins/jquery/jquery.min.js"></script>
    <script src="./plugins/jquery/jquery-migrate.min.js"></script>
    <script src="./js/bootstrap.bundle.js"></script>
    <script src="./plugins/fancybox/jquery.fancybox.min.js"></script>
    <script src="./plugins/nice-select/jquery.nice-select.min.js"></script>
    <script src="./plugins/aos/aos.min.js"></script>
    <script src="./plugins/counter-up/jquery.counterup.min.js"></script>
    <script src="/plugins/counter-up/waypoints.min.js"></script>
    <script src="./plugins/slick/slick.min.js"></script>
    <script src="./plugins/skill-bar/skill.bars.jquery.js"></script>
    <script src="./plugins/isotope/isotope.pkgd.min.js"></script>
    <script src="./plugins/theme-mode-switcher/gr-theme-mode-switcher.js"></script>
    
    <!-- Activation Script -->
    <script src="js/menu.js"></script>
    <script src="js/custom.js"></script>
  </body>
</html>

    

For Nunjucks Users/Customizers

For Nunjucks interested users, We have provided a skeleton template file named template.njk in app/partials/template.njk to use.

To use the template.njk and Nunjucks, simply open a file in app in .njk format. Then copy and paste the below code in your new .njk file.

        
  <!-- Extend template.njk to use template.njk's code -->
  {% extends "template.njk" %}

  

  
  {% block plugincss %}
  <!-- If you need to link any plugin css file other than 
  already linked plugins (e.g. aos library, slick slider, data fancybox),  
  link the css file here -->
  <!-- Linking example given below -->
  {% endblock %}

  {% block main %}

    <!-- This is the main block where you should input 
    your code/markup and your code should be processed 
    as wrapped inside a div with the "site-wrapper" class -->

  {% endblock %}


  {% block pluginjs %}
  <!-- If you need to link any plugin js file other than 
  already linked plugins (e.g. aos library, slick slider, data fancybox),  
  link the js file here. 
  It will be injected/inserted right before 
  body closing tag and your activation script. -->
  <!-- Linking example given below -->
  <!--  <script src="plugins/slick/slick.min.js"></script>  -->
  {% endblock %}