Streamit - Responsive Bootstrap 4 Template

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

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
      - images
        
        All images regarding this templates
        
        icon.png
        
        favicon.ico
        
        loader.gif
      - js
        
        all .js files of templates
      - scss
        
        bootstrap
        
        forms
        
        helper
        
        mixins
        
        utilites
        
        vendor
        
        custom
        
        pages
        
        slider
        
        ui-kit
        
        widget
        
        streamit-design-system
        
        components
        
        helper
        
        plugins
        
        variables
        
        variables.scss
        
        variables-dark.scss
        
        root.scss
      - vendor
      - video
    - templates
      - components
        
        partials
        
        header
        
        footer
        
        components based on hbs file templates
        
        widgets
        
        widgets regarding this templates will get here
      - layout
        
        layout regarding this templates
      - pages
        
        All pages regarding this templates
  - gulp
    - all gulp task here
  - gulp.config.json
  - gulpfile.js
  - package.json
- html
  - assets
    - css
      - all css files
    - images
      - images regarding this templates
    - js
      - all js files
    - vendor
    - all pages regarding templates

Installation

Steps to be follow for getting started with the template:

Gulp

Start command prompt window or terminal and change directory gulp+hbs
```
cd gulp+hbs
```
Install via the npm
```
npm install
```

For development

npm run watch:theme

npm run watch:dashboard

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

Customization

Theme Colors

Steps to be follow for theme 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

$theme-colors: (
    $primary:       #e50914;
    $secondary:     #6c757d;
    $success:       #14e788;
    $info:          #007aff;
    $warning:       #ecba12;
    $danger:        #545e75;
    $light:         #e9ecef;
    $dark:          #000;
    $gray:          #6c757d;
    $gray-dark:     #343a40;
    );

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 delete below section

 <div id="loading" style="background: var(--iq-body-bg) url(../assets/images/loader.gif) no-repeat scroll center center;">
    <div id="loading-center">
    </div>
</div>

For Logo

The Logo Container can be found in the Header Container - #header. Replace "logo-black.png" with your own logo image URL.

 <div class="logo-default">
    <a class="navbar-brand text-primary" href="./index.html"> 
        <img class="img-fluid logo" src="./assets/images/logo.webp" loading="lazy" alt="streamit" />
    </a>
</div>
<div class="logo-hotstar">
    <a class="navbar-brand text-primary" href="./index.html"> 
        <img class="img-fluid logo" src="./assets/images/logo-hotstar.webp" loading="lazy" alt="streamit" />
    </a>
</div> 
<div class="logo-prime">
    <a class="navbar-brand text-primary" href="./index.html"> 
        <img class="img-fluid logo" src="./assets/images/logo-prime.webp" loading="lazy" alt="streamit" />
    </a>
</div> 
<div class="logo-hulu">
    <a class="navbar-brand text-primary" href="./index.html"> 
        <img class="img-fluid logo" src="./assets/images/logo-hulu.webp" loading="lazy" alt="streamit" />
    </a>
</div>

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:

 <!-- google font -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300&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" />

<!-- popins font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500&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

HTML Structure

Here is the general HTML structure of the template:

<!doctype html>
<html lang="en" dir="<!-- rtl OR ltr compare -->">
<head>
    [Page meta, page css, page js files, page title etc...]
</head>
<body class=" <!-- dark or light mode compare -->">
    <!-- 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]
                    [SUB-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" />

<!-- Library / Plugin Css Build -->
<link rel="stylesheet" href="./assets/css/core/libs.min.css" />

<!-- font-awesome css -->
<link rel="stylesheet" href="./assets/vendor/font-awesome/css/all.min.css" />

<!-- Iconly css -->
<link rel="stylesheet" href="./assets/vendor/iconly/css/style.css" />

<!-- Animate css -->
<link rel="stylesheet" href="./assets/vendor/animate.min.css" />

<!-- SwiperSlider css -->
<link rel="stylesheet" href="./assets/vendor/swiperSlider/swiper.min.css">

<!-- Streamit Design System Css -->
<link rel="stylesheet" href="./assets/css/streamit.min.css?v=1.0.0" />

<!-- Custom Css -->
<link rel="stylesheet" href="./assets/css/custom.min.css?v=1.0.0" />

<!-- Rtl Css -->
<link rel="stylesheet" href="./assets/css/rtl.min.css?v=1.0.0" />

Javascript Structure

Here is the general Javascript structure of the template:

<!-- Library Bundle Script -->
<script src="./assets/js/core/libs.min.js"></script>

<!-- SwiperSlider Script -->
<script src="./assets/vendor/swiperSlider/swiper.min.js"></script>

<!-- Lodash Utility -->
<script src="./assets/vendor/lodash/lodash.min.js"></script>

<!-- External Library Bundle Script -->
<script src="./assets/js/core/external.min.js"></script>

<!-- countdown Script -->
<script src="./assets/js/plugins/countdown.js"></script>

<!-- utility Script -->
<script src="./assets/js/utility.js"></script>

<!-- Setting Script -->
<script src="./assets/js/setting.js"></script>
<script src="./assets/js/setting-init.js" defer></script>

<!-- Streamit Script -->
<script src="./assets/js/streamit.js" defer></script>
<script src="./assets/js/swiper.js" defer></script>

Header & Footer Style

Steps to be follow for getting started with the template:

Default Header

Here is the design for the default header :

Dynamic Header

Here are the steps to follow to change the header page-wise :

Default Footer

Here is the design for the default footer :

Dynamic Footer

Here are the steps to follow to change the footer page-wise :

For Swiper Slider

This excellent carousel slider can be controlled using HTML5 data attributes.

Find the full online Swiper Slider Documentation.

For Video Js

This excellent carousel slider can be controlled using HTML5 data attributes.

Find the full online video js Documentation.

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.:

Tool

Gulp
Node

Images

Scripts

Plugins

Data Table

CSS & Fonts

Change Log

Version 5.2.0

25/04/2024

Update: Dashboard Bootstrap To v5.3
Fixes: Theme bugs

Version 5.1.0

30/11/2023

Update: bugfixed
Update: Bootstrap v5 To v5.3

Note:

Version 5.0.0

17/11/2023

Added: Handlebar JavaScript templating system
Added: Gulp uses JavaScript code to run front-end tasks
Added: Featuring options to customize theme colors, menu colors, menu styles, active menu styles, layout styles, and directions.
Updated: Latest Framework Bootstrap 5.0
Updated: CSS style change with latest SCSS Advance Styling
Fixing : Full Code Optimize fast and reliable

Note:

Version 4.2.0

04/05/2023

Fix: Laravel 10 supported

Version 4.1.0

08/09/2022

Update : React-17 to React-18

Version 4.0.0

01/04/2022

Html slick to swiper slider bracking changes
Added 5+ new page
Laravel working role based auth, user, permission module

Version 3.3.0

12/08/2021

Added: RTL support for Laravel
Added: RTL support for NUXT

Version 3.2.0

10/08/2021

Added: RTL support for HTML & Vue

Version 3.1.0

14/05/2021

VUEJS auth layout issue fixed

Version 3.0.0

24/11/2020

Added Nuxt Version
Changes Slider button in HTML & VUE
Fixed Vue Responsive Issue

Version 2.0.0

21/09/2020

Added Vue Version
Fixed Minor Issue

Version 1.0.0

29/08/2020

Initial release of Streamit