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.
Getting Started
~──────────────
Fortunately, ember-responsive is dead-simple to set up. You can start
by adding it to your list of bower dependencies:
$ bower install --save ember-responsive
After that, simply register the Ember.Responsive initializer with the
media queries that are pertinent to your application.
// Add the following initializer wherever you create your App class,
// giving it a list of named breakpoints that your app responds to.
App.initialize(Ember.Responsive.init({
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 and components:
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.
<body {{bind-attr class=media.classNames}}></body>
{{! Rendered as '<body class="media-desktop"></body>'}}
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 14,239 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.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.