title: How to use built-in css color classes of material design in Polymer.dart?
body: <p>I am trying to test and port one of the official neon-animation example from JS to Dart.</p>
  
  <p>This is the original <a href="https://elements.polymer-project.org/elements/neon-animation?view=demo:demo/index.html&amp;active=neon-animated-pages" rel="nofollow noreferrer">js demo</a> and <a href="https://github.com/PolymerElements/neon-animation/tree/master/demo/grid" rel="nofollow noreferrer">js source</a>,<br>
  and this is my implemented <a href="http://easonpai.github.io/using-neon-animation/" rel="nofollow noreferrer">Dart demo</a> and <a href="https://github.com/EasonPai/using-neon-animation/tree/master" rel="nofollow noreferrer">Dart source</a></p>
  
  <p>2 problems encountered:</p>
  
  <ol>
  <li><p>in JS version, the color of div is assigned with class, ex: class="card green-300", green-300 shows a material color, and the same way is not working in Dart version, so <strong>what is the approach in Dart to assign a built-in material design color with css class?</strong> </p>
  
  <p><strong>html</strong>:</p>
  
  <pre><code>&lt;div id="[[index]]" class="card green-300" on-tap="onTapped"&gt;
     &lt;span&gt;[[item.value]]&lt;/span&gt;
  &lt;/div&gt;
  </code></pre></li>
  <li><p>All layout is defined in html, so the result is supposed to be the same. <strong>But in my Dart version the layout is broken. Maybe some additional settings is needed?</strong></p>
  
  <p><strong>result of js</strong>:
  <a href="https://i.stack.imgur.com/WuYJn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WuYJn.png" alt="enter image description here"></a></p>
  
  <p><strong>result of dart</strong>:
  <a href="https://i.stack.imgur.com/1h9Yf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1h9Yf.png" alt="enter image description here"></a></p></li>
  </ol>
  
  <p><strong>--updated 2016.05.24--</strong></p>
  
  <pre><code>Problem 1 is solved. 
  </code></pre>
  
  <p>As Günter Zöchbauer indicated, I forgot to import html that contains those handwritten &amp; pre-defined css color classes. I guess we just have to enumerate all colors and pre-defined those css classes somewhere. Thanks Günter.</p>
  
  <pre><code>Problem 2 is about solved. 
  </code></pre>
  
  <p>It is strange that the same content built by polymer.js works correctly on chrome v50 &amp; v51, but polymer.dart's only works on chrome v51.</p>