Using Zurb Foundation with Shopify

I had wanted to use the Zurb Foundation framework to build a Shopify theme for a while, but the major hurdle was getting it to work with SASS.

Sub folders cannot be created within a Shopify theme's asset folder, making it difficult to support all of the SCSS partials needed to use Foundation. 

This Shopify CSS Import guide makes it extremely easy: https://github.com/Shopify/shopify-css-import

I setup my local folder structure using the CSS Import guide. I then moved all of the Foundation SCSS files into a single css/ folder within my theme's root folder. Along with a theme.scss.liquid file.

The theme.scss.liquid file looked like this (before I removed what I didn't need):

For it to output a valid file, all partial imports should be removed from the SCSS files as well as @include exports

I then run  gulp watch  to compile all of the SCSS files into a single SCSS file called theme.scss.liquid which resides in my theme's asset folder. In a separate terminal window I was running  theme watch  to push the changes to my Shopify store.

You can now develop your theme locally with all the Foundation SCSS components intact!