Gigz

Requirement

This template has required 2 dependency

NodeJS
- Windows – Download and install node.js from https://nodejs.org/en/ Install latest LTS version
- Linux – Install with terminal by this link https://github.com/nodesource/distributions/blob/master/README.md#installation-instructions
- Mac – Download and install node.js from https://nodejs.org/en/download/ install LTS version
Gulp
- Gulp is a toolkit to automate & enhance your workflow for development.
  https://gulpjs.com/docs/en/getting-started/quick-start

File Structure

Here is the general file structure of the template:

Template
- gulp+scss+hbs
  - src
    - assets
      - scss
      - js
      - images
      - vendor
    - templates
      - layout
        
        all layout used in dashboard
      - pages
        
        all dashboard hbs folder based pages
      - partials
        
        all components and main content of dashboard
  - gulp
    - all gulp task here
  - gulp.config.json
  - gulpfile.js
  - package.json
- html
  - assets
    - css
    - js
    - images
    - vendor
  - dashboard
    - all dashboard html folder based pages

Installation

Steps to follow for getting started with the template:

Gulp

Start command prompt window or terminal and change directory gulp+scss+hbs
```
cd gulp+scss+hbs
```
Install via the npm
```
npm install
```
For development
```
npm run dev
```
OR
```
gulp watch
```
For build
```
npm run build
```
OR
```
gulp build
```

HTML

Open html Folder to find all the Templates Files
You'll have to upload these file using a FTP on your server
Make sure you maintain the structure while uploading the required files/folders:
- HTML/assets/css - Stylesheets Folder
- HTML/assets/images - Images Folder
- HTML/assets/js - Javacripts Folder
- HTML/assets/vendor - Vendor Folder
- HTML/theme - Theme Folder
- HTML/theme/index.html - Index File/Homepage
Other files can be used according to your convenience.
Now that you have followed these steps your basic installation is complete and ready to flaunt your site to the world.

Dashboard colors

Steps to be follow for dashboard colors with the template:

We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Scss variables in scss/_variables.scss file.
More Customization will be done in variable file.

Here is the Change color of template in gulp+scss+hbs

$dashboard-colors: (
    $primary:       #7B60E7;
    $secondary:     #8D8C8F;
    $danger:        #E93535;
);

For Favicon icon

Favicon is an icon associated with the URL that is displayed at various places, such as in a browser’s address bar or next to the site name in a bookmark list.

You can add a Favicon to your Website using the following code:

<link rel="shortcut icon" href="images/favicon.ico"/>

For Page Loading Transitions

Page Loading Transitions are enabled by default. If you wish to disable the page loading transition you can simply remove loader from respective layout in layouts folder

simply remove loader component folder inside components

<div id="loading">
      <div class="loader simple-loader animate__animated animate__fadeOut d-none">
          <div class="loader-body"></div>
      </div>
</div>

For Logo

The Logo component can be found in the templates/partials/components/logo.hbs with your own logo SVG image OR logo image URL.
Then user has to call logo component wherever logo has to show eg. {{> partials/components/logo }}

You can add a SVG icon to your Website using the following code:

You can add a image URL icon to your Website using the following code:

<img src="images/logo.svg" alt="logo">

Font

Steps to be followed to change font in the template:

You can define multiple sources for the same font family, each with a different fontStyle.
To change the font family you will have to import the font at scss/custom/helper/_font.scss file. You can also import particular google fonts. After adding font url you have to update that particular font at scss/_variables.scss

Here is the Change font from template in gulp+scss+hbs

_font.scss

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

_variable.scss

$font-family-sans-serif: 'Inter', sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

HTML Structure

Here is the general HTML structure of the template:

<!doctype html>
<html lang="en">
    <head>
        [Page meta, page css, page js files, page title etc...]
    </head>
    <body>
        <!-- Wrapper Start-->
            <!-- loader Start -->
            <div id="loading">
                [LOADER CONTENT]
            </div>
            <!-- loader END -->
            <!-- Sidebar Start -->
                [SIDEBAR CONTENT]
            <!-- Sidebar END -->
            <!-- Main Content Start -->
            <main class="main-content">
                <div>
                    <!--Nav Start-->
                        [HEADER CONTENT]
                    <!--Nav End-->
                </div>
                <div>
                    [MAIN CONTENT]
                </div>
                <!-- Footer Start -->
                    [FOOTER CONTENT]
                <!-- Footer END -->
            </main>
            <!-- Main Content End -->
        <!-- Wrapper End-->
    </body>
    <!-- script Start -->
            [Script CONTENT]
    <!-- script END -->
</html>

CSS Structure

Here is the general CSS structure of the template:

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

<!-- Style -->
<link rel="stylesheet" href="assets/css/libs.min.css">
<link rel="stylesheet" href="assets/css/gigz.css?v=1.0">

Javascript Structure

Here is the general Javascript structure of the template:

<!-- Backend Bundle JavaScript -->
<script src="assets/js/libs.min.js"></script>

<!-- widgetchart JavaScript -->
<script src="assets/js/charts/widgetcharts.js"></script>

