grain-responsive-container

(no summary available)

View larger

Close

[ This description is mirrored from README.md at github.com/daKmoR/grain-responsive-container on 2019-05-10 ]

<grain-responsive-container>

Allows you to easily define is-mobile, is-tablet, is-desktop for your element so you can style it accordingly.

Demo

<style>
  grain-responsive-container {
    --mobile-background: #FFFAA5;
    --tablet-background: #ABFF8A;
  }
  grain-responsive-container[is-mobile] {
    border: 1px solid #E76C4A;
  }
</style>
<grain-responsive-container>
  I will be yellow on tablet and green on mobile just by using css variables.
  For everything else I can use the is-mobile, is-tablet, is-desktop attribute
  of the element.
  PS: is-desktop does not work in this inline demo as it's an iframe
</grain-responsive-container>

Installation

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

Getting Started

Import the package.

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

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

Links

• View on GitHub
• GitHub Homepage
• Issue tracker
• License
• Online Demo
• Documentation

Compatibility