<!DOCTYPE html><html><head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,user-scalable=yes">

  <title>App Layout</title>

  <script src="../webcomponentsjs/webcomponents-lite.js"></script>

  <link rel="import" href="../font-roboto/roboto.html">
  <link rel="import" href="../iron-ajax/iron-ajax.html">
  <link rel="import" href="../iron-icons/iron-icons.html">
  <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
  <link rel="import" href="../paper-button/paper-button.html">
  <link rel="import" href="../paper-styles/shadow.html">
  <link rel="import" href="app-layout.html">
  <link rel="import" href="site/device-viewer/device-layout-viewer.html">

  <style is="custom-style">body{margin:0;font-family:'Roboto', 'Noto', sans-serif;background-color:#fafafa;}a{text-decoration:none;font-size:inherit;color:inherit;}app-header{background-color:#4FB6F7;color:#fff;}.top-toolbar{height:320px;}.heading{font-family:Roboto Mono;margin-left:40px;}.heading > .title{font-size:56px;}.heading > .sub-title{margin-top:24px;line-height:1.6;}.bottom-toolbar{height:136px;}.bottom-tools{margin-left:auto;}.bottom-toolbar paper-button{width:220px;background-color:#FC6C9C;margin:4px 8px;text-transform:none;}.bottom-toolbar paper-button iron-icon{margin-right:8px;}device-layout-viewer{height:600px;}.horizontal.layout{@apply (--layout-horizontal);}.vertical.layout{@apply (--layout-vertical);}.center.layout{@apply (--layout-center);}.flex{@apply (--layout-flex);}section{text-align:center;padding-top:80px;}section > h1{margin:0 0 32px 0;font-size:48px;font-weight:300;}section > p{max-width:640px;margin:32px auto;padding:0 8px;font-size:18px;letter-spacing:0.05em;line-height:1.5;}.grid{width:832px;@apply (--layout-horizontal);@apply (--layout-wrap);margin:0 auto;}.grid-item{position:relative;width:400px;max-height:420px;@apply (--layout-flex-none);margin:8px;padding-bottom:24px;background-color:#fff;@apply (--shadow-elevation-2dp);}.grid-item > .image{height:300px;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;}.grid-item > .caption{border-top:1px solid #ddd;text-align:center;color:#5c5c5c;}.caption > h3{margin:24px 0;}.caption > p{margin:16px 16px 24px;line-height:1.5;}.grid-item paper-button{background-color:#4FB6F7;color:#fff;}.misc-link{display:inline-block;padding:12px 0;font-size:24px;line-height:1.25;color:#147BCC;}footer{padding-top:200px;}.footer-inner{max-width:900px;margin:0 auto;padding:36px 16px;border-top:1px solid #acacac;font-size:18px;line-height:3;color:#147BCC;}.footer-inner .title{font-size:20px;color:#333;}.dot-separator{padding:0 8px;}.dot-separator::after{content:'\2022';}.logo{width:40px;height:40px;margin-right:8px;background:url(site/images/polymer.svg) 50% no-repeat;background-size:contain;}@media (max-width: 1024px){.heading{margin-left:16px;}device-layout-viewer{height:340px;}}@media (max-width: 848px){.grid{width:416px;}}@media (max-width: 600px){.responsive.horizontal.layout{@apply (--layout-vertical);}.wide-only{display:none;}.heading{margin-left:0;}device-layout-viewer{height:240px;}.bottom-toolbar paper-button{width:200px;margin:4px 0;}}@media (max-width: 432px){.heading > .title{font-size:40px;}.grid{width:auto;@apply (--layout-vertical);}.grid-item{width:auto;}}</style>

</head>
<body unresolved="">

  <template is="dom-bind">

    <iron-ajax url="site/resources.json" auto="" last-response="{{resources}}"></iron-ajax>

    <app-header fixed="">

      <app-toolbar class="top-toolbar">
        <div class="heading">
          <div class="title">App Layout</div>
          <div class="sub-title">A collection of elements, along with guidelines and templates that can be used to structure your app’s layout.</div>
        </div>
      </app-toolbar>

      <app-toolbar class="bottom-toolbar">
        <div class="bottom-tools responsive horizontal layout">
          <a href="https://github.com/PolymerElements/app-layout" target="_blank" tabindex="-1">
            <paper-button raised=""><iron-icon icon="file-download"></iron-icon>View On GitHub</paper-button>
          </a>
          <a href="https://elements.polymer-project.org/elements/app-layout" target="_blank" tabindex="-1">
            <paper-button raised=""><iron-icon icon="subject"></iron-icon>API Docs</paper-button>
          </a>
        </div>
      </app-toolbar>

    </app-header>

    <section>

      <device-layout-viewer device="all" src="templates/publishing/"></device-layout-viewer>

    </section>

    <section>

      <h1>Templates</h1>

      <p>The templates are a means to define, illustrate and share best practices in App Layout. Select a template and customize to suit your needs.</p>

      <div class="grid">

        <template is="dom-repeat" items="{{resources.templates}}">

          <div class="grid-item">
            <div class="image" style$="background-image: url({{item.thumbnail}});"></div>
            <div class="caption">
              <h3>{{item.name}}</h3>
              <div>
                <a href="{{item.demoUrl}}" target="_blank" tabindex="-1">
                  <paper-button raised="">View</paper-button>
                </a>
                <a href="{{item.sourceUrl}}" target="_blank" tabindex="-1">
                  <paper-button raised="">Source</paper-button>
                </a>
              </div>
            </div>
          </div>

        </template>

      </div>

    </section>

    <section>

      <h1>Patterns</h1>

      <p>Sample code for various UI patterns.</p>

      <div class="grid">

        <template is="dom-repeat" items="{{resources.patterns}}">

          <div class="grid-item">
            <div class="caption">
              <h3>{{item.name}}</h3>
              <p>{{item.desc}}</p>
              <div>
                <a href="{{item.demoUrl}}" target="_blank" tabindex="-1">
                  <paper-button raised="">View</paper-button>
                </a>
                <a href="{{item.sourceUrl}}" target="_blank" tabindex="-1">
                  <paper-button raised="">Source</paper-button>
                </a>
              </div>
            </div>
          </div>

        </template>

      </div>

    </section>

    <section>

      <h1>Users</h1>

      <p>Here are some applications built with App Layout. Get started on your own and we might put it here to showcase and share your work.</p>

      <div class="grid">

        <template is="dom-repeat" items="{{resources.apps}}">

          <div class="grid-item">
            <div class="image" style$="background-image: url({{item.thumbnail}});"></div>
            <div class="caption">
              <h3>{{item.name}}</h3>
              <div>
                <a href="{{item.demoUrl}}" target="_blank" tabindex="-1">
                  <paper-button raised="">View</paper-button>
                </a>
              </div>
            </div>
          </div>

        </template>

      </div>

    </section>

    <section class="vertical center layout">

      <h1>Tools and References</h1>

      <a class="misc-link" href="https://www.polymer-project.org/1.0/toolbox/app-layout" target="_blank">Responsive App Layout</a>
      <a class="misc-link" href="https://www.polymer-project.org/1.0/toolbox/" target="_blank">Polymer App Toolbox</a>
      <a class="misc-link" href="https://www.google.com/design/spec/layout/adaptive-ui.html#adaptive-ui-patterns" target="_blank">Material Design Adaptive UI Pattern</a>

    </section>

    <footer>
      <div class="footer-inner responsive horizontal center layout">
        <a class="horizontal center layout" target="_blank" href="https://www.polymer-project.org">
          <div class="logo"></div><div class="title">Polymer</div>
        </a>
        <div class="flex"></div>
        <a target="_blank" href="https://polymer.github.io/LICENSE.txt" data-outbound="license-txt">© 2015 Polymer Authors</a>
        <div class="dot-separator wide-only"></div>
        <a target="_blank" href="https://www.polymer-project.org" data-outbound="about-polymer">About Polymer</a>
      </div>
    </footer>

  </template>



</body></html>