Product Design Lessons

Intro to Foundation  |   Lesson #115

Adding On To A Great Foundation

A step by step guide to extending upon Foundation’s ZURB Stack.

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!

Next Steps

Foundation is more than a CSS framework. It’s a foundation for which to build your own brand identity from and create great things. You can add and extend Foundation to meet your needs on every project. Now that you have the tools to properly extend the ZURB Stack go grab your favorite plugins and make Foundation yours.

Boost your skills in our Introduction to Foundation 6 course

Achieve maximum thrust by learning how to use Foundation 6 to power your projects. The Foundation team will get you up to speed on everything you need to know to get the most out of Foundation 6.

About the instructor


Rafi Benkual oversees the Foundation Forum. Rafi managed people, stores and small organizations before joining ZURB as our Foundation Advocate.