Skip to content
Easy responsive layouts with Ember
Branch: master
Clone or download
Latest commit a21e0d4 May 15, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon-test-support Improve `setBreakpoint` to be runloop aware and be await-able Apr 4, 2018
addon Ember 3.11 requires calls to super in `init()` May 14, 2019
app Add media helper Mar 22, 2018
blueprints/ember-responsive Refactor component a lot Mar 22, 2018
config Add ember 3.4 lts to ember try config Mar 8, 2019
tests Fix matchers name collision and update README Apr 25, 2018
vendor Switch to ember-cli addon Nov 16, 2014
.bowerrc Switch to ember-cli addon Nov 16, 2014
.editorconfig Update addon via `ember init` Sep 23, 2015
.ember-cli Switch to ember-cli addon Nov 16, 2014
.eslintrc.js Update ember-cli Mar 20, 2018
.gitignore Update ember-cli Mar 20, 2018
.jshintrc Upgrade to ember-cli 0.1.14 Dec 15, 2014
.npmignore Update ember-cli Mar 20, 2018
.travis.yml Update versions for travis Mar 8, 2019
.watchmanconfig Update addon via `ember init` Sep 23, 2015
CHANGELOG.md Bump version to Ember 3.0.1 May 15, 2019
CONTRIBUTING.md Re add CONTRIBUTING.md and LICENSE Nov 16, 2014
LICENSE.md Update to ember-cli 0.2.3 May 7, 2015
README.md Remove references to beta in readme Mar 8, 2019
ember-cli-build.js Ensure addon does not use jQuery or shims Mar 20, 2018
index.js Update ember-cli Mar 20, 2018
package.json Bump version to Ember 3.0.1 May 15, 2019
testem.js Adjust browser size to accurately check responsive constraints Mar 20, 2018
yarn.lock Improve `setBreakpoint` to be runloop aware and be await-able Apr 4, 2018

README.md

ember-responsive Build Status Ember Observer Score

ember-responsive is an ember-cli addon that 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. Here is an interactive demo

Requirements

ember-responsive needs window.matchMedia() to function, which isn't available in all browsers. Compatibility matrix

There is a polyfill by Paul Irish called matchMedia.js that will add support to older browsers

Getting Started

This is an ember-cli addon so, so all you need to do is

ember install ember-responsive

After that, simply register the breakpoints that are pertinent to your application in app/breakpoints.js:

export default {
  mobile:  '(max-width: 767px)',
  tablet:  '(min-width: 768px) and (max-width: 991px)',
  desktop: '(min-width: 992px) and (max-width: 1200px)',
  jumbo:   '(min-width: 1201px)'
};

This default config has already been provided for you. If you wish to change the values or add new ones, simply create a new app/breakpoints.js in your project and export your chosen config.

Now you can inject the media service in any object with access to the container:

import Component from '@ember/component';
import { inject as service } from '@ember/service';

export default Controller.extend({
  media: service(),
  doSomething() {
    this.get('media.isMobile'); // => true
  }
});

In your templates you have access to the media helper that allows you to query breakpoints easily.

{{#if (media 'isDesktop')}}
  Desktop view!
{{/if}}

You can 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.

In your application.hbs template:

<div class="{{media 'classNames'}}">
  {{outlet}}
</div>

Injection

If you find explicitly injecting the service too repetitive, you can setup an initializer to inject it automatically in every controller and component like this:

// in app/initializers/ember-responsive
export default {
  name: 'responsive',
  initialize(application) {
    application.inject('controller', 'media', 'service:media');
    application.inject('component', 'media', 'service:media');
  }
};

Updating to 2.x

When updating this addon, make sure to run the generate command. Choose no to overriding existing files, unless you want the defaults. This command has to be run when updating to 2.x if your application relies on automatic injection. Because as of version 1.2.9, the addon will generate an initializer to allow users to customize injection.

ember g ember-responsive

Updating to 3.x

The major breaking changes to update to 3.x are so far:

Usage in engines

If you are using engines and you want to share responsive behaviour between the main application and engine, you must pass the 'media' service to the engine app.

Testing Helpers

This project provides a single test helper which works in both integration and acceptance tests to assist in testing content specific to different breakpoints.

Acceptance Tests

...
import { setBreakpoint } from 'ember-responsive/test-support';

...

test('example test', function(assert) {
  setBreakpoint('mobile');
  visit('/');

  andThen(function() {
    // assert something specific to mobile
  });
});

Integration Tests

...
import { setBreakpoint } from 'ember-responsive/test-support';

...

test('it renders', function(assert) {
  setBreakpoint('mobile');

  this.render(hbs`{{your-component}}`);

  // assert something specific to mobile
});

Tests

To run the tests, after cloning do:

npm install
bower install
npm test

License

This library is lovingly brought to you by the FreshBooks developers. We've released it under the MIT license.

You can’t perform that action at this time.