Folder structure
Template folder structure:
+-- app/
| +-- css/
| | +-- scss/
| | +-- source-maps/
| | +-- template.css // compiled from scss
| | +-- ...
| +-- fonts/
| +-- images/
| +-- js/
| | +-- src/
| | | +-- plugins/
| | | | +-- eg: bootstrap.js
| | | | +-- ...
| +-- vendors/
| | +-- Magnific-Popup/
| | +-- parallax-js/
| | +-- rellax-master/
| | +-- slick/
| | +-- smooth_scroll/
| +-- index.html
| +-- form.php
+-- gulpfile.js
+-- package.json
Vendors folder
This folder contains various modules used by Kyma template:
Magnific-Popup
Folder: app/vendors/Magnific-Popup
This plugin is used for images and video popup:
Parallax-js
Folder: app/vendors/parallax-js
This plugin reacts to the orientation of a smart device. Where no gyroscope or motion detection hardware is available, the position of the cursor is used instead.
It was used to accomplish the slider elements effect:
Rellax
Folder: app/vendors/rellax-master
This plugin is used to create animations for some elements when the page is scrolled.
The images parallax effect from overview section were built with this plugin.
#
Slick slider
Folder: app/vendors/slick
This plugin is used to create responsive sliders inside your website.
Smooth scroll
Folder app/vendors/smooth_scroll, this plugin performs a smooth scroll effect on your template.
You can find more about these components in https://my.hogash.com/documentation/javascript-components/