Content-Length: 283613 | pFad | https://github.com/foundation/foundation-sites/issues/11374

51 Mention foundation-global-styles in the JavaScript section · Issue #11374 · foundation/foundation-sites · GitHub
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Mention foundation-global-styles in the JavaScript section #11374

Closed
4 tasks done
gforcada opened this issue Jul 3, 2018 · 5 comments · Fixed by #11382
Closed
4 tasks done

Mention foundation-global-styles in the JavaScript section #11374

gforcada opened this issue Jul 3, 2018 · 5 comments · Fixed by #11382
Assignees
@ncoden
Labels
📖 documentation PR open

Comments

@gforcada
Copy link
Contributor

gforcada commented Jul 3, 2018

Description

At work we spent quite a lot of time to debug why something as simple as getting the current media query, i.e:

Foundation.MediaQuery.current

was not working for us.

Possible Solution

After debugging a lot, what we noticed was that the <meta class="foundation-mq"> was not properly initialized, which pointed us to SCSS, and indeed there was the problem.

We were missing:

@include foundation-global-styles;

in our main app.scss.

After that was done, .foundation-mq had all the media queries.

Still there was a small thing to change: rather than calling Foundation.MediaQuery.current we had to do:

import {MediaQuery} from 'foundation-sites/js/foundation.util.mediaQuery';
MediaQuery.current;

The equivalent

import {Foundation} from 'foundation-sites/js/foundation.core';
MediaQuery.current;

was also not working.

In general, the JavaScript setup section needs some love, as I guess we are not the only ones that are not importing the full Foundation CSS, but just the small subset that we are need.

Checklist (all required):

  • I have read and follow the CONTRIBUTING.md document.
  • There are no other issues similar to this one.
  • The issue title is descriptive.
  • The template is correctly filled.
@ncoden
Copy link
Contributor

ncoden commented Jul 3, 2018

Hi @gforcada,

I agree that we could add some explantations in the Media Query documentation about .foundation-mq and foundation-global-styles (this is unrelated to the Javascript installation).

I think we should also move the .foundation-mq into its own mixin to let folks like you that are "are not importing the full Foundation CSS" importing just the necessary CSS and not having to deal with additonal global styles.

About MediaQuery.current vs Foundation.MediaQuery.current and import paths, we switched in v6.5.0 (RC1 for now) to UMD bundling and now expose ready-to-use plugins for ES6 imports (like import { Dropdown } from 'foundation-sites';). This should resolve your issue.

@ncoden ncoden self-assigned this Jul 3, 2018
@gforcada
Copy link
Contributor Author

gforcada commented Jul 4, 2018

@ncoden (regarding the imports) as I saw that on the live docs, I assumed it had to be on the latest released version rather than on master.

@ncoden
Copy link
Contributor

ncoden commented Jul 4, 2018

I think we should also move the .foundation-mq into its own mixin

Would introduce a breaking change for for those that are importing Foundation plugins themselves in Sass. Delaying this for v6.6.0

ncoden added a commit to ncoden/foundation-sites that referenced this issue Jul 4, 2018
@ncoden
docs: add a notice about required CSS in Media Query doc
deee056 
Partially resolve foundation#11374
@ncoden ncoden mentioned this issue Jul 4, 2018
Merged
14 tasks
@ncoden
Copy link
Contributor

ncoden commented Jul 4, 2018

See #11382

@ncoden ncoden added the PR open label Jul 4, 2018
@gforcada
Copy link
Contributor Author

gforcada commented Jul 6, 2018

@ncoden thanks!

@ncoden ncoden mentioned this issue Jul 8, 2018
Merged
10 tasks
This was referenced Apr 22, 2020
Open
Open
Merged
Open
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ncoden ncoden

Labels
📖 documentation PR open
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

docs: add a notice about required CSS in Media Query doc ncoden/foundation-sites
2 participants
@gforcada @ncoden








ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: https://github.com/foundation/foundation-sites/issues/11374

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy