Using breakpoints measured in ems

[bennybee]

It seems pretty standard to define your breakpoints in ems rather than pixels these days. Is this something that response.js will support?

[ryanve]

@bennybee I agree and I've been considering how to facilitate ems in a future response.js version. It can be done in 0.7 now via Response.addTest with something like:

Response.addTest('em-width', function(breakpoint) {
  return 0 === breakpoint || Response.media('(min-width:' + breakpoint + 'em)').matches; 
}).create({
    prop: 'em-width'
  , breakpoints: [0, 30, 60]
});

That should let you use attributes like:

<div data-min-em-width-0="content at 0+"
  data-min-em-width-30="content at 30+"
  data-min-em-width-60="content at 60+"
>fallback content</div>

Replace 'em-width' with 'width' if you want to override the default 'width' test everywhere (and simplify the attributes). You also can customize the attributes via .prefix. See another .addTest example here.

[jsanglier]

Hi Ryan

Having fun playing with ProcessWire, Pocketgrid and Response.js - lovely combination!

Is this still the way to deal with working in em now that you are in v9.0? Or is there now a default method?

And where do I put the Response.addTest - still learning here!

Great piece of work this.

Joss

[jsanglier]

Okay, I got it working.

However, the one problem with this approach is you can end up with some odd values which are hardly memorable: data-min-em-width-33.125, for instance.

I notice elsewhere that you talked about using names instead - I have tried to work that method into this but I couldn't get it to work; beyond my ability, me thinks.

How can I get both working at the same time?

Thanks again

[ryanve]

Thanks @jsanglier—combining my example above with the custom names idea is the best way for now

!function(Response) {
  var names = ['small', 'medium', 'large'];
  var values = {medium: '(min-width:50em)', large: '(min-width:75em)'};
  Response.addTest('view', function(breakpoint) {
    var query = values.hasOwnProperty(breakpoint) && values[breakpoint];
    return !query || Response.media(values[breakpoint]).matches;
  }).create({prefix: 'view-', prop: 'view', breakpoints: names, dynamic: true});
}(Response);

and lets you write markup like

<div data-view-small="small content"
     data-view-medium="medium content"
     data-view-large="large content"
>fallback content</div>

[jsanglier]

What a nice man!

Come play with ProcessWire if you get a chance - all the devs in there are your sort of helpful people.