Paper elements, Material Design guidelines, and out-of-the-box breathing space for elements

[viridium]

I've recently learned of Polymer 1.0 and decided to give it a try -- it looks great.

I am, however, a bit frustrated by the apparent need to use CSS even as I try to use built-in elements only to build a basic look-and-feel for my application.

For example, inside a paper-drawer-panel, I have a paper-header-panel (as drawer), configured with a paper-toolbar on top. The toolbar introduces its own padding by virtue of its design, whereas the content section does not (seeing as it's just a div). I then want to put text with some personality in there, and standard text doesn't look good at all. But, I found paper-item reasonably compelling. So I put paper-items both in the toolbar, as a title, and in the content, where I put a bunch of them. The trouble is that paper-item comes with its own padding, which makes it look good in the body of my panel and misaligned, due to additional padding, in the header.

The "main" part of my paper-drawer-panel is another paper-header-panel. In that one, I also have an icon to the left of another paper-item. I'm also experimenting with an icon to the right of it, just for kicks. Here, the paper-item looks exaggeratedly far away from either the icon to its left, and somewhat far away from the icon to its right.

The point I'm trying to convey is that I'm trying to put together these built-in Material Design components. Material Design comes not only with a set of components, but also with margin and padding guidelines.

And this leads to my question. Is there a way to tap into that Material Design standard without having to customize the elements with low level CSS, like adding padding: 24px here, removing padding there? I feel like the simplicity breaks down fast and it reminds me of low level days of yonder.

Preferably, things would work out-of-the-box by resorting to built-in elements.

For example, is there a container element with the same padding as a paper-toolbar? I could see myself standardizing on that as body in my paper-header-panels.

An alternative standard solution that may be less invasive to a developer: paper-header-panel should take away the padding responsibilities from the paper-toolbar (by overriding the CSS rules of the child paper-toolbar) and controls its own padding, which should then be consistent between header and content. That padding may be made configurable, possibly with coarse-grained configuration options consistent with MD guidelines (like small paddings, medium paddings, etc).

Here is my code, in case it matters. As you can see, I'm still playing with the layouts and resisting diving into CSS rules, because I feel an aversion towards customizing at that low level. Some of the content (like a few paper-items) is taken from the Polymer element docs.

<paper-drawer-panel>
  <paper-header-panel drawer>
    <paper-toolbar class="top-toolbar">
      <paper-item>Options</paper-item>
    </paper-toolbar>
    <div>
      <paper-item>
        <paper-item-body two-line>
          <div>Show your status</div>
          <div secondary>You are visible to everyone</div>
        </paper-item-body>
        <paper-checkbox></paper-checkbox>
        <iron-icon icon="warning" class="small"></iron-icon>
      </paper-item>
      <paper-item role="menuitemcheckbox">
        <paper-item-body>
          <div>Show your status</div>
        </paper-item-body>
        <paper-checkbox></paper-checkbox>
      </paper-item>
    </div>
  </paper-header-panel>
  <paper-header-panel main>
    <paper-toolbar class="top-toolbar">
      <paper-item>Hola</paper-item>
    </paper-toolbar>
    <paper-card heading="Card Title">
      <div class="card-content">Some content</div>
      <div class="card-actions">
        <paper-button>Some action</paper-button>
      </div>
    </paper-card>
  </paper-header-panel>
</paper-drawer-panel>

[tjsavage]

This issue was moved to PolymerElements/paper-elements#36