In an effort to improve the overall user experience inStore Locator Plus™, my business locator plugin for WordPress, I have been playing with pre-defined interface frameworks.   I’ve been working with Vue recently and like their pre-defined templates.  However, the MySLP version of Store Locator Plus has been built using Foundation and React.    I decided it would be a good idea to stay with Foundation to help style my interfaces in the WordPress SLP product.

I already have phpStorm setup for my WordPress development and use Sass to compile my own CSS libraries.   I wanted to add Foundation to the mix, but it turned out to take longer than I anticipated.  With any luck my cheat-sheet here may save you some time.

Foundation Location

I installed Foundation using node package manager.   I opted to put the Foundation library in a parent directory for my projects as I use it for several projects outside of Store Locator Plus.   My path is ~/WordPress/tools/ where I have an entire npm directory in place.

$ cd ~/WordPress/tools
$ npm install foundation-sites --save

This created the ~/WordPress/tools/npm/node_modules/foundation-sites/ directory where the Sass files for Foundation live.   Remember that as this is important for configuring the phpStorm file watchers.

phpStorm File Watchers

What is a file watcher?  It is a background process that runs whenever a file changes.  Great for things like compiling SCSS source files into browser-readable CSS files for your project.  I use them in phpStorm to do things like compile SCSS files then minify them or to minify JavaScript files so they are always ready for production.

Initially I was having problems with phpStorm finding the foundation library.    According to the Foundation docs, you can add @import ‘foundation’; to your SCSS file and as long as your import paths are set properly it will setup foundation within your project.

It wasn’t quite that easy.

Setting Up phpStorm Resource Directories

If you Google for a few minutes you’ll find you need to tell phpStorm which directories are to be used as resources for your project.  These are scanned but the phpStorm autocomplete and code inspection background processes to do things like mark an @import as “hey I can’t find this thing”! in order to catch problems BEFORE pushing your project down the production chain.

I added the npm directory for Foundation as a resource directory by going to the phpStorm | Preferences | Directories menu and adding ~/WordPress/tools/npm/node_modules/foundation-sites as a directory included in my project.   I then marked that directory as a resource root.    This allows @import ‘foundation’ to be marked by phpStorm as “findable” as well as the ../_vendor directory.   In reality I could have added only the scss subdirectory under ~/WordPress/tools/npm/node_modules/foundation-sites but I like to “snoop around the code” and wanted to be able to easily access all the imported files if only to read what they do.

Setting Up Sass Load Paths

phpStorm was no longer telling me it could not find the Foundation Sass files, but when it tried to auto compile via the file watcher it failed.   The compiler could not find the directory.     I had to add the library path to the Sass compiler path.    Under the Watcher panel I used Other Options and set the environment variable SASS_PATH=/Users/lancecleveland/WordPress/tools/npm/node_modules/foundation-sites/scss/.    I could have added –load-path= to the Watcher argument list, but that is pre-populated with phpStorm defaults and a proper environment variable seems “cleaner” to me.

Using Foundation

No more compilation errors, great!   Except my now-compile CSS file was only showing the Foundation header.    Well it turns out you cannot just do @import ‘foundation’ in your SCSS file.   That only loads all the functions and modules to be “ready for use” but to get any actual CSS output you need to use a Sass rule, such as a mixin, within your SCSS file.

If you want to include all of the Foundation pre-defined template rules “out of the box” you can get it all by using @include foundation-everything; in which case you end up with a very long CSS file.  Luckily when minified it comes in a relatively small 4k file.  The bigger issue is whether it ‘stomps all over’ other CSS rules in your project.

Oh, and don’t forget to download the Foundation default settings file and add it to your project.   Include it above the @import foundation.    This settings file is where you an change basic design attributes for the default Foundation “look”.

This is what I now have in the middle of my admin pages SCSS file for SLP:

// <FOUNDATION>
//
@import '../../store-locator-le/assets/sass/base/settings';
@import 'foundation';
@include foundation-everything;
// </FOUNDATION>

About MySLP

MySLP is the next generation of the Store Locator Plus™ directory builder and location management technology.   This fully managed SaaS service brings the benefits of Store Locator Plus outside of the WordPress realm and makes it available to all web and mobile platforms.

[myslp-signup-form]