Openings should be flexboxes

[dglazkov]

I just ran into a situation where I really needed the content opening of core-scaffold to be a flexbox, so that I could size the content easily. It seems that if we're relying on flexbox to be the main layout mechanism, we should just make all openings flexey (probably flex-direction:column, to be more usual block styling. WDYT? It takes one extra div to get out of the flexbox if you don't want it, but it's super-hacky (core-scaffold::shadow ::shadow #mainContainer) to do the other way around.

[frankiefu]

The idea is the main area is a scrollable area so you can just put content in there. (The internal is a core-header-panel) You can use fit to make the content fits to the main area. https://github.com/Polymer/core-scaffold/blob/master/core-scaffold.html#L32

and then make the content vertical layout to make it a flexbox.

<core-scaffold flex>
  ...
  <div id="content" fit vertical layout>
  </div>
</core-scaffold>

[dglazkov]

Interesting! The attributes stuff probably needs to go (it's crack cocaine on crack cocaine), but I would really like for us to have a fully described mental model of these elements. It's extremely hard to deduce it from the documentation. Mental model + terminology = amazeballs!

[robdodson]

I ran across this thread on StackOverflow and it made me wonder if core-scaffold is maybe too big to fit neatly into the core element set. I've seen a number of developers use it as a starting point, only to run up against a short coming and hack around it instead of emulating the structure of core-scaffold with their own custom elements. It might fit better under an examples or project scaffold category, so developers can use it as a reference. We could have a bunch of different scaffolds and then explain the thinking around them and illustrate how they're constructed, but be explicit that it's just one way to achieve a certain look and there are other ways to go about it depending on developer needs

[frankiefu]

+1. Also I think we should provide templates of common app layouts.

FWIW, the current core-scaffold could be replaced by template like this:

<core-drawer-panel narrow="{{narrow}}" >
  <div drawer>
    <!-- drawer content -->
  </div>
  <core-header-panel main>
    <core-toolbar>
      <core-icon-button id="menuButton" icon="menu" hidden?="{{!narrow}}" on-tap="{{togglePanel}}"></core-icon-button>
      <!-- toolbar content -->
    </core-toolbar>
    <!-- main content -->
  </core-header-panel>
</core-drawer-panel>

[MelHarbour]

@robdodson Came up against a similar thought when trying to implement a material design search box using core-scaffold. The design spec says that we should make the menu button hidden, and replaced by the back icon, but there's no way I can see to cleanly access the menu button without breaking encapsulation. I think this tends to suggest that core-scaffold is a good general purpose starter example, but with the heavy caveat that if you want to do anything 'interesting', you're going to have to reimplement it youself, as @frankiefu suggests.

[robdodson]

yeah, for the yeoman generator I've taken to just using core-drawer-panel as the scaffold.