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

[tjsavage]

From @viridium on August 26, 2015 21:37

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>

Copied from original issue: Polymer/polymer#2376

[viridium]

My findings so far: paper-item isn't a good choice for headings. A better choice, as per MD Typography [1], is the "title" font style. Using plan divs or spans to hold the text and stamping the with the paper-font-title CSS class results in proper alignment between the heading of the left panel and the paper-items contained in its body. That alignment seems fortuitous, though: it really should be the body enforcing a padding equal to that of the toolbar, so that any elements thrown in the body benefit from padding. Otherwise, every element will have to tend for its own margins so as not to be out of line.

The problem with inconsistent margins between the icons and the title in the other toolbar is illustrated in the screenshot at [2]. This problem seems to be due to intentional extra right margins being placed by the toolbar on any paper-item-buttons with an icon of "menu" -- intentional behavior. The other icon is optional anyway and probably not in line with MD guidelines, so I'm parking this issue by getting rid of that other icon.

[1] https://www.google.com/design/spec/style/typography.html#typography-styles
[2] http://screenshot.net/l3p4mcj