Integrating JavaScript into your pattern library

Walk through the process of integrating JavaScript into your pattern library: both JavaScript you’ve written & 3rd-party JavaScript.


We’re going to explore how to include JavaScript in our pattern library, specifically how to integrate the form validation helper.

But some of you may want to include more JavaScript in the future—so this will help you set it up.

  1. Type it, type it real good

    Remember the purpose of this lesson is to type the code out yourself—build up that muscle memory in your fingers!

1 Download the form validation helper

Let’s start some JavaScript integration in our pattern library by including the form validation helper that we previously explored. It will be very helpful when completing our form patterns.

Download form-validation-helper »

Make sure to press “Download ZIP” instead of what we normally press.

2 Move & rename the code file

Inside the download package there is a file named index.js—that’s the file that we need.

But keeping it called index.js isn’t helpful for us—it’s not descriptive enough.

So, let’s move it and rename it:

  1. ecommerce-pattern-library
  2. css
  3. images
  4. _patterns
  5. js Make a new js folder in your repo
  6. form-validation-helper.js Move index.js here & rename it
  1. Make a new js folder within your ecommerce-pattern-library folder.
  2. Then move the form validation helper’s index.js into your new js folder.
  3. Rename index.js to form-validation-helper.js

3 Make a main JavaScript file

Integrating JavaScript into our pattern library follows the identical format to CSS: a main.js file with a bunch of includes inside it.

  1. ecommerce-pattern-library
  2. css
  3. images
  4. _patterns
  5. js
  6. form-validation-helper.js
  7. main.js A brand new file

Inside your code editor, make a new file and immediately save it to your js folder named exactly main.js—this will be the shared JavaScript code file, just like our main.css

Now add this code into your main.js file:


{% include_relative form-validation-helper.js %}
{% pattern_js %}

We can add JavaScript files in our patterns the same way we add CSS files: just right inside the pattern’s folder.

  1. Line E

    This will look inside every pattern you have for .js files and include them into this location.