Material Design Typography and Metric Rules in Polymer

Question

My question is rather simple: What is the recommended way to implement the typographic and metric rules of Material Design (http://www.google.com/design/spec/material-design/introduction.html) in a Polymer application? For example, how to implement the units sp and dp in CSS?

Is there an official CSS file I could include? I am also not sure whether the Core and the Paper Elements of Polymer all conform to the general rules of Material Design. It says that the Topeka application bundled with Polymer is an example of Material Design. However, I haven't understood this by reading its source and in particular its style sheets. For example, the profile screen (https://github.com/Polymer/topeka-elements/blob/master/topeka-profile.html) does not follow all the metric rules, does it? (Or am I completely mistaken?)

Answer 1

I couldn't find a canonical stylesheet or sampler for Material Design typography either.

So I put this stylesheet together:

http://brm.io/material-design-type/

I followed the spec here:

http://www.google.com/design/spec/style/typography.html

Feel free to use it, I'm using it in a Polymer app and it looks decent.

EDIT:

The source is now available on github:

https://github.com/liabru/material-design-type

And CodePen:

http://goo.gl/27issq

Answer 2

I found this experimental repository on github: https://github.com/nevir/paper-theme-experiment It contains a theme element that also defines the different fonts that you find in the design spec and it also does some of the color theming. However it is far from finished, but it is a good start until the Polymer Team releases a finished version.