Can I just say that command line and I aren’t friends? I think we have this odd relationship where we pretend we’re friends and then when it gets down to the nitty gritty, we just don’t get along.
I’m new to the Foundation framework. Although I’ve used Bootstrap in the past, for a recent WordPress project of mine, Foundation seemed to be exactly what I needed. I specifically wanted to work in Sass, and I only needed some of the framework. Extra brownie points, Foundation also supports accessibility – hurray! To set up Foundation normally with vanilla ( or just plain old css, not fancy Sass ), the instructions in Steve Zehngut’s WordPress.tv video made sense. To use the Sass version however, this is where my brain was melting…
All of a sudden I was on all these sites, Bower, Node, Ruby, use this command in terminal, then that one! What the hell are all these files in the Foundation Sass version? Which ones do I even need?! Apparently Foundation, Underscores and Sass are quite the combination and it has yet to be documented on how to integrate them together manually – until now.
Yep. With some tinkering ( and frustration ), I finally figured it out. If you’re thinking of using Foundation with Sass in your WordPress theme, and would like a step by step set of instructions all in one place, then this post is for you. And the good news – no command line necessary!
Before We Begin:
- For this tutorial, I’m using the Underscores starter theme. You don’t have to use this theme, but for the sake of reference, this is what I’m using.
- I’m not using Bower. So we don’t need Node since apparently that’s only necessary if we’re using Bower.
- These instructions are tailored for Macs. I’m sorry. T^T
- You will need a Sass Compiler if you don’t already have one. I’m using Koala. Don’t use Scout because it’s deprecated. Here’s a handy list of supported compilers. This tutorial assumes that you already have Sass installed and know how to use compilers.
- For reference, this is Foundation 5 that we’re integrating.