Documentation
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
- Gulp is a toolkit to automate & enhance your workflow for development.
File Structure
Here is the general file structure of the template:
- Theme
- gulp+scss+hbs
- src
- assets
-
images
- favicon.ico
- loader.gif
-
js
- app.js
- all .js files of Theme
-
scss
-
bootstrap
- forms
- helper
- mixins
- utilites
- vendor
-
custom
- components
- helper
- layout-style
- pages
- plugins
- variables
- variables.scss
- foodsto.scss
-
bootstrap
-
images
- vendor
- assets
- templates
-
layout
- default.hbs
-
pages
-
theme
- all folders based on hbs file in theme
- index.hbs
-
theme
-
partials
- components
- theme
-
layout
- src
- gulp
- all gulp task here
- gulp.config.json
- gulpfile.js
- package.json
- gulp+scss+hbs
- html
- assets
- images
- js
- css
- vendor
- theme
- all theme html folder based pages
- assets
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
gulp watch
- For build
npm run build
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
- Now that you have followed these steps your basic installation is complete and ready to flaunt your site to the world.
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: #3bb77e;
$secondary: #ffba43;
$danger: #ff0000;
);
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
or
simply remove loader component folder inside components
<div id="loading">
<div id="loading-center">
<img src="images/loader.gif" alt="loder">
</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.png" 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 atscss/_variables.scss
Here is the Change font from template in gulp+scss+hbs
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
$font-family-sans-serif:'Inter', sans-serif;
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/libs.min.css">
<!-- fontawsome Css Build -->
<link rel="stylesheet" href="./assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
<!-- Custom Css -->
<link rel="stylesheet" href="./assets/css/foodsto.css?v=1.0.0">
Javascript Structure
Here is the general Javascript structure of the template:
<!-- Library Bundle Script -->
<script src="./assets/js/libs.min.js"></script>
<!-- GSAP Animation JS-->
<script src="./assets/vendor/gsap/gsap.min.js"></script>
<script src="./assets/vendor/gsap/ScrollTrigger.min.js"></script>
<!-- app Script -->
<script src="./assets/js/app.js" defer></script>
<!-- Gsap Animation Init -->
<script src="./assets/js/hero.js" defer></script>
<!-- Slider Script -->
<script src="./assets/js/slider.js" defer></script>
GSAP Animation
Use the required class varient (e.g. vanila-datepicker, vanila-daterangepicker, datepicker-inline active ) for different datepicker. For more details
HTML Code
<div class="slider-image" id="banner-slider-image">
<img src="../assets/images/cards/2.png" class="slider-2 img-fluid"
data-iq-gsap="onStart"
data-iq-position-x="150"
data-iq-rotate="90"
data-iq-ease="
power.inOut"
alt="banner-shape-2">
</div>
Script
const gsapElem = document.querySelectorAll('[data-iq-gsap="onStart"]')
Array.from(gsapElem, (elem) => {
gsapAnimate.onStart(elem)
})
}
Fslightbox
Download library .js file from hereand add them to your code.
HTML Code
<script src="fslightbox.min.js"></script>
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.