Masonry

Folder: app/modules/Masonry

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.

It was used to accomplish the project photos gallery:

The function responsable for the grid gallery can be found in app/js/src/script.js > enableGridGallery:

enableGridGallery: function() {
  $('.sh__gridGallery').each(function( i, el ){
  var item = $(el).find('.sh__gridItem');
  $(el).masonry({   
    itemSelector: '.sh__gridItem',
    columnWidth: '.sh__gridItem',
    horizontalOrder: true
    });
  }); 
}

#

Slick slider

Folder: app/modules/slick

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

The page slider can be setup from app/js/src/script.js .  In this file you can find the initSlider function which allows you to customize the slider settings:

self.homepageSlider.slick({
  infinite: true,
  arrows: true,
  slidesToShow: 3,
  slidesToScroll: 3,
  responsive: [
  {
    breakpoint: 768,
    settings: {
    slidesToShow: 1,
    slidesToScroll: 1
    }
  }
]
}); 

You can find more settings at http://kenwheeler.github.io/slick/

Each slider item style can be customized from css/scss/_homepage.scss

Also if you want to add more slider items in your homepage, you will have to add a new div which contain the “sh__slider-item” class inside your “sh__sliderky__slider“.

Magnific-Popup

Folder: app/modules/Magnific-Popup

This plugin is used for images and video popup, photo gallery and many others:

The photo gallery from single pages was built with this module and the specific function can be found in app/js/src/script.js > enablePopupGallery.

You can disable the photo gallery from script.js > init function> and remove the line this.enablePopupGallery();