The great thing about Foundation is that it’s made to be yours. This means there is thought and effort put into making changes, customizing, and especially extending Foundation easily accessible. Have a favorite image carousel, lazy loading plugin, or animation library? No problem — you can create your own custom build of Foundation to suit your own needs. In this lesson, you’ll learn how to add in a third party plugin with CSS and JavaScript and make Foundation uniquely yours.

Requirements: The ZURB Stack. If you don’t have this already, you can install it using the Foundation CLI with these instructions.

For our example we’ll use Owl Carousel, a touch enabled jQuery plugin that lets you create a responsive carousel slider. It has a CSS file and JavaScript so it makes a great example to work from.

1. We’ll use the built in included Bower package manager to install this plugin:

bower install OwlCarousel --save

This will place the files in the right place for you. You will find the OwlCarousel file in bower_components and the dependency is added into the bower.json file.

2. We’ll add the new JS files in the config.yml file next.

Note: You’ll need to restart Gulp npm start after this change.

3. You’ll find the CSS in the bower_components → OwlCarousel → owl-carousel → owl.carousel.css file. Copy this.

We’ll paste the CSS into a SCSS partial. To keep things organized, 3rd party plugins should be separated into a vendor folder. In your src folder → assets → SCSS, let’s create a vendor folder.

In your vendor folder, we’ll created a SCSS partial to paste in our CSS. We’ll name is _owlcarousel.scss

Make sure to add the import into the app.scss file.

4. Now we’ll initialize the JavaScript plugin. Open the app.js file in the assets → js folder. After Foundation is initialized, we’ll initialize the plugin.

That’s pretty much it! You can add the carousel to your page, save, and see it run!

---