Folder structure

Template folder structure:


+-- app/
|   +-- css/
|   |    +-- scss/
|   |    +-- source-maps/
|   |    +-- template.css // compiled from scss
|   |    +-- ...
|   +-- fonts/
|   +-- images/
|   +-- img-assets/
|   +-- js/
|   |    +-- dist/ 
|   |   |    +-- app.js //compiled from plugins folder
|   |   |    +-- vendors.js
|   |    +-- src/
|   |   |    +-- plugins/
|   |   |   |    +-- eg: bootstrap.js
|   |   |   |    +-- ... 
|   +-- modules/
|   |    +-- Magnific-Popup/ 
|   |    +-- parallax-js/ 
|   |    +-- rellax-master/ 
|   |    +-- slick/ 
|   |    +-- smooth_scroll/ 
|   +-- blog-single.html
|   +-- blog.html
|   +-- index.html
+-- gulpfile.js
+-- package.json

Modules folder#

This folder contains various modules used by Vivid template:

Magnific-Popup#

Folder: app/modules/Magnific-Popup

This plugin is used for images and video popup:

Parallax-js#

Folder: app/modules/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 homepage slider elements effect:

Rellax#

Folder: app/modules/rellax-master

This plugin is used to create animations for some elements when the page is scrolled.

Floating elements from “Latest work” and “Amazing features section” were built with this plugin.

Slick slider#

Folder: app/modules/slick

This plugin is used to create responsive sliders inside your website.

Blog slider which is located in homepage blog section, would be a good example in this case:

Smooth scroll#

Folder app/modules/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/