Menu icon Foundation

Coder | germany

My Posts





  • 1
    Reply
  • Use foundation 6 alongside 5

    By Erik Krause

    installation

    Hello, I'd like to use foundation 6 for a new project. However, some older projects are still not completely finished, so I'd need foundation 5 still active on my development machine. How shall I install version 6 without loosing the ability to compile s... (continued)

    Last Reply by Erik Krause almost 2 years ago






My Comments

Erik Krause commented on Erik Krause's post 4 days

Many thanks. I thought I'd played with all parameters, but apparently I forgot data-threshold. Many thanks for that and also for the heads up. I'll stick to float grid for the time being due to legacy browser support.

Erik Krause commented on Serguei Cambour's post 5 days

_settings.scss is for the foundation internal settings only, overrides are better put in a separate .scss file which you include in app.scss (or whatever you like to name it). This is created automatically if you create a foundation project.
I use it since version 5 with compass (on ruby). I develop my web projects in PHP on a local server and I prefer to have only the code I need to upload in the projects folder structure. A foundation project creates a bunch of folders which should not make it to the server, hence I create them in a different location and symlink only the files I need into the web project structure.

Erik Krause commented on Serguei Cambour's post 6 days

Since you use foundation I assume your project outputs HTML in the end. In this regard it doesn't differ from a pure HTML, ASP or PHP project. So you have to assure that the correct stylesheets are used for the HTML you create by writing appropriate tags in the head section etc.
Hence you can override any CSS statement using the cascading rules (that's the whole idea of cascading style sheets): https://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade Also see https://stackoverflow.com/questions/9459062/in-which-order-do-css-stylesheets-override
However, you get better (and leaner) CSS code using SASS. You can create a SASS project anywhere you like and copy or better symlink the resulting css files into your projects stylesheets folder.
Sorry if I misunderstood your question.

Erik Krause commented on Erik Krause's post 5 months

After a lot of trying I have a solution that at least partly works:
$(document).ready(function() {
$('.top-bar .active > a').first().focus().click();
window.setTimeout(function() {
$('.top-bar .active > a').eq(1).focus().click();
}, 1000);
});

This opens the menu and after a second the submenu. Shorter values for setTimeout will cause a flicker only, both focus and click calls are necessary. This seems to be a hack rather than a proper way to do it. I'd be still grateful someone comes up with a better way to do it.

Erik Krause commented on Erik Krause's post 5 months

Not even
$('.top-bar .active').simulate('click');
using jquery.simulate.js works. No one any ideas?

Erik Krause commented on Erik Krause's post 6 months

So I had contact with Brett Mason off list and he provided not only one but three options how to solve this:
Option 1: dont use the Foundation sticky plugin and use a bit of JavaScript
https://codepen.io/brettsmason/pen/BRxGGd

Option 2: use the off canvas overlap transition instead
https://codepen.io/brettsmason/pen/aWGQgo

Option 3: Use a position: sticky polyfill instead of Foundations sticky
plugin
https://github.com/soenkekluth/sticky-state
Many, many thanks to Brett for this solutions!

Erik Krause commented on hassan's post 7 months

So the codepen here http://codepen.io/brettsmason/pen/WxeeNO  used to work with F6.2 but with F6.3 the title bar scrolls away if the content is scrolled down a bit and the open button is clicked. data-content-scroll=false doesn't help, neither did anything else I tried. Could someone please update the codepen accordingly?

Erik Krause commented on Erik Krause's post 7 months

So many thanks! Sorry for not having tried harder myself. This is exactly what I was looking for. I tried with deeper levels and it works like expected: https://codepen.io/anon/pen/rmGPba?editors=1100 Would be nice you updated http://foundation.zurb.com/sites/docs/responsive-navigation.html with this example.

Erik Krause commented on Erik Krause's post 8 months

Hello,
I was very excited when I heard about the new building blocks and immediately searched for something that would mimic the foundation 5 top bar. But nothing... I had to do some projects with F5 now because customer wanted exactly that top bar. Why isn't it still not contained in F6? Or am I only too dumb to roll my own?

Erik Krause commented on Erik Krause's post over 1 year

Any progress here? The page still says "The features of Foundation 5's top bar are still around, but they've been reworked into smaller, individual plugins. Check out our page on responsive navigation to learn more." However, the examples on responsive navigation don't mimic version 5 behavior. I consider a top bar with horizontal menu not usable on small devices. I'd very much appreciate a link to a working example.

Posts Followed






Following

    No Content

Followers

My Posts

My Comments

You commented on Erik Krause's post 4 days

Many thanks. I thought I'd played with all parameters, but apparently I forgot data-threshold. Many thanks for that and also for the heads up. I'll stick to float grid for the time being due to legacy browser support.

You commented on Serguei Cambour's post 5 days

_settings.scss is for the foundation internal settings only, overrides are better put in a separate .scss file which you include in app.scss (or whatever you like to name it). This is created automatically if you create a foundation project.
I use it since version 5 with compass (on ruby). I develop my web projects in PHP on a local server and I prefer to have only the code I need to upload in the projects folder structure. A foundation project creates a bunch of folders which should not make it to the server, hence I create them in a different location and symlink only the files I need into the web project structure.

You commented on Serguei Cambour's post 6 days

Since you use foundation I assume your project outputs HTML in the end. In this regard it doesn't differ from a pure HTML, ASP or PHP project. So you have to assure that the correct stylesheets are used for the HTML you create by writing appropriate tags in the head section etc.
Hence you can override any CSS statement using the cascading rules (that's the whole idea of cascading style sheets): https://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade Also see https://stackoverflow.com/questions/9459062/in-which-order-do-css-stylesheets-override
However, you get better (and leaner) CSS code using SASS. You can create a SASS project anywhere you like and copy or better symlink the resulting css files into your projects stylesheets folder.
Sorry if I misunderstood your question.

You commented on Erik Krause's post 5 months

After a lot of trying I have a solution that at least partly works:
$(document).ready(function() {
$('.top-bar .active > a').first().focus().click();
window.setTimeout(function() {
$('.top-bar .active > a').eq(1).focus().click();
}, 1000);
});

This opens the menu and after a second the submenu. Shorter values for setTimeout will cause a flicker only, both focus and click calls are necessary. This seems to be a hack rather than a proper way to do it. I'd be still grateful someone comes up with a better way to do it.

You commented on Erik Krause's post 5 months

Not even
$('.top-bar .active').simulate('click');
using jquery.simulate.js works. No one any ideas?

You commented on Erik Krause's post 6 months

So I had contact with Brett Mason off list and he provided not only one but three options how to solve this:
Option 1: dont use the Foundation sticky plugin and use a bit of JavaScript
https://codepen.io/brettsmason/pen/BRxGGd

Option 2: use the off canvas overlap transition instead
https://codepen.io/brettsmason/pen/aWGQgo

Option 3: Use a position: sticky polyfill instead of Foundations sticky
plugin
https://github.com/soenkekluth/sticky-state
Many, many thanks to Brett for this solutions!

You commented on hassan's post 7 months

So the codepen here http://codepen.io/brettsmason/pen/WxeeNO  used to work with F6.2 but with F6.3 the title bar scrolls away if the content is scrolled down a bit and the open button is clicked. data-content-scroll=false doesn't help, neither did anything else I tried. Could someone please update the codepen accordingly?

You commented on Erik Krause's post 7 months

So many thanks! Sorry for not having tried harder myself. This is exactly what I was looking for. I tried with deeper levels and it works like expected: https://codepen.io/anon/pen/rmGPba?editors=1100 Would be nice you updated http://foundation.zurb.com/sites/docs/responsive-navigation.html with this example.

You commented on Erik Krause's post 8 months

Hello,
I was very excited when I heard about the new building blocks and immediately searched for something that would mimic the foundation 5 top bar. But nothing... I had to do some projects with F5 now because customer wanted exactly that top bar. Why isn't it still not contained in F6? Or am I only too dumb to roll my own?

You commented on Erik Krause's post over 1 year

Any progress here? The page still says "The features of Foundation 5's top bar are still around, but they've been reworked into smaller, individual plugins. Check out our page on responsive navigation to learn more." However, the examples on responsive navigation don't mimic version 5 behavior. I consider a top bar with horizontal menu not usable on small devices. I'd very much appreciate a link to a working example.

Posts Followed

Following

  • No Content

Followers

  • No Content