You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

ember-responsive

Package Overview
Dependencies
Maintainers
3
Versions
51
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ember-responsive

┌─┐┌┬┐┌┐ ┌─┐┬─┐ ┬─┐┌─┐┌─┐┌─┐┌─┐┌┐┌┌─┐┬┬ ┬┌─┐ ~─ ├┤ │││├┴┐├┤ ├┬┘ ─ ├┬┘├┤ └─┐├─┘│ ││││└─┐│└┐┌┘├┤ ─~ └─┘┴ ┴└─┘└─┘┴└─ ┴└─└─┘└─┘┴ └─┘┘└┘└─┘┴ └┘ └─┘

1.0.0
Source
npmnpm
Version published
Weekly downloads
20K
-29.36%
Maintainers
3
Weekly downloads
 
Created
Source
                ┌─┐┌┬┐┌┐ ┌─┐┬─┐   ┬─┐┌─┐┌─┐┌─┐┌─┐┌┐┌┌─┐┬┬  ┬┌─┐
             ~─ ├┤ │││├┴┐├┤ ├┬┘ ─ ├┬┘├┤ └─┐├─┘│ ││││└─┐│└┐┌┘├┤  ─~
                └─┘┴ ┴└─┘└─┘┴└─   ┴└─└─┘└─┘┴  └─┘┘└┘└─┘┴ └┘ └─┘

                ~─────────────────────────────────────────────~


     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.

Keywords

ember-addon

FAQs

Package last updated on 16 Nov 2014

Did you know?

Socket

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.

Install

Related posts