懒惰的人使用Polymer 1.x实施材料设计样式的方式是什么？

Question

When it comes to styling a forms based web app (or pages, components, etc.), how do I build it using the least amount of CSS, style tags, style classes, and style attributes possible?

My understanding was that the paper-* elements implement an opinionated material design style that can be used to build components with similar material design out-of-the-box.

I'm trying to build an internal app for employees at my company (thus, as long as it's not bad, styling is not that important). It's basically a bunch of forms pages that look like many of the protoypical menu-driven web sites (like the polymer docs pages ):

• Nav menu on the left
• Menu selected content on the right - text reports and forms mostly
• header/logo on top

However, when I tried to copy some things (like item list boxes) out of the elements catalog like the paper-item demos I couldn't match the look in my components simply by copying the HTML. The demo HTML referenced classes for which I had to copy a bunch of <style> tags in order to get them to work.

It felt like a lot of re-inventing the wheel to copy an often repeated look.

Answer 1

I'm not sure if I understand your problem. The paper-* elements aren't meant to build components, they ARE components. If you want to use them you have to go the full way. If you use them as intended, they look like in the demos out of the box. You can't just copy the HTML. A more traditional way to get the material-design-look is Materialize or Googles own MaterialDesignLite .