Quick Start

Basic Installation

Steps to be follow for getting started with the static template:

Get details about Requirements, Basic Installation, Structure, Color mode, Logo, favicon and loader setup your project with easy steps.

Requirement

This template have required 2 depandency

  1. NodeJS
  2. Gulp

File Structure

Here is the general File structure of the template:

  • Template
    • gulp+hbs
      • src
        • assets
          • css
          • scss
          • js
          • images
          • vendor
        • template
          • app
            • all app html pages
          • backend
            • all backend html pages
      • gulp
        • all gulp task here
      • JsonData
        • all sidebar list item come with json file
      • gulp.config.json
      • gulpfile.js
      • package.json
    • html
      • assets
        • css
        • js
        • images
        • vendor
      • app
        • all app html pages
      • backend
        • all backend html pages
    • documentation
      • asset
      • index.html

Installation

Steps to be follow for getting started with the template:

Gulp

  1. Start command prompt window or terminal and change directory gulp+hbs
    cd gulp+hbs
  2. Install via the npm
    npm install
  3. For development
    npm run dev
    OR
    gulp watch
  4. For build
    npm run build
    OR
    gulp build

HTML

  1. Open html Folder to find all the Templates Files
  2. You'll have to upload these file using a FTP on your server
  3. 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/app -App Folder
    • HTML/backend/index.html - Index File/Homepage
    Other files can be used according to your convenience.
  4. Now that you have followed these steps your basic installation is complete and ready to flaunt your site to the world.

Customization

There are some customization like change color, logo, loader, favicon, default mode (dark or light) etc...

Color

Themes values are in string type.
  • - For theme there are 3 choices given below:

    "theme_scheme": "light",
    choices: 'light', 'dark', 'auto'

Here is the Change color of template in gulp

Go to src/assets/scss/_custom_variable.scss and add some color variable.

$primary-light:rgba($primary, .2);
$primary: #50b5ff;
$primary-dark: #2aa3fb;
You can work on theme_scheme using the Setting Panel in the given below ways:
  1. You can change the themes with the property name and its value here by declaring property name and its values in gulp.config.json file.
    - This is the example of gulp.config.json file.
    "options":{
       "saveLocal": "sessionStorage",
       "storeKey": "huisetting",
       "setting":{
          "theme_scheme": { "value": "light" }
       }
    },
You can change the theme with a single action.
  1. By adding some classes in body tag . Example is given bellow.

    Themes

    If you wish to change the theme, you can follow the below action.

    For example you have to set theme as dark then you will have to add dark class at body tag.

    - For theme color as dark
    <body class="..... dark">
       .......
    </body>
    - For theme color as white
    <body class="..... light">
       .......
    </body>
    - For theme color as auto.
    <body class="..... auto">
       .......
    </body>

Theme Direction

Themes values are in string type.
  1. For direction of theme there are 2 choices given below:

    "theme_scheme_direction": "ltr",
    choices: 'ltr', 'rtl'
  2. If you wish to change the theme direction, you can follow the below action.

    You can work on theme_scheme_direction using the Setting Panel in the given below ways:
    1. You can change the themes with the property name and its value here by declaring property name and its values in gulp.config.json file.
      - This is the example of gulp.config.json file.
      "options":{
         "saveLocal": "sessionStorage",
         "storeKey": "huisetting",
         "setting":{
            "theme_scheme_direction": { "value": "ltr" },
         }
      },

    For example you have to set theme direction as ltr then you will have to add ltr at html tag.

    - For theme direction as left
    <html dir="ltr">
       .......
    </html>
    - For theme direction as right
    <html dir="rtl">
       .......
    </html>

Sidebar Appearance

  1. sidebar_type

    - For sidebar type there are 3 options given below: Values are in array.
    "sidebar_type": "sidebar-mini",
    choices: 'sidebar-hover', 'sidebar-mini','sidebar-soft'
    
  2. sidebar_menu_style

    - For sidebar menu-style there are 4 options given below: Values are in string.
    "sidebar_menu_style": "navs-rounded",
    choices: 'navs-rounded', 'navs-rounded-all', 'navs-pills', 'navs-pill-all'
    
You can work on sidebar_type & sidebar_menu_style using the Setting Panel in the given below ways:
  1. You can change the themes with the property name and its value here by declaring property name and its values in gulp.config.json file.
    - This is the example of gulp.config.json file.
    "options":{
       "saveLocal": "sessionStorage",
       "storeKey": "huisetting",
       "setting":{
          "sidebar_type": { "value": ["sidebar-mini"] },
          "sidebar_menu_style": { "value": "navs-rounded" },
       }
    },

