anchor.diff:  
       <!-- Polymer Elements -->
       <link rel="import" href="bower_components/iron-icons/iron-icons.html">
  -    <link rel="import" href="bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
  -    <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
  +    <link rel="import" href="bower_components/app-layout/app-layout.html">
       <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
       <link rel="import" href="bower_components/paper-input/paper-input.html">
       <link rel="import" href="bower_components/vaadin-grid/vaadin-grid.html">
  
positive.code: @Component({
    selector: 'my-app',
    template: `
      <paper-scroll-header-panel fixed>
        <paper-toolbar [class.raised]="isInChildView">
          <paper-icon-button icon="arrow-back" *ngIf="isInChildView" (click)="goBack()"></paper-icon-button>
          <div class="title">{{title}}</div>
        </paper-toolbar>
        <router-outlet></router-outlet>
      </paper-scroll-header-panel>
    `,
    styles: [`
      paper-scroll-header-panel {
        height: 100%;
      }
  
      paper-toolbar.raised {
        @apply(--shadow-elevation-4dp);
      }
  
      paper-toolbar paper-icon-button {
        margin-left: -8px;
        margin-right: 24px;
      }
  
      paper-toolbar .title {
        margin-left: 56px;
      }
  
      paper-toolbar paper-icon-button + .title {
        margin-left: 0;
      }
    `],
    directives: [
  
negative.code: .A screenshot of empty application layout
  image::img/app-layout.png[width="432",height="644"]
  
  Now your application has a layout made by using `app-header-layout`, `app-header` and `app-toolbar`.
  
  === Elements used in this step
  
  `app-header-layout`:: The application layout consisting of the `app-header` and the main contents. In our case, it adds a scrollable container for the application contents as well.
  
  `app-header`:: Acts as a header in the application layout. The header is fixed in our application.
  
  `app-toolbar`:: Provides a toolbar wrapper.
  
  [NOTE]
  .app-layout elements are design-agnostic
  ====
  Polymer elements from `app-layout` set, including `app-toolbar` that we use, are design-agnostic. They do not enforce have Material Design look by default, though still support it. Therefore we need to adjust `app-toolbar` styles a bit.
  
  Therefore we added color rules for the `app-toolbar` in the styles of the `AppComponent`. We reuse the color values of default theme from `paper-styles`.
  
  Apart from the colors, it inherits the font family declared for the body. We have already decleared our font settings for the body in `index.html` earliear during this step.
  ====
  
  [IMPORTANT]
  .PolymerElement directives
  