grain-responsive-container

daKmoR

by SlashBunny

HTML

<base href="https://raw-dot-custom-elements.appspot.com/daKmoR/grain-responsive-container/v0.8.2/grain-responsive-container/">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="grain-responsive-container.html">
<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>