New Twiddle

components.flex-layout-content.js

import Ember from 'ember';

export default Ember.Component.extend({
    classNames: ['flex-layout-content']
});

components.flex-layout-empty.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: '',
});

components.flex-layout-footer.js

import Ember from 'ember';

export default Ember.Component.extend({
    classNames: ['flex-layout-footer']
});

components.flex-layout-header.js

import Ember from 'ember';

export default Ember.Component.extend({
    classNames: ['flex-layout-header']
});

components.flex-layout-left-sidebar.js

import Ember from 'ember';

export default Ember.Component.extend({
    classNames: ['flex-layout-left-sidebar']
});

components.flex-layout-right-sidebar.js

import Ember from 'ember';

export default Ember.Component.extend({
    classNames: ['flex-layout-right-sidebar']
});

components.flex-layout.js

import Ember from 'ember';

export default Ember.Component.extend({
    classNames: ['flex-layout']
});

components.scalable-container.js

import Ember from 'ember';

export default Ember.Component.extend({
  scale: 1,
  classNames: ['scalable-container'],
  didInsertElement() {
    this.element.style.cssText = `
      will-change: transform;
      transform-origin: 0 0;
    `;

    this.updateScale();
  },
  updateScale() {
    if (this.isDestroyed) { return; }

    let windowWidth = window.innerWidth;
    let elementWidth = this.element.parentElement.offsetWidth;
    let newScale = elementWidth / windowWidth;
    let scaleChange = Math.abs(this.scale - newScale);

    if (scaleChange > 0.0001) {
      this.element.style.cssText += `
        transform: scale(${newScale});
        width: ${windowWidth}px;
      `;
      this.scale = newScale;
    }

    requestAnimationFrame(() => this.updateScale());
  },
  requestAnimationFrame(callback) {
    if (window.requestAnimationFrame) {
      return window.requestAnimationFrame(callback);
    }
    return setTimeout(callback, 33);
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

styles.app.css

* {
  margin: 0;
  padding: 0;
  border: 0; }

h1, p {
  margin-bottom: 1rem; }

article {
  padding: 2rem; }

.text-center {
  text-align: center; }

.text-right {
  text-align: right; }

html, body, #root, #root > .ember-view, body > .ember-view {
  height: 100%; }

.flex-layout {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column; }
  .flex-layout-header {
    background: #AAA; }
  .flex-layout-left-sidebar {
    background: #DDD;
    order: -1;
    overflow: scroll; }
  .flex-layout-middle {
    display: flex;
    flex: 1; }
  .flex-layout-content {
    border: 1px solid red;
    overflow: scroll; }
  .flex-layout-right-sidebar {
    background: #DDD;
    overflow: scroll; }
  .flex-layout-footer {
    background: #AAA; }

templates.application.hbs

{{#flex-layout as |fl|}}
  {{#fl.header}}
    <div class="text-center">
      All Panels
      <br />
      Header
    </div>
  {{/fl.header}}

  {{#fl.left-sidebar}}
    All Panels
    <br />
    Left Sidebar
  {{/fl.left-sidebar}}

  {{#fl.content}}
    {{outlet}}
  {{/fl.content}}

  {{#fl.right-sidebar}}
    <div class="text-right">
      All Panels
      <br />
      Right Sidebar
    </div>
  {{/fl.right-sidebar}}

  {{#fl.footer}}
    <div class="text-center">
      All Panels
      <br />
      Footer
    </div>
  {{/fl.footer}}
{{/flex-layout}}

templates.components.flex-layout-content.hbs

{{yield}}

templates.components.flex-layout-empty.hbs

<!-- Nothing to see here -->

templates.components.flex-layout-footer.hbs

{{yield}}

templates.components.flex-layout-header.hbs

{{yield}}

templates.components.flex-layout-left-sidebar.hbs

{{yield}}

templates.components.flex-layout-right-sidebar.hbs

{{yield}}

templates.components.flex-layout.hbs

{{yield
  (hash
    header=(component "flex-layout-header")
    left-sidebar=(component "flex-layout-empty")
    content=(component "flex-layout-empty")
    right-sidebar=(component "flex-layout-empty")
    footer=(component "flex-layout-empty")
  )
}}
<div class="flex-layout-middle">
  {{yield
    (hash
      header=(component "flex-layout-empty")
      left-sidebar=(component "flex-layout-empty")
      content=(component "flex-layout-content")
      right-sidebar=(component "flex-layout-empty")
      footer=(component "flex-layout-empty")
    )
  }}
  {{yield
    (hash
      header=(component "flex-layout-empty")
      left-sidebar=(component "flex-layout-left-sidebar")
      content=(component "flex-layout-empty")
      right-sidebar=(component "flex-layout-empty")
      footer=(component "flex-layout-empty")
    )
  }}
  {{yield
    (hash
      header=(component "flex-layout-empty")
      left-sidebar=(component "flex-layout-empty")
      content=(component "flex-layout-empty")
      right-sidebar=(component "flex-layout-right-sidebar")
      footer=(component "flex-layout-empty")
    )
  }}
</div>
{{yield
  (hash
    header=(component "flex-layout-empty")
    left-sidebar=(component "flex-layout-empty")
    content=(component "flex-layout-empty")
    right-sidebar=(component "flex-layout-empty")
    footer=(component "flex-layout-footer")
  )
}}

templates.components.scalable-container.hbs

{{yield}}

templates.index.hbs

{{#flex-layout as |fl|}}
  {{#fl.header}}
    <div class="text-center">
      Only Header and Footer
      <br />
      Header
    </div>
  {{/fl.header}}

  {{#fl.content}}
    {{#flex-layout as |fl|}}
      {{#fl.left-sidebar}}
        Only Sidebars
        <br />
        Left Sidebar
      {{/fl.left-sidebar}}

      {{#fl.content}}
        {{#scalable-container}}
          <article>
            <h1>The History of Skiing on Scalable Containers</h1>
            <p>Skiing has a history of almost five millennia.[1] Although modern skiing has evolved from beginnings in Scandinavia, it may have been practiced more than 100 centuries ago in what is now China, according to an interpretation of ancient paintings.[2][3]</p>
            <p>The word "ski" is one of a handful of words Norway has exported to the international community. It comes from the Old Norse word "skíð" which means "split piece of wood or firewood".[4][5]</p>
            <p>Asymmetrical skis were used at least in northern Finland and Sweden until the late 19th century. On one leg the skier wore a long straight non-arching ski for sliding, and on the other a shorter ski for kicking. The bottom of the short ski was either plain or covered with animal skin to aid this use, while the long ski supporting the weight of the skier was treated with animal fat in similar manner to modern ski waxing.</p>
            <p>Early skiers used one long pole or spear. The first depiction of a skier with two ski poles dates to 1741.[6]</p>
            <p>Until the mid-19th century skiing was primarily used for transport, and since then has become a recreation and sport.[7] Military ski races were held in Norway during the 18th century,[8] and ski warfare was studied in the late 18th century.[9] As equipment evolved and ski lifts were developed skiing evolved into two main genres during the late 19th and early 20th century, Alpine and Nordic.</p>
          </article>
        {{/scalable-container}}
      {{/fl.content}}

      {{#fl.right-sidebar}}
        <div class="text-right">
          Only Sidebars
          <br />
          Right Sidebar
        </div>
      {{/fl.right-sidebar}}
    {{/flex-layout}}
  {{/fl.content}}

  {{#fl.footer}}
    <div class="text-center">
      Only Header and Footer
      <br />
      Footer
    </div>
  {{/fl.footer}}
{{/flex-layout}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {
    	"ember-metal-es5-getters": true
    }
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "canary",
    "ember-template-compiler": "canary",
    "ember-testing": "canary"
  }
}