Manual


You can change the sidebar layouts with a single action.
  1. By adding some classes in sidebar parent section. Example is given bellow.
  2. Sidebar Style

    If you wish to change the sidebar style, you can follow the below action.

    For example you have to set sidebar style as mini then you will have to add sidebar-mini class at data-toggle="main-sidebar" of the sidebar.

    - For sidebar style as mini
    <aside class=" ...... sidebar-mini" data-toggle="main-sidebar" data-sidebar="responsive">
       .......
    </aside>
    - For sidebar style as hover
    <aside class=" ...... sidebar-hover" data-toggle="main-sidebar" data-sidebar="responsive">
       .......
    </aside>
    - For sidebar style as soft effect
    <aside class=" ...... sidebar-soft" data-toggle="main-sidebar" data-sidebar="responsive">
       .......
    </aside>

    Sidebar Active Menu Style

    If you wish to change the sidebar active menu style, you can follow the below action.

    For example you have to set sidebar active as rounded then you will have to add navs-rounded class at data-toggle="main-sidebar" of the sidebar.

    - For sidebar active as rounded one side
    <aside class=" ...... navs-rounded" data-toggle="main-sidebar" data-sidebar="responsive">
       .......
    </aside>
    - For sidebar active as rounded all
    <aside class=" ...... navs-rounded-all" data-toggle="main-sidebar" data-sidebar="responsive">
       .......
    </aside>
    - For sidebar active as one side pill
    <aside class=" ...... navs-pill" data-toggle="main-sidebar" data-sidebar="responsive">
       .......
    </aside>
    - For sidebar active as pill all
    <aside class=" ...... navs-pill-all" data-toggle="main-sidebar" data-sidebar="responsive">
       .......
    </aside>

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"/>

In Gulp version favicon change with 2 diffrent way

  1. Replace favicon image or rename favicon icon name. or go to src/template/partials/backend/head.hbs file and change.

  2. Go to gulp.config.json and add or change path set with images so you dont need to add images/favicon.ico faviconName: "{faviconImage}.ico"

Loading Transitions

Page Loading Transitions are enabled by default. If you wish to disable the page loading transition you can simply delete below section

<div id="loading">
   <div id="loading-center">
   </div>
</div>

In gulp version loader change with 2 diffrant way

  • Replace loader image. or go to src/template/partials/backend/loader.hbs file and change.
  • Go to gulp.config.json and add or change path set with images so you dont need to add images/loader.gif loaderName: "{loaderImage}.gif"

For Changing Fonts

You can add/change the site font, from all fonts used from Google Web Font Services, with the one that suits you the best. You can find the font link in top of the Style.css in all HTML file. See example below:

<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">

To include new font you can simply add another link like this:

<!-- google font -->
<!--Robaoto font -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500&display=swap" />
<!--"Nunito",sans-serif font -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;1,200;1,300;1,400;1,600&display=swap" rel="stylesheet" >

In order to change the fonts, you will need to edit the above links with your custom font, You can easily use Google Web Font Services if you plan to use a Google Font or remove it completely. If you plan to use a self hosted font, here is an Example of using Self Hosted Fonts

In gulp+hbs version change with scss file.

  1. Go to src/assets/scss/helper/_fonts.scss and change google fonts
    <!-- google font -->
    <!--Robaoto font -->
    @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500&display=swap")
    <!--"Nunito",sans-serif font -->
    @import ("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;1,200;1,300;1,400;1,600&display=swap")
    
  2. Go to src/assets/scss/_variable.scss and change font family variable
    $font-family-title: 'Roboto', sans-serif;
    $font-family-base: 'Nunito', sans-serif;

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>
<!-- preloader -->
<div  id="loading" > [LOADER CONTENT] </div>
<!--preloader -->
<!--header -->
<header>
</header>
<!--header -->
<!--Slider- -->
<div id="rev_slider_1_1_wrapper" class="rev_slider_wrapper fullscreen-container" >
[SLIDER CONTENT]
</div>
<!--Slider -->
<!--main-content- -->
<div class="main-content">
<!--Section 1 -->
<section>
[SECTION 1 CONTENT]
</section>
<!--Section 1 -->
<!--Section 2 -->
<section>
[SECTION 2 CONTENT]
</section>
<!--Section 2 -->
<div>
<!--main-content -->
<!--footer -->
<footer class="iq-footer2">
[FOOTER_CONTENT]
</footer>
<!--footer -->
<div id="back-to-top">
[BACK TO TOP CONTENT]
</div>
[PAGE JAVASCRIPTS HERE]
</body>
</html>

