JavaScript

We use jQuery in all of our builds unless otherwise agreed or requested by the client.

For an example of how we structure our JS folders, please see our Gulp template which can be download via: Gulp template

All vendor files should be placed in a vendor folder as illustrated in the Gulp template.

You should then have a site.js file which incorporates vendor and non-vendor JS instance, for example:

$(document).ready(function() {
	
	// target ie
	function addIEClasses() {
		var isIE = /*@cc_on!@*/false || !!document.documentMode;
		var isEdge = !isIE && !!window.StyleMedia;
		if (isIE || isEdge) {
			$('body').addClass('ie-styles');
		}
	}
	addIEClasses();​
	
	// match height
	$('.mh').matchHeight();

	// toggle nav
	$(".masthead__toggle").click(function(event) {
		$('.masthead__nav').fadeToggle(200);
		$(this).toggleClass("active")
		$('body').toggleClass("fixed")
		$('.masthead').toggleClass("masthead--open")
		event.preventDefault();
	});
	
	// scroll to next section
	$(".hero__next").click(function(event) {
		$('html,body').animate({
			scrollTop: $(this).offset().top
            }, 300
		);
		event.preventDefault();
	});
	
	// sticky nav on scroll
	var num = 180;
	
	$(window).bind('scroll', function () {
		if ($(window).scrollTop() > num) {
			$('.masthead').addClass('masthead--fixed animated fadeInDown');
		} else {
			$('.masthead').removeClass('masthead--fixed animated fadeInDown')
		}
	});
	
	// tabs
	$('ul.tabs li').click(function(){
		var tab_id = $(this).attr('data-tab');
	
		$('ul.tabs li').removeClass('current');
		$('.tab-content').removeClass('current');
	
		$(this).addClass('current');
		$("#"+tab_id).addClass('current');
	})

});

Common jQuery libraries we use on our projects are:

• AOS (animate elements on scroll)
• Slick Slider (for sliders)
• Fancybox (for modals)
• Masonry (for staggered grid layouts)
• Isotope (similar to Masonry but with filters)
• MatchHeight (to force elements to have the same height)