<!-- fslightbox JavaScript -->
<script src="assets/js/fslightbox.js"></script>

<!--  GSAP Animation -->
<script src="assets/vendor/gsap/gsap.min.js"></script>
<script src="assets/vendor/gsap/ScrollTrigger.min.js"></script>
<script src="assets/vendor/gsap-init.js"></script>

<!--  Form Wizard Script -->
<script src="assets/js/plugins/form-wizard.js"></script>

<!-- app JavaScript -->
<script src="assets/js/gigz.js"></script>

Apexchart

ApexCharts is loaded with powerful features to fulfill your data-visualization needs. Look at some of the key features of ApexCharts. For more details

Installing via npm

npm install apexcharts --save

Usage

import ApexCharts from'apexcharts'

<> Direct <script> include

Another way is to directly include it in your html

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

HTML Code

<div id="chart"></div>

Script

var options = {
  series: [{
  name: 'Net Profit',
  data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
}, {
  name: 'Revenue',
  data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
}, {
  name: 'Free Cash Flow',
  data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
}],
  chart: {
  type: 'bar',
  height: 300,
  toolbar:{
    show: false,
  }
},
plotOptions: {
  bar: {
    horizontal: false,
    columnWidth: '80%',
    endingShape: 'rounded'
  },
},
dataLabels: {
  enabled: false
},
stroke: {
  show: true,
  width: 2,
  colors: ['transparent']
},
xaxis: {
  categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
},
yaxis: {
  title: {
    text: '$ (thousands)'
  }
},
fill: {
  opacity: 1
},
tooltip: {
  y: {
    formatter: function (val) {
      return "$ " + val + " thousands"
    }
  }
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

GreenSock

Creating world-class tools that stand up to the most rigorous implementations, Build tools that aren't just one-trick-ponies, but can be leveraged across a wide range of projects with ease. For more details

HTML Code

<svg width="30" class="gsap-animation" viewBox="0 0 128 150" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M117.348 105.33C117.594 105.476 117.669 105.799 117.508 106.036C110.26 116.759 99.5876 125.042 87.0232 129.687C74.2883 134.395 60.2849 135.117 47.0817 131.745C33.8785 128.372 22.1759 121.086 13.7027 110.961C5.22957 100.836 0.43531 88.4101 0.0282348 75.5189C-0.37884 62.6276 3.62286 49.9548 11.4421 39.3726C19.2614 28.7905 30.4835 20.8602 43.4505 16.7536C56.4176 12.6469 70.4417 12.5815 83.4512 16.5672C96.2865 20.4995 107.462 28.1693 115.375 38.4663C115.55 38.6939 115.495 39.0214 115.256 39.1813L97.3742 51.176C97.1539 51.3238 96.8567 51.2735 96.6942 51.0637C91.6372 44.53 84.5205 39.6627 76.3537 37.1606C68.031 34.6109 59.0591 34.6527 50.7636 37.2799C42.468 39.9071 35.2888 44.9804 30.2865 51.7502C25.2842 58.5201 22.7241 66.6274 22.9846 74.8745C23.245 83.1215 26.3121 91.0709 31.7327 97.5482C37.1533 104.025 44.64 108.687 53.0866 110.844C61.5332 113.002 70.4918 112.54 78.6389 109.528C86.6324 106.573 93.4288 101.316 98.0645 94.5111C98.2142 94.2913 98.5086 94.2233 98.7376 94.3583L117.348 105.33Z" fill="#FF971D"></path>
    <path d="M53.2837 0.5C53.2837 0.223858 53.5075 0 53.7837 0H75.6195C75.8957 0 76.1195 0.223858 76.1195 0.5V26.25H53.2837V0.5Z" fill="#FF971D"></path>
    <path d="M53.2837 123.75H76.1195V149.5C76.1195 149.776 75.8957 150 75.6195 150H53.7837C53.5075 150 53.2837 149.776 53.2837 149.5V123.75Z" fill="#FF971D"></path>
</svg>

Script

var t2 = gsap.timeline();
t2.to(".gsap-animation", {duration:1.5, x: 80, repeat: -1, yoyo: true});

Swiper JS

Swiper comes with a very rich API. It allows creating your own pagination, allows a multiple row slides layout, with a few slides per column. For more details

HTML Code

<div class="swiper mySwiper">
    <div class="swiper-wrapper">
    <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
    </div>
    <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
    </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
</div>

Script

var swiper = new Swiper(".mySwiper", {
    effect: "flip",
    grabCursor: true,
    pagination: {
        el: ".swiper-pagination",
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
});

Source & Credits

All images and videos are for preview purposes only and are not included in the download files. Images are of copyrights under Creative Commons CC0.

Documentation

Requirement

File Structure

Installation

Gulp

HTML

Dashboard colors

For Favicon icon

For Page Loading Transitions

For Logo

Font

HTML Structure

CSS Structure

Javascript Structure

Apexchart

Installing via npm

Usage

<> Direct <script> include

HTML Code

Script

GreenSock

HTML Code

Script

Swiper JS

HTML Code

Script

Source & Credits

Tool

Images

Scripts

CSS & Fonts