CSS Structure

Here is the general CSS structure of the template:

<!-- libs CSS -->
<link rel="stylesheet" href="../assets/css/libs.min.css">
<!-- socialv CSS -->
<link rel="stylesheet" href="../assets/css/socialv.css?v={{version}}">
<!--fontawesome CSS -->
<link rel="stylesheet" href="../assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
<!-- line-awesome CSS -->
<link rel="stylesheet" href="../assets/vendor/line-awesome/dist/line-awesome/css/line-awesome.min.css">
<!-- remixicon CSS -->
<link rel="stylesheet" href="../assets/vendor/remixicon/fonts/remixicon.css">

Javascript Structure

Here is the general Javascript structure of the template:

<!-- libs JS -->
<script src="../assets/js/libs.min.js" ></script>
<!-- slider  -->
<script src="../assets/js/slider.js"></script>
<!-- Masonary JavaScript -->
<script src="../assets/js/masonry.pkgd.min.js"></script>
<!-- Masonary JavaScript -->
<script src="../assets/js/masonry.pkgd.min.js"></script>
<!--SweetAlert JavaScript -->
<script src="../assets/js/sweetalert.js"></script>
<!--customizer JavaScript -->
<script src="../assets/js/customizer.js"></script>
<!--Chart weather JavaScript -->
<script src="../assets/js/charts/weather-chart.js"></script>
<!-- app JavaScript  -->
<script src="../assets/js/app.js" ></script>

Helper classes

For section padding

You can add this helper class to set section padding top 100px and padding bottom 100px.
Add overview-block-ptb class in section tag. See example below:

<section class="... overview-block-ptb">
   [YOUR CONTENT]

</section>

Note Use this helper class to maintain all page section spacing. You can also use overview-block-pt for only padding top and overview-block-pb for only padding bottom.

For Text color

You can use color in the Text. simply add .main-color ( or any color you want) class where you want to use. See example below:

<div class="main-color">
   [YOUR TEXT CONTENT]
</div>

Note We include 4 color helper class in our template text-gray, text-black, main-color and text-white. you can add unlimited color class according to your needs.

For Background color

You can use color in the background. simply add .white-bg (or any color you want) class where you want to use. See example below:

<div class="green-bg">
   [YOUR CONTENT]
</div>

Note We include 4 color helper class in our template text-gray, text-black, main-color and text-white. you can add unlimited color class according to your needs.

For Background Images and pattern

You can use an image in the background with parallax effect by simply adding InlineStyle in div tag and by use of this you can create your own background. See example below:

<div style="background-image:url(Path); ">
   [YOUR CONTENT]
</div>

If your background is small and you want to use repeated background then use styling property background-repeat and set the value repeat or no-repeat. See the example below:

<div style="background-image:url(Path); background-repeat:no-repeat;">
   [YOUR CONTENT]
</div>

If you want to use your background like cover or cointainer. You just need to add styling property background-size and set the value cover or cointainer. see the example below:

<div style="background-image:url(Path); background-size:cover;">
   [YOUR CONTENT]
</div>

For Background overlay

You can use these .iq-over-black-30, .iq-over-white-20, .iq-over-green-90 classes to any element in your HTML code to apply overlay color on any image or section. See example below:

<div class="iq-over-black-80">
   [YOUR CONTENT]
</div>

Structure: .iq-over-{color}-{opacity}. For Example, .iq-over-black-80

Bootstrap Components

Color Customizer

Color Customizer has been set through root variable using scss

The color are mention at the variable file in the customizer folder.

$colors-name: ('primary', 'info') !default;
   $custom-colors: (
      "theme-color-blue": map-merge($colors,(
         "primary": #4285F4,
         "info": #EA4335 ,
   )),
);

color and divided in two parts: shade means darker and darker color, and tint means lighter and lighter colors.

