Menu icon Foundation
How to create custom .js Media Query Breakpoints?

I'm trying to add a custom media query to javascript, but the documentation is really confusing. I've looked at http://foundation.zurb.com/docs/javascript-utilities.html#media-queries and I can't understand what i need to do.

(the documentation uses font-family as an example which had a media query inside it (!?) and that just confused things even more)

In my .js file, I'm already using the built in media queries successfully like this:

if (Foundation.utils.is_large_up()) {
//do stuff
}

and that works great. All I want to do is use a non-core media query.

So, in my CSS variables I have a media query size that I check that's something like:

$tablet: "only screen and (min-width:500px)";

How do I tell Foundation about my new media query size so I can use it like this:

if (Foundation.utils.is_tablet()) {
//do stuff
}

media query

I'm trying to add a custom media query to javascript, but the documentation is really confusing. I've looked at http://foundation.zurb.com/docs/javascript-utilities.html#media-queries and I can't understand what i need to do.

(the documentation uses font-family as an example which had a media query inside it (!?) and that just confused things even more)

In my .js file, I'm already using the built in media queries successfully like this:

if (Foundation.utils.is_large_up()) {
//do stuff
}

and that works great. All I want to do is use a non-core media query.

So, in my CSS variables I have a media query size that I check that's something like:

$tablet: "only screen and (min-width:500px)";

How do I tell Foundation about my new media query size so I can use it like this:

if (Foundation.utils.is_tablet()) {
//do stuff
}
Rob Feature over 4 years ago

Just a bump here...any help on this?

Jeanie Chung over 4 years ago

Hey Rob-

You can do the following:

  1. First define your tablet as a meta class. This is what puts the rule in the DOM so that Foundation JS can parse the rule.
meta.tablet {
  font-family: "/only screen and (min-width:500px)/";
  width: 40em;
}
  1. Register the breakpoint with the .register_media method. The first argument is what it will be known in Foundation JS, the second argument is what you defined the meta class as in Step 1.
Foundation.utils.register_media('tablet', 'tablet');

  1. Use the match media library (instead of Foundation.utils) to check for the breakpoint.
if (matchMedia(Foundation.media_queries['tablet']).matches){

// do stuff ...
};

Currently, the Foundation.utils object only has defined media queries for the ones listed in the documentation, but we will be expanding this API with the upcoming version of Foundation 6. :)

Rob Feature over 4 years ago

Thanks for this info! However, can you explain for me what the purpose of using "font family" is? Why are we defining the breakpoint data in the font-family property (which, obviously, is used to define fonts, not breakpoints)?

Also, what does the 'width' do in this example?

Jeanie Chung over 4 years ago

Oh, sorry. The "font-family" is just a property that we're using so that we can parse that property on the JS end and match up the media query with the named width (I forgot to change that with your particular property) so that width property should match up with the lower-bound of your media query. Essentially, it is just our way of passing SCSS variables to Foundation so that we can use functions like the ones listed above.

Rob Feature over 4 years ago

Ok, I'm starting to understand, thanks!

My last question is this: You say the width: property matches with the lower bound of the media query. But then in the font-family example you have min-width:500px.

So 40em and 500px both seem to be declaring the min-width....

Can you clarify how those work together?

(PS: I think you may want to explain some of this in the docs as it doesn't really explain what's happening here...)

Jeanie Chung over 4 years ago

Sorry Rob. I meant to clarify with my last post that I forgot to change the width property on the instructions I gave. Your CSS declaration will look like:

meta.tablet {
  font-family: "/only screen and (min-width:500px)/";
  width: 500px;
}

Actually, upon closer look of Foundation, it appears that the width property isn't used in registering the media, only the media query rule (the font-family property).

It appears the width property might be part of legacy code and is just there if someone were to want to use that value separately in their custom JS instead of having to parse through the media query rule to get to the breakpoint value.

Rob Feature over 4 years ago

Excellent, I'll try all this out tomorrow...thanks so much for taking the time to help me understand!