anchor.diff:  
   === The end result
   
  -In our heroes management application there would be two UI screens. This is the first screen with the list of all heroes made with Vaadin Grid of https://vaadin.com/elements[Vaadin Elements]:
  +In our heroes management application there will be two UI screens. This is the first screen with the list of all heroes made with Vaadin Grid of https://vaadin.com/elements[Vaadin Elements]:
   
   [[figure.heroes.list]]
   .A screenshot of the list of heroes
  
positive.code: 
  
  Style changes::
  Polymer elements come with nice builtin styles in the way of Material Desing. Angular 2 also provides style encapsulation mechanisms for our application components.
  +
  So the global styles are not needed anymore. Therefore we removed the `styles.css` external stylesheet and replaced it with `iron-flex-layout` and `paper-styles` style mixins imports and one embedded global style rule for body.
  +
  
negative.code: +
  [TIP]
  ====
  Instead of figuring out the exact rules and values for the body style, here we import and reuse CSS mixins and CSS custom properties declared in `iron-flex-layout` and `paper-styles`.
  ====
  +
  [IMPORTANT]
  ====
  When using custom CSS mixins and custom CSS properties in your main document styles, wrap your styles inside `<style is="custom-style"></style>` tag.
  
  See https://www.polymer-project.org/1.0/docs/devguide/styling.html[Styling section of the Polymer Developer Guide] for more information on styling Polymer elements and the document, custom CSS mixins and properties usage and limitations.
  ====
  
  Delete `styles.css` file from your project directory since it is no longer in use.
  