:root {
   @mixin custom-color-variables($color-name: 'primary',$color-value: $primary) {
      --#{$variable-prefix}heading-color: #{shade-color($color-value, 80%)};
      --#{$variable-prefix}#{$color-name}: #{$color-value};
      --#{$variable-prefix}#{$color-name}-shade-80: #{shade-color($color-value, 80%)};
      --#{$variable-prefix}#{$color-name}-shade-60: #{shade-color($color-value, 60%)};
      --#{$variable-prefix}#{$color-name}-shade-40: #{shade-color($color-value, 40%)};
      --#{$variable-prefix}#{$color-name}-shade-20: #{shade-color($color-value, 20%)};
      --#{$variable-prefix}#{$color-name}-tint-90: #{tint-color($color-value, 90%)};
      --#{$variable-prefix}#{$color-name}-tint-80: #{tint-color($color-value, 80%)};
      --#{$variable-prefix}#{$color-name}-tint-60: #{tint-color($color-value, 60%)};
      --#{$variable-prefix}#{$color-name}-tint-40: #{tint-color($color-value, 40%)};
      --#{$variable-prefix}#{$color-name}-tint-20: #{tint-color($color-value, 20%)};
      --#{$variable-prefix}#{$color-name}-rgb: #{to-rgb($color-value)};
   }
   @include custom-color-variables('primary',$primary);
   @include custom-color-variables('info',$info);
}
You can work on theme_color using the Setting Panel in the given below ways:
  1. You can change the themes with the property name and its value here by declaring property name and its values in gulp.config.json file.
    - This is the example of gulp.config.json file.
    "theme_color": {
       "colors": {
           "--bs-primary": "#50b5ff",
           "--bs-info": "#d592ff"
       },
       "value": "theme-color-default"
    },

For Sliders

There 2 different sliders for you to be used on any page with variety of Options. List of the Sliders:

  • Owl carousel

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.


Images



Scripts



CSS & Fonts

Change Log

Version 5.2.0
07/05/2024
  • [Updated]: Bootstrap To v5.3
  • [Updated]: Setting Customizer
  • [Fixed]: Minor bugs
Version 5.1.4
04/04/2023
  • [Supported]: Laravel 10 Compatible
Version 5.1.3
01/03/2023
  • [Updated]: React Customizer Fixing
  • [Fixed]: React Router
  • [Fixed]: React FSLightBox
Version 5.1.2
15/02/2023
  • [Fixed]: Design Fixed
  • [Upgraded]: React Router
Version 5.1.1
16/11/2022
  • [Fixed]: Design Fixed
Version 5.1.0
01/11/2022
  • [New]: search modal
  • [Updated]: Bootstrap 5.2
  • [Fixed]: Responsive
  • [Fixed]: NPM error on vue
  • [Fixed]: Remove deprecated dependency on VUE
  • [Fixed]: Design issue
Version 5.0.2
19/07/2022
  • [Fixed]: Bugs
  • [Updated]: Setting panel
  • [Updated]: SCSS
Version 5.0.1
05/07/2022
  • [Fixed]: Bug
Version 5.0
18/06/2022
  • [Added]: Multiple sidebar styles
  • [Updated]: Icons
  • [Updated]: Color customizer
  • [Updated]: Layout
  • [Updated]: VUE, React, Laravel, etc
  • [Updated]: Sidebar structure
  • [Fixed]: Profile page
  • [Fixed]: Responsive design
  • [Fixed]: Minor bugs
  • [Working]: Auth module
Version 4.8
13/05/2022
  • [Updated]: React package
  • [Updated]: Boostrap
  • [Fixed]: Minor bugs
Version 4.7
28/01/2022
  • [Fixed]: Minor Issue in Html
Version 4.6
06/01/2022
  • [New]: Page add in Vue
Version 4.5
31/12/2022
  • [Removed]: 100% JQuery from BS5 vue
Version 4.4
07/12/2021
  • [Fixed]: Minor bugs
Version 4.3
04/12/2021
  • [Added]: New Page
  • [Updated]: HTML, react, vue, laravel
Version 4.2
21/09/2021
  • [Added]: React Version
Version 4.1
20/08/2021
  • [Added]: 2 New layouts and a new page in all versions of BS5
  • [Changed]: Container style
Version 4.0
20/08/2021
  • [Added]: Bootstrap 5 Version
  • [Added]: Laravel Version
Version 3.2
14/05/2021
  • [Fixed]: Scrollbar Issue
Version 3.1
10/05/2021
  • [Added]: Blog Pages In Vue
  • [Added]: Store Pages In Vue
Version 3.0
10/11/2020
  • [Added]: Add 4 pages in html
  • [Fixed]: Bugs
Version 2.0
23/04/2020
  • [New]: Vue JS Version
  • [New]: Vue JS Dark Version
  • [New]: Vue JS RTL Version
Version 1.1
03/04/2020
  • [New]: Dark Version
Version 1.0
01/04/2020
  • Initial Release