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: 1,
  slidesToScroll: 1,
  vertical: true,
  speed: 1500,
  asNavFor: '.cg__slider-captions'
}); 

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

Each slider item style can be customized from css/scss/elements/_homepageSlider.scss or_gridGallery.scss, depending on the slider type.

Magnific-Popup

Folder: app/modules/Magnific-Popup

This plugin is used for images and video popup:

Video box element is enabled from app/js/src/script.js withe the following line of code: self.videoBox.magnificPopup({type:'iframe'});

Also the popup gallery is configured or disabled from enablePopupGallery function wich is can be found inside the script.js file also.

This is how the “enablePopupGallery” function looks like:

enablePopupGallery: function() {
  $('.cg__gridGallery').each(function() {
    $(this).magnificPopup({ 
      delegate: 'a',
      type: 'image',
      gallery: { 
        enabled:true 
      }
    });
  }); 
}

Each gallery is defined by the .cg__gridGallery with items wich contains a link with a “href” attribute. This attribute represents the path to the image wich will be opened in the gallery when the user click on the gallery item.

<div class="cg__gridGallery cg__gridGallery--cols3"> 
  <div class="cg__gridGallery-item"> 
    <a href="images/gall_02.jpg" class="cg__gridGallery-link sh__zoom--on">
      <span class="cg__gridImg-wrapper"> 
        <img src="images/gall_02.jpg" alt="" class="cg__gridGallery-img">
      </span> 
      <i class="cg__icon glyphicon glyphicon-search cg__circled-icon"></i>
    </a><!--/.cg__gridGallery-link--> 
  </div><!--/.cg__gridGallery-item--> 
</div>

The grid gallery style can be customized from scss/elements/_gridGallery.scss

#

Vertical timeline

Folder: app/modules/vertical-timeline

With the vertical timeline you can specify some events in a chronological order.

The vertical timeline original style can be found in modules/vertical-timeline/css/style.css

If you want to find more about the element original markup you can go to https://codyhouse.co/gem/vertical-timeline/

However there’s a new style wich can be found in css/scss/elements/_verticalTimeline.scss wich can be implmented with the .cd-timeline--style2 class.

Timeline style 2 use the following html markup:

<section id="cd-timeline" class="cd-container cd-timeline--style2">
  <div class="cd-timeline-block"> 
    <div class="cd-timeline-content"> 
      <div class="cd-timeline-icon"> </div> <!-- cd-timeline-icon -->
      <h2>[...]</h2> 
      <p>[...]</p> 
      <span class="cd-date">2001</span> 
    </div> <!-- cd-timeline-content -->
  </div> <!-- cd-timeline-block --> 
  <div class="cd-timeline-block">[...]</div> <!-- cd-timeline-block -->
  <div class="cd-timeline-block">[...]</div> <!-- cd-timeline-block -->
</section>

Animated Skills Diagram

Folder: app/modules/AnimatedSkillsDiagram

This plugin allow you to add animated skills diagrams inside your website:

The animated skills diagram style can be customized from scss > eleemnts > _skillsDiagram.scss

Also the diagram is initialized from modules/AnimatedSkillsDiagram/js/init.js

The diagram use the following sintax:

<div class="cg__skillsDiagram cg__skillsDiagram--style1"> 
  <div id="content">
    <div class="legend">
      <h1>Legend:</h1>
      <div class="skills">
        <ul>
          <li class="skill1">Intrinsicly disintermediate</li>
          <li class="skill2">[...]</li>
          <li class="skill3">[...]</li> 
        </ul> 
      </div><!--/.skills-->
    </div><!--/.legend--> 
    <div id="diagram"></div>
  </div><!--/.content-->
  <div class="get"> 
    <div class="arc"> 
      <span class="text">Intrinsicly disintermediate</span>
      <input type="hidden" class="percent" value="57" /> 
      <input type="hidden" class="color" value="#60b1d5" />
    </div><!--/.arc-->
    <div class="arc">[...]</div><!--/.arc--> 
    <div class="arc">[...]</div><!--/.arc--> 
  </div><!--/.get-->
</div><!--/.cg__skillsDiagram-->

You can find more regarding this element at: https://tympanus.net/codrops/2011/04/22/animated-skills-diagram/