Working with JavaScript

Easily work with external dependencies whilst keeping your own code modular and tidy.

Slate is setup to work with modular Javascript by using require to pull in local files or dependencies via NPM.

The example below is the JavaScript for this website. As you can see, the site is using dependencies from the node_modules folder, one local module located in ./modules/global.js, as well some code just written straight in the file. The above will get bundled with Webpack into a single file. Running yarn production will result in minified code being generated.

// Node Modules
window.$ = window.jQuery = require('jquery');
require('jquery-match-height');
require('sticky-kit/dist/sticky-kit.js');
// Modules
require('./modules/global.js');

$(function() {
  $(".subnavbar").stick_in_parent();
  // Feature Boxes
  $('.feature-teaser').matchHeight();
  // Mobile Select Menu
  $(function() {
    // bind change event to select
    $('.addon-button').click(function() {
      var url = $('.addon-field').val(); // get selected value
      if (url) { // require a URL
        window.location = url; // redirect
      }
      return false;
    });
  });
});

Built with the Best

Slate was built by Hash&Salt, a company who loves building for the internet. Using the very best in industry leading software and practices honed over the last 20 years in the industry. You're in good hands.