Theming Drupal 8 with Zurb Foundation 6

This is a follow-up post to my earlier article on theming D8 with Foundation 5.. a lot of the basics of Drupal theming are shown there.  Here I just want to document what I'm doing on a new project, where this time I'm using Foundation 6.  So I'll note the differences I see. 

Setting up Drupal for Local Dev / Theming

First since I'm setting up a new Drupal 8 site for local development, I want to make sure that I deactivate all the caching that's going on. I've found these instructions to be helpful.  In your sites/default/ dir, make sure you have

• services.yml (copied from default.services.yml)
• settings.php (copied from default.settings.php)
• settings.local.php (copied from /sites/example.settings.local.php)

I'm making use of the "settings.local.php" file, which has this line: 

My development.services.yml file is found at /sites/development.services.yml (as shown above) and I added the twig debug statement to it: 

And the last thing, in order to tell Drupal to use your local settings, make sure you uncomment these lines at the bottom of your settings.php file: 

It's also in settings.local.php where I place my local database connection info, so I don't need to change the connection once I push to the production server (just don't push settings.local.php to the production server). 

Downloading and installing Foundation: 

I went to the "Download Foundation" page and chose the "Install via Sass" option. Here's a direct link:  http://foundation.zurb.com/sites/docs/installation.html

This time around I chose the manual setup, git cloning the "Basic Template".  I put my repo into [web_root]/themes/[mytheme]

After you clone the git repo, you follow these steps shown: 

cd projectname
npm install
bower install

Once all the dependencies are installed, you can delete Foundation's index.html file - unless you want to hang on to it for reference.  You could also just rename it something like "foundation-example.html".  Also, since I'm going to track this entire project with git, I delete the .gitignore file in this theme directory.  Then in Drupal's .gitignore I added the following lines: 

themes/node_modules
themes/npm-debug.log

Where F5 used Compass (built with Ruby) to compile the SASS, F6 uses Node (npm).  I wasn't using a ton of Compass mixins, but every once in a while I did.. so we'll have to see how that works out.   If you don't want to use npm as your sass compiler, you could still compile with Compass, you would just need to add the config.rb file.  But we have npm here, so I'll use it. 

At this point all I have in my Drupal themes folder are the F6 files like so: 

"qmatters" is the name of my custom theme.  Now I'm going to add in the needed Drupal theme files (info.yml, libraries.yml, and .theme).  I'm also creating the templates directory, and adding the logo image file, and the theme screenshot and favicon.

I'll go through each of these files.  The theme.info.yml file for this project looks like this: 

With a library file reference here, and several regions for the HTML. This is very similar to what I described in my earlier article about theming in D8, so reference that if you have questions.  The library file (theme.libraries.yml) is here: 

There's a couple CSS docs shown that are commented out, as I might want to use those later.  And still bringing in jQuery from the core as a dependency.  The problem we have now however is that Foundation 6 uses a newer version of jQuery, and jquery_update module isn't quite ready for D8 yet.  After a bit of research I added this function in my qmatters.theme file: 

function qmatters_js_alter(&$javascript, \Drupal\Core\Asset\AttachedAssetsInterface $assets) {
  // Swap out jQuery to use an updated version of the library.
  $javascript['core/assets/vendor/jquery/jquery.min.js']['data'] = drupal_get_path('theme', 'qmatters').'/bower_components/jquery/dist/jquery.min.js';
}

And finally one more thing to add:  In Foundation, the app.js file has a single command: 

$(document).foundation();

We just need to wrap that into an anonymous JS function like so: 

(function($) {
    $(document).foundation();
}(jQuery));

Seems to do the trick.. my Drupal admin toolbar is happy, and Foundation is happy.  Now, I think we're ready to start styling.  Remember that to compile the SCSS files with Foundation 6 you need to go to your theme's directory in command line, and run "npm start" (as opposed to "compass watch" if you were used to using compass).

Using Foundation Topbar

I found it easiest to break up my topbar code between a couple different Drupal twig templates: page.html.twig, and menu--main.html.twig.  Here is some of the code in the page template that relates to topbar: 

And then here is the rest of it inside the menu template:

Most of that code is already in the template, you just need to modify it a bit to add a few tags and classes. That's it for now - I'm still working on my theme, but hopefully this has been helpful to someone!