Panels Sample

fiddle.css

.panels-sample > * {
    width: 200px;
}

@media all and (max-width: 500px) {
    .panels-sample > * {
        min-width: 200px;
        max-width: 50%;
        width: 50%;
    }
}

@media all and (max-width: 300px) {
    .panels-sample > * {
        min-width: 100%;
        max-width: 100%;
    }
}

fiddle.html

<script>
new PanelsSample().renderInto(document.body);
</script>

fiddle.js

enyo.kind({
    name: "PanelsSample",
    kind: "FittableRows",
    components: [
        { kind: "Panels", fit: true, arrangerKind: "CollapsingArranger",
          classes: "panels-sample", narrowFit: false,
          components: [
              { name: "panel1", style: "background-color: blue" },
              { name: "panel2", style: "background-color: grey" },
              { name: "panel3", style: "background-color: green" }
          ]
        }
    ]
});

fiddle.manifest

name: Panels Sample
description: Demonstrates using CSS with Panels to allow for dynamic sizing
authors:
  - Roy Sutton
normalize_css: no