Foundation 6 made me move over from Bootstrap with its ability to define grids in sass @include grid-column(9);. I actually never got into bootstrap at all. The bloatage was to real ;(. The best Wordpress starting theme for Foundation seems to be FoundationPress. So this is how i add Bower components (or Owl Carousel more precisely) to Foundation.

Up To Date

Since NodeJS is a bit wonky on Windows i make sure that i have the latest version of NodeJS and Bower and run npm cache cleana couple of times before i proceed. Update NodeJS on and run bower update --save-dev.

Run bower install OwlCarousel --save.
Or bower install OwlCarousel2 --save.
In the time of writing this i couldn't get the latest version of Owl Carousel 1 with Bower so i just went with the second version even though it's still in beta.

The Javascript

Hopefully the Owl Carousel files is now located in bowercomponents. Open up the Gulpfile and add the unminified (we'll let FoundationPress do the minification) file.

In the PATH object add the following line above your custom scripts in the javascript array.

// Owl Carousel


// Owl Carousel 2


This is the part where there's got to be a better way. Since Owl Carousel 1 have no SCSS files i just create a vendor folder in the SCSS folder and then i just copy in the contents from 'assets/components/owlcarousel/owl.carousel.css' into 'assets/scss/owlcarousel.scss'.

Now just add @import 'vendor/owlcarousel'; under the comment // Third-party libraries

If you use Owl Carousel 2 you can just import it directly from the components folder like this:

// Third-party libraries
@import '../components/owl.carousel/src/scss/owl.carousel';
@import '../components/owl.carousel/src/scss/owl.theme.default';

I don't import it like the other components in FoundationPress because there are some files in the SCSS directory of Owl Carousel 2 that i don't really use. If you're planning on using all files you can just import it directly from the gulpfile. Like this:

var PATHS = {
  sass: [