Menu icon Foundation

Coder

Part-time day dreamer.

My Posts

No Content

My Comments

Negativefix commented on Sven's post 7 days

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.
 
 

Negativefix commented on Sven's post 7 days

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

Negativefix commented on SVM's post 7 days

@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.
 
 

Negativefix commented on Nick Jacobs's post 20 days

@John fixed it. Thanks.

Negativefix commented on Suman Haldar's post 20 days

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>

Negativefix commented on Nick Jacobs's post 20 days
Negativefix commented on Martin's post 20 days

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

Negativefix commented on Martin's post 21 days

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.

Posts Followed

  • 7
    Replies
  • Nested pages with Panini

    By Sven

    panini

    I have a prototype with dozens of pages. Half of them use one type of layout, another half uses another layout.&nbsp; How do I create nested pages? I tried creating subfolders /src/pages/subfolder/subpage but&nbsp; {{&gt; subfolder/subpage}} does not... (continued)

    Last Reply by Ashley Taylor 7 days ago


  • 11
    Replies
  • SVG sprites

    By SVM

    svgsvg spritefoundation sites

    I've looked and didn't find a way to use the Foundation for Sites stack to minimize and generate SVG sprites from individual svg files. Is this something that's already built into Foundation? Or do I need to create my own gulp task to minimize and genera... (continued)

    Last Reply by Ashley Taylor 7 days ago





Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Sven's post 7 days

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 7 days

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 SVM's post 7 days

@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 20 days

@John fixed it. Thanks.

You commented on Suman Haldar's post 20 days

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 20 days
You commented on Martin's post 20 days

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

You commented on Martin's post 21 days

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.

Posts Followed




Following

  • No Content

Followers

  • No Content