I would create two layouts;

A layout with offcanvas - layouts/default.html
A layout with topbar - layouts/default-w-topbar.html

I would keep pages folder structure flat (I mean you dont need to create subfolders);

page A 
page B
page C - lets say this page must use the layout with topbar -  layouts/default-w-topbar.html

In page C and all the other pages that should have topbar, add the following lines at the top of the file;
---
layout: default-w-topbar
---
layout is a page variable that stores the name of the layout to use. In this case all the pages containing the above lines will be using layout with topbar.
 
 

I don't think I understand the question. Do you want to choose which layout to use for a specific page or pages? 

@SVM I don't think Foundation templates provides the functionality you have asked. They might add it in the future.
In a small project I am currenlty working on, I'm using iconmoon to generate svg sprites. You can either pick icons from the collections they provide or upload yours. BTW they use <svg><use> method. If you are dealing with small number of icons you can take this path.
Hope it helps.
 
 

@John fixed it. Thanks.

Wrapping your image with .card-image div fixes it. It also fixes an IE browser bug as stated here.
<div class="card-image">
....yourimage here
</div>

You might want to check out this https://foundation.zurb.com/forum/posts/53526-how-to-add-npm-package-js-file-to-foundation-64 It could be useful.

@powellian webpack config is included in the gulpfile.js.

Depending on the module you want to use, steps to include it to your project might differ.  For instance I was able to include owl.carousel to my project modifiying webpack config slightly. 
To include owl in your project you are going to need imports-loader for webpack. 
npm install imports-loader
Then modify your webpack to tell it how to resolve jquery. this so thread tells it helps webpack to optimize dependencies better :/
let webpackConfig = {
resolve: {
alias: {
jquery: "jquery/src/jquery"
}
}
}
And at last import and initialize owl in your app.js file. You should also add owl module' sass path to your config yaml to make it display right.
import $ from 'jquery';
import 'imports-loader?jQuery=jquery!owl.carousel';
import whatInput from 'what-input';

window.$ = $;

import Foundation from 'foundation-sites';
// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
//import './lib/foundation-explicit-pieces';

$(function(){
var $heroSlide = $('.hero-slide').owlCarousel({
items: 1,
singleItem: true,
dots: true,
dotsContainer: '#hero-slide-dots'
});
});
In order to use owl methods, I keep a reference to carousel in $heroSlide variable. So that I can trigger events.
That's  all.