grain-responsive-behavior | Vaadin

(no summary available)

[ This description is mirrored from at on 2019-05-10 ]

Polymer Version


Every element implementing this behavior do get an attribute for is-mobile, is-tablet, is-desktop when you resize the window. You can use this information to change styles and/or attributes depending on it.


$ bower install --save daKmoR/grain-responsive-behavior

Getting Started

Import the package.

<link rel="import" href="/bower_components/grain-responsive-behavior/grain-responsive-behavior.html">

Create your element using this behavior. You can now access is-mobile, is-tablet, is-desktop.

class GrainResponsiveBehaviorExample extends GrainResponsiveBehavior(Polymer.Element) {
  // your code

If you wish to have an responsive attribute you should create 3 attributes foo, mobileFoo, tabletFoo and init the Behavior with `this.initResponsiveBehaviorFor('foo');

class GrainResponsiveBehaviorExample extends GrainResponsiveBehavior(Polymer.Element) {
  static get is() { return 'grain-responsive-behavior-example' }

  static get properties() {
    return {
      marked: {
        type: String,
        reflectToAttribute: true,
        value: 'false', // 'true', 'false'
      mobileMarked: { type: String, reflectToAttribute: true },
      tabletMarked: { type: String, reflectToAttribute: true },

  constructor() {

For more information, see the API documentation.

Working on the Element

First, make sure you have the Polymer CLI installed.

  • View the Element via polymer serve
  • Run tests via polymer test


Link to this version
ImportedReleased 30 April 2017Other
Framework Support
Polymer 2.0+
Also supported:
Polymer 1 (0.8.1)
Browser Compatibility
Install with
Release notes - Version 0.8.0