Intro to Foundation | Lesson #115
Adding On To A Great Foundation
A step by step guide to extending upon Foundation’s ZURB Stack.
Requirements: The ZURB Stack. If you don’t have this already, you can install it using the Foundation CLI with these instructions.
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
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
Make sure to add the import into the app.scss file.
That’s pretty much it! You can add the carousel to your page, save, and see it run!
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.
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.
Product Design Lessons, Direct to Your Inbox
We're just getting started, so sign up and we'll keep you in the know with our product design lessons. No spam here.