
Product
Introducing Webhook Events for Alert Changes
Add real-time Socket webhook events to your workflows to automatically receive software supply chain alert changes in real time.
ember-responsive
Advanced tools
┌─┐┌┬┐┌┐ ┌─┐┬─┐ ┬─┐┌─┐┌─┐┌─┐┌─┐┌┐┌┌─┐┬┬ ┬┌─┐ ~─ ├┤ │││├┴┐├┤ ├┬┘ ─ ├┬┘├┤ └─┐├─┘│ ││││└─┐│└┐┌┘├┤ ─~ └─┘┴ ┴└─┘└─┘┴└─ ┴└─└─┘└─┘┴ └─┘┘└┘└─┘┴ └┘ └─┘
┌─┐┌┬┐┌┐ ┌─┐┬─┐ ┬─┐┌─┐┌─┐┌─┐┌─┐┌┐┌┌─┐┬┬ ┬┌─┐
~─ ├┤ │││├┴┐├┤ ├┬┘ ─ ├┬┘├┤ └─┐├─┘│ ││││└─┐│└┐┌┘├┤ ─~
└─┘┴ ┴└─┘└─┘┴└─ ┴└─└─┘└─┘┴ └─┘┘└┘└─┘┴ └┘ └─┘
~─────────────────────────────────────────────~
The goal of ember-responsive is to give you a simple, Ember-aware way
of dealing with media queries. All you need to do is tell it your
application's breakpoints and it'll expose the rest for you.
Requirements
~───────────
ember-responsive needs window.matchMedia() to function, which isn't
available in all browsers:
http://caniuse.com/#feat=matchmedia
There is a polyfill by Paul Irish called matchMedia.js that will add
support to older browsers:
https://github.com/paulirish/matchMedia.js/
Getting Started
~──────────────
This is an ember-cli addon so, so all you need to do is
$ npm install --save ember-responsive
After that, simply register the breakpoints that are pertinent to
your application app/breakpoints.js:
export default {
mobile: '(max-width: 768px)',
tablet: '(min-width: 769px) and (max-width: 992px)',
desktop: '(min-width: 993px) and (max-width: 1200px)',
jumbo: '(min-width: 1201px)',
}
You can then query those breakpoints in your controllers, components,
routes, and views:
this.get('media.isMobile'); // => true
Obviously, these properties also propagate to templates:
{{#if media.isDesktop}}
Desktop view!
{{/if}}
You should also bind the list of active media queries to your app's
rootElement. This means you won't have to deal with complicated media
queries in CSS—instead simply use classes to style the different devices.
App.ApplicationView = Ember.View.extend({
classNameBindings: ['media.classNames']
});
Tests
~────
To run the tests, after cloning do:
$ npm install
$ npm test
License
~──────
This library is lovingly brought to you by the FreshBooks developers.
We've released it under the MIT license.
FAQs
An ember-cli addon that gives you a simple, Ember-aware way of dealing with media queries.
The npm package ember-responsive receives a total of 13,063 weekly downloads. As such, ember-responsive popularity was classified as popular.
We found that ember-responsive demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Product
Add real-time Socket webhook events to your workflows to automatically receive software supply chain alert changes in real time.

Security News
ENISA has become a CVE Program Root, giving the EU a central authority for coordinating vulnerability reporting, disclosure, and cross-border response.

Product
Socket now scans OpenVSX extensions, giving teams early detection of risky behaviors, hidden capabilities, and supply chain threats in developer tools.