{"id":13807367,"url":"https://github.com/freshbooks/ember-responsive","last_synced_at":"2026-02-22T15:02:03.513Z","repository":{"id":15943812,"uuid":"18686121","full_name":"freshbooks/ember-responsive","owner":"freshbooks","description":"Easy responsive layouts with Ember","archived":false,"fork":false,"pushed_at":"2026-01-22T07:04:13.000Z","size":4968,"stargazers_count":41,"open_issues_count":44,"forks_count":24,"subscribers_count":10,"default_branch":"main","last_synced_at":"2026-01-23T22:28:19.917Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://freshbooks.github.io/ember-responsive/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/freshbooks.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2014-04-11T19:29:18.000Z","updated_at":"2025-09-02T16:14:52.000Z","dependencies_parsed_at":"2024-01-09T05:01:52.959Z","dependency_job_id":"66a86c82-660c-4f57-98b6-c78a38427df8","html_url":"https://github.com/freshbooks/ember-responsive","commit_stats":{"total_commits":434,"total_committers":47,"mean_commits":9.23404255319149,"dds":0.7142857142857143,"last_synced_commit":"e6e9f8edff4e5e43f02dc254fbf9f062d65a8ee8"},"previous_names":[],"tags_count":43,"template":false,"template_full_name":null,"purl":"pkg:github/freshbooks/ember-responsive","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freshbooks%2Fember-responsive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freshbooks%2Fember-responsive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freshbooks%2Fember-responsive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freshbooks%2Fember-responsive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/freshbooks","download_url":"https://codeload.github.com/freshbooks/ember-responsive/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freshbooks%2Fember-responsive/sbom","scorecard":{"id":411271,"data":{"date":"2025-08-11","repo":{"name":"github.com/freshbooks/ember-responsive","commit":"cae0ad271637954c2d207fa508928e1b001d6a11"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.8,"checks":[{"name":"Code-Review","score":-1,"reason":"Found no human activity in the last 15 changesets","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE.md:0","Info: FSF or OSI recognized license: MIT License: LICENSE.md:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":5,"reason":"branch protection is not maximal on development and all release branches","details":["Info: 'allow deletion' disabled on branch 'main'","Info: 'force pushes' disabled on branch 'main'","Warn: 'branch protection settings apply to administrators' is disabled on branch 'main'","Warn: 'stale review dismissal' is disabled on branch 'main'","Warn: required approving review count is 1 on branch 'main'","Warn: codeowners review is not required on branch 'main'","Warn: 'last push approval' is disabled on branch 'main'","Warn: no status checks found to merge onto branch 'main'","Info: PRs are required in order to make changes on branch 'main'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 30 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"41 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-wxhq-pm8v-cw75","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-q9mw-68c2-j6m5","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-18T22:45:52.664Z","repository_id":15943812,"created_at":"2025-08-18T22:45:52.664Z","updated_at":"2025-08-18T22:45:52.664Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29716528,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-22T13:30:57.152Z","status":"ssl_error","status_checked_at":"2026-02-22T13:30:28.561Z","response_time":110,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T01:01:24.721Z","updated_at":"2026-02-22T15:02:03.136Z","avatar_url":"https://github.com/freshbooks.png","language":"JavaScript","readme":"# ember-responsive [![Ember Observer Score](http://emberobserver.com/badges/ember-responsive.svg)](http://emberobserver.com/addons/ember-responsive)\n\nAn ember-cli addon that gives you a simple, Ember-aware way of dealing with media queries.\n\nAll you need to do is provide your application's breakpoints and it'll expose the rest for you.\n[Here is an interactive demo](https://www.justinbull.ca/ember-responsive-demo/)\n\n## Requirements\n\nember-responsive needs [window.matchMedia()](https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia)\nto function, which isn't available in some older browsers. [Compatibility matrix](https://caniuse.com/#feat=matchmedia)\n\nThere is a polyfill by Paul Irish called [matchMedia.js](https://github.com/paulirish/matchMedia.js)\nthat will add support to older browsers\n\n## Getting Started\n\nThis is an ember-cli addon so, so all you need to do is\n\n`ember install ember-responsive`\n\nAfter that, simply register the breakpoints that are pertinent to your application in `app/breakpoints.js`:\n\n```js\nexport default {\n  mobile:  '(max-width: 767px)',\n  tablet:  '(min-width: 768px) and (max-width: 991px)',\n  desktop: '(min-width: 992px) and (max-width: 1200px)',\n  jumbo:   '(min-width: 1201px)'\n};\n```\n\nThis default config has already been provided for you. If you wish to change the values or add new ones,\nsimply create a new `app/breakpoints.js` in your project and export your chosen config.\n\nNow you can inject the _media_ service in any object with access to the container:\n\n```js\nimport Controller from '@ember/controller';\nimport { inject as service } from '@ember/service';\n\nexport default class SomeController extends Controller {\n  @service media;\n\n  doSomething() {\n    this.media.isMobile; // =\u003e true\n  }\n}\n```\n\nIn your templates you have access to the `media` helper that allows you to query breakpoints easily.\n\n```hbs\n{{#if (media 'isDesktop')}}\n  Desktop view!\n{{/if}}\n```\n\nYou can also bind the list of active media queries to your app's\nrootElement. This means you won't have to deal with complicated media\nqueries in CSS, instead simply use classes to style the different devices.\n\nIn your application.hbs template:\n\n```hbs\n\u003cdiv class=\"{{media 'classNames'}}\"\u003e\n  {{outlet}}\n\u003c/div\u003e\n```\n\n### Injection\n\nIf you find explicitly injecting the service too repetitive, you can setup an initializer to inject it automatically in every controller and component like this:\n\n```js\n// in app/initializers/ember-responsive\nexport default {\n  name: 'responsive',\n  initialize(application) {\n    application.inject('controller', 'media', 'service:media');\n    application.inject('component', 'media', 'service:media');\n  }\n};\n```\n\n### Additional Media Queries\n\nMedia queries beyond those based on size will also work in your `breakpoints.js` file, including:\n\n```\n  portrait: '(orientation: portrait)',\n  landscape: '(orientation: landscape)',\n  dark: '(prefers-color-scheme: dark)',\n  light: '(prefers-color-scheme: light)'\n```\n\n## Updating to 2.x\n\nWhen 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.\n\n`ember g ember-responsive`\n\n## Updating to 3.x\n\nThe major breaking changes to update to 3.x are so far:\n- Test helpers are now all covered by `setBreakpoint`\n- Calling media breakpoints in templates is now done with a helper. `{{media.isDesktop}}` -\u003e `{{media 'isDesktop'}}`\n- Tests run into issues if you have not ported to the new style tests (https://github.com/emberjs/rfcs/blob/master/text/0232-simplify-qunit-testing-api.md)\n\n## Updating to 5.x\n\nUpdating to 5.x should be seamless for modern (post-Octane) Ember apps.\n\n## Usage in engines\n\nIf 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.\n\n## Testing Helpers\nThis project provides a single test helper which works in both integration and acceptance tests to assist in testing\ncontent specific to different breakpoints.\n\n### Acceptance Tests\n```javascript\n...\nimport { setBreakpoint } from 'ember-responsive/test-support';\n\n...\n\ntest('example test', async function (assert) {\n  setBreakpoint('mobile');\n  await visit('/');\n\n  // assert something specific to mobile\n});\n```\n\n### Integration Tests\n```javascript\n...\nimport { setBreakpoint } from 'ember-responsive/test-support';\n\n...\n\ntest('it renders', function (assert) {\n  setBreakpoint('mobile');\n\n  render(hbs`\u003cYourComponent /\u003e`);\n\n  // assert something specific to mobile\n});\n```\n\n### Multiple Breakpoints in Tests\n\nYou can set multiple breakpoints to the helper.  This is useful if your `breakpoints.js` file defines breakpoints\nthat overlap.\n\n```javascript\n// in app/breakpoints.js\nexport default {\n  tablet:  '(min-width: 768px)',\n  desktop: '(min-width: 992px)',\n  jumbo:   '(min-width: 1201px)'\n};\n\n// in test file\n...\nimport { setBreakpoint } from 'ember-responsive/test-support';\n\n...\n\ntest('it renders', function (assert) {\n  setBreakpoint(['tablet', 'desktop']);\n\n  render(hbs`\u003cYourComponent /\u003e`);\n\n  // assert something specific to desktop, i.e. sizes 992px - 1201px\n  // `isTablet` and `isDesktop` will both return true\n});\n```\n\n## Tests\n\nTo run the tests, after cloning do:\n\n```bash\nyarn install\nyarn test # Run all tests\nyarn test:ember # Run using current ember version\nyarn test:ember-compatibility # Run using ember-try versions\n```\n\n## License\n\nThis library is lovingly brought to you by the FreshBooks developers.\nWe've released it under the MIT license.\n","funding_links":[],"categories":["Packages"],"sub_categories":["Mobile"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffreshbooks%2Fember-responsive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffreshbooks%2Fember-responsive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffreshbooks%2Fember-responsive/lists"}