Sage 9 and Foundation.MediaQuery

sage
1

Sage 9 and Foundation JS

I’m using the latest Sage 9.0.0-beta.2 release in conjunction with Foundation as the CSS framework. The CSS/SASS is working fine but I got a strange bug with the JS.

I’m trying to use the Foundation.MediaQuery to read the current browser size. It doesn’t return what I expected. The .current alway’s returns undefined when using yarn watch. When using yarn build it does work…

The _init function of Foundation.MediaQuery does the following:
var extractedStyles = $('.foundation-mq').css('font-family');

When logging this to the console it returns ‘Times’ instead of what is should be. It looks like it does this before the object is rendered or such.

Any idea how to let Foundation wait for foundation-mq?

Main.js:

    import 'jquery';
    import 'foundation-sites/dist/js/foundation';

    import Router from './util/Router';
    import common from './routes/common';
    import home from './routes/home';

Common.js:
$(document).foundation(); is called

2

Hey @deJong,

I’m having actually have trouble during “yarn run start” where only main.js gets build and the rest get deleted. Do you have an example of your repo with Foundation at a basic level, I would love to compare to see what I’m doing wrong.

3

Hi @roryheaney,

I’ve been using the Sage 9.0.0-beta.2 release. There’s a automatic integration of Foundation.

4

No solution for this?

5

I’m getting similar problem with Foundation’s JavaScript media queries.
yarn start doesn’t work.
But yarn run build functions correctly.

Any ideas from anyone would be appreciated.

6

There’s an explanation of the issue and a workaround at https://github.com/roots/sage/issues/2124

In short, the MediaQuery component relies on a css value set with breakpoint info to initialize. The css value is not set before initialization when using hot module replacement.

2 Likes
7

Thank you, @jeremylind!!!