-
Button classes generated by $button-pallete are not prefixed with 'button'
by Negativefix on Monday, October 23, 2017 at 12:37 PM EST
You commented on
Sven's post
about 2 years
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.
You commented on
Sven's post
about 2 years
I don't think I understand the question. Do you want to choose which layout to use for a specific page or pages?
You commented on
Sensaetions's post
about 2 years
@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.
You commented on
Nick Jacobs's post
about 2 years
@John fixed it. Thanks.
You commented on
Suman Haldar's post
about 2 years
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 commented on
Nick Jacobs's post
about 2 years
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.
You commented on
Martin's post
about 2 years
@powellian webpack config is included in the gulpfile.js.
You commented on
Martin's post
about 2 years
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.
-
Why images are getting stretched inside the cards?
by Suman Haldar on Thursday, September 28, 2017 at 12:35 PM EST
-
Including JS correctly in zurb template/gulp
by Nick Jacobs on Thursday, September 21, 2017 at 1:16 AM EST
-
No Content
-
No Content
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.