Panels Sample

fiddle.css

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

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

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

fiddle.js

enyo.ready(function() {
    enyo.kind({
        name: 'PanelsSample',
        kind: 'Panels',
        arrangerKind: 'CollapsingArranger',
        classes: 'panels-sample',
        narrowFit: false,
        handlers: {
            onTransitionFinish: 'transitioned'
        },
        components: [
            { name: 'panel1', style: 'background-color: blue' },
            { name: 'panel2', style: 'background-color: grey' },
            { name: 'panel3', style: 'background-color: green' }
        ],
        transitioned: function() {
            this.log(this.index);
        }
    });

    new enyo.Application({ name: 'app', view: 'PanelsSample' });
});

fiddle.manifest

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

Try it out on jsFiddle

From: Enyo: Up and Running by Roy Sutton