Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ember-responsive

Package Overview
Dependencies
Maintainers
2
Versions
51
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ember-responsive

Easy responsive layouts with Ember

  • 0.2.9
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
17K
decreased by-17.05%
Maintainers
2
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.


     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 media queries that are pertinent
     to your application.

        App = Ember.Application.extend();

        // Add the following initializer wherever you create your App class,
        // giving it a list of named breakpoints that your app responds to.
        App.responsive({
          media: {
            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
       $ grunt test


     License
     ~──────

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

Keywords

FAQs

Package last updated on 28 Apr 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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc