jekyll-polymer-magazine 0.1.0

data/assets/bower_components/app-layout/README.md

@@ -0,0 +1,106 @@
+# App Layout [![Build Status](https://travis-ci.org/PolymerElements/app-layout.svg?branch=master)](https://travis-ci.org/PolymerElements/app-layout) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://beta.webcomponents.org/element/PolymerElements/app-layout)
+
+[<img src="https://app-layout-assets.appspot.com/assets/docs/app-layout.png" width="300" height="210">](https://polymerelements.github.io/app-layout/)
+
+<!---
+```
+<custom-element-demo>
+  <template>
+    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
+    <link rel="import" href="app-drawer/app-drawer.html">
+    <link rel="import" href="app-header/app-header.html">
+    <link rel="import" href="app-toolbar/app-toolbar.html">
+    <link rel="import" href="demo/sample-content.html">
+    <link rel="import" href="../iron-icons/iron-icons.html">
+    <link rel="import" href="../paper-icon-button/paper-icon-button.html">
+    <link rel="import" href="../paper-progress/paper-progress.html">
+    <style is="custom-style">
+      body {
+        margin: 0;
+        font-family: 'Roboto', 'Noto', sans-serif;
+        -webkit-font-smoothing: antialiased;
+        background: #f1f1f1;
+      }
+      app-toolbar {
+        background-color: #4285f4;
+        color: #fff;
+      }
+      paper-icon-button + [main-title] {
+        margin-left: 24px;
+      }
+      paper-progress {
+        display: block;
+        width: 100%;
+        --paper-progress-active-color: rgba(255, 255, 255, 0.5);
+        --paper-progress-container-color: transparent;
+      }
+      app-header {
+        @apply(--layout-fixed-top);
+        color: #fff;
+        --app-header-background-rear-layer: {
+          background-color: #ef6c00;
+        };
+      }
+      app-drawer {
+        --app-drawer-scrim-background: rgba(0, 0, 100, 0.8);
+        --app-drawer-content-container: {
+          background-color: #B0BEC5;
+        }
+      }
+      sample-content {
+        padding-top: 64px;
+      }
+    </style>
+    <next-code-block></next-code-block>
+  </template>
+</custom-element-demo>
+```
+-->
+```html
+<app-header reveals>
+  <app-toolbar>
+    <paper-icon-button icon="menu" onclick="drawer.toggle()"></paper-icon-button>
+    <div main-title>My app</div>
+    <paper-icon-button icon="delete"></paper-icon-button>
+    <paper-icon-button icon="search"></paper-icon-button>
+    <paper-icon-button icon="close"></paper-icon-button>
+    <paper-progress value="10" indeterminate bottom-item></paper-progress>
+  </app-toolbar>
+</app-header>
+<app-drawer id="drawer" swipe-open></app-drawer>
+<sample-content size="10"></sample-content>
+```
+
+https://polymerelements.github.io/app-layout/
+
+For additional documentation, please check out [Responsive app layout](https://www.polymer-project.org/1.0/toolbox/app-layout).
+
+A set of layout elements for your app. It includes:
+
+- [app-box](/app-box) - A container element that can have scroll effects - visual effects based on scroll position.
+
+- [app-drawer](/app-drawer) - A navigation drawer that can slide in from the left or right.
+
+- [app-drawer-layout](/app-drawer-layout) - A wrapper element that positions an app-drawer and other content.
+
+- [app-grid](/app-grid) - A helper class useful for creating responsive, fluid grid layouts using custom properties.
+
+- [app-header](/app-header) - A container element for app-toolbars at the top of the screen that can have scroll effects - visual effects based on scroll position.
+
+- [app-header-layout](/app-header-layout) - A wrapper element that positions an app-header and other content.
+
+- [app-scrollpos-control](/app-scrollpos-control) - A manager for saving and restoring the scroll position when multiple pages are sharing the same document scroller.
+
+- [app-toolbar](/app-toolbar) - A horizontal toolbar containing items that can be used for label, navigation, search and actions.
+
+### Install
+
+```bash
+$ bower install PolymerElements/app-layout --save
+```
+
+### Import
+
+```html
+<link rel="import" href="/bower_components/app-layout/app-layout.html">
+```

data/assets/bower_components/app-layout/app-box/README.md

@@ -0,0 +1,69 @@
+##<app-box>
+
+app-box is a container element that can have scroll effects - visual effects based on
+scroll position. For example, the parallax effect can be used to move an image at a slower
+rate than the foreground.
+
+```html
+<app-box style="height: 100px;" effects="parallax-background">
+  <img background src="picture.png" style="width: 100%; height: 600px;">
+</app-box>
+```
+
+Notice the `background` attribute in the `img` element; this attribute specifies that that
+image is used as the background. By adding the background to the light dom, you can compose
+backgrounds that can change dynamically. Alternatively, the mixin `--app-box-background-front-layer`
+ allows to style the background. For example:
+
+```css
+  .parallaxAppBox {
+    --app-box-background-front-layer: {
+      background-image: url(picture.png);
+    };
+  }
+```
+
+Finally, app-box can have content inside. For example:
+
+```html
+<app-box effects="parallax-background">
+  <h2>Sub title</h2>
+</app-box>
+```
+
+#### Importing the effects
+
+To use the scroll effects, you must explicitly import them in addition to `app-box`:
+
+```html
+<link rel="import" href="/bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
+```
+
+#### List of effects
+
+* **parallax-background**
+A simple parallax effect that vertically translates the backgrounds based on a fraction
+of the scroll position. For example:
+
+```css
+app-header {
+  --app-header-background-front-layer: {
+    background-image: url(...);
+  };
+}
+```
+```html
+<app-header style="height: 300px;" effects="parallax-background">
+  <app-toolbar>App name</app-toolbar>
+</app-header>
+```
+
+The fraction determines how far the background moves relative to the scroll position.
+This value can be assigned via the `scalar` config value and it is typically a value
+between 0 and 1 inclusive. If `scalar=0`, the background doesn't move away from the header.
+
+## Styling
+
+Mixin | Description | Default
+----------------|-------------|----------
+`--app-box-background-front-layer` | Applies to the front layer of the background | {}

data/assets/bower_components/app-layout/app-box/app-box.html

@@ -0,0 +1,238 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../../iron-resizable-behavior/iron-resizable-behavior.html">
+<link rel="import" href="../app-scroll-effects/app-scroll-effects-behavior.html">
+
+<!--
+app-box is a container element that can have scroll effects - visual effects based on
+scroll position. For example, the parallax effect can be used to move an image at a slower
+rate than the foreground.
+
+```html
+<app-box style="height: 100px;" effects="parallax-background">
+  <img background src="picture.png" style="width: 100%; height: 600px;">
+</app-box>
+```
+
+Notice the `background` attribute in the `img` element; this attribute specifies that that
+image is used as the background. By adding the background to the light dom, you can compose
+backgrounds that can change dynamically. Alternatively, the mixin `--app-box-background-front-layer`
+allows to style the background. For example:
+
+```css
+  .parallaxAppBox {
+    --app-box-background-front-layer: {
+      background-image: url(picture.png);
+    };
+  }
+```
+
+Finally, app-box can have content inside. For example:
+
+```html
+<app-box effects="parallax-background">
+  <h2>Sub title</h2>
+</app-box>
+```
+
+#### Importing the effects
+
+To use the scroll effects, you must explicitly import them in addition to `app-box`:
+
+```html
+<link rel="import" href="/bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
+```
+
+#### List of effects
+
+* **parallax-background**
+A simple parallax effect that vertically translates the backgrounds based on a fraction
+of the scroll position. For example:
+
+```css
+app-header {
+  --app-header-background-front-layer: {
+    background-image: url(...);
+  };
+}
+```
+```html
+<app-header style="height: 300px;" effects="parallax-background">
+  <app-toolbar>App name</app-toolbar>
+</app-header>
+```
+
+The fraction determines how far the background moves relative to the scroll position.
+This value can be assigned via the `scalar` config value and it is typically a value
+between 0 and 1 inclusive. If `scalar=0`, the background doesn't move away from the header.
+
+## Styling
+
+Mixin | Description | Default
+----------------|-------------|----------
+`--app-box-background-front-layer` | Applies to the front layer of the background | {}
+
+@group App Elements
+@element app-box
+@demo app-box/demo/document-scroll.html Document Scroll
+@demo app-box/demo/scrolling-region.html Scrolling Region
+-->
+
+<dom-module id="app-box">
+  <template>
+    <style>
+      :host {
+        position: relative;
+        display: block;
+      }
+
+      #background {
+        @apply(--layout-fit);
+        overflow: hidden;
+        height: 100%;
+      }
+
+      #backgroundFrontLayer {
+        min-height: 100%;
+        pointer-events: none;
+        background-size: cover;
+        @apply(--app-box-background-front-layer);
+      }
+
+      #contentContainer {
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
+
+      :host([disabled]),
+      :host([disabled]) #backgroundFrontLayer {
+        transition: none !important;
+      }
+    </style>
+
+    <div id="background">
+      <div id="backgroundFrontLayer">
+        <content select="[background]"></content>
+      </div>
+    </div>
+    <div id="contentContainer">
+      <content id="content"></content>
+    </div>
+  </template>
+
+  <script>
+    Polymer({
+      is: 'app-box',
+
+      behaviors: [
+        Polymer.AppScrollEffectsBehavior,
+        Polymer.IronResizableBehavior
+      ],
+
+      listeners: {
+        'iron-resize': '_resizeHandler'
+      },
+
+      /**
+       * The current scroll progress.
+       *
+       * @type {number}
+       */
+      _progress: 0,
+
+      attached: function() {
+        this.resetLayout();
+      },
+
+      /**
+       * Resets the layout. This method is automatically called when the element is attached to the DOM.
+       *
+       * @method resetLayout
+       */
+      resetLayout: function() {
+        this.debounce('_resetLayout', function() {
+          // noop if the box isn't in the rendered tree
+          if (this.offsetWidth === 0 && this.offsetHeight === 0) {
+            return;
+          }
+
+          var scrollTop = this._clampedScrollTop;
+          var savedDisabled = this.disabled;
+
+          this.disabled = true;
+          this._elementTop = this._getElementTop();
+          this._elementHeight = this.offsetHeight;
+          this._cachedScrollTargetHeight = this._scrollTargetHeight;
+          this._setUpEffect();
+          this._updateScrollState(scrollTop);
+          this.disabled = savedDisabled;
+        }, 1);
+      },
+
+      _getElementTop: function() {
+        var currentNode = this;
+        var top = 0;
+
+        while (currentNode && currentNode !== this.scrollTarget) {
+          top += currentNode.offsetTop;
+          currentNode = currentNode.offsetParent;
+        }
+        return top;
+      },
+
+      _updateScrollState: function(scrollTop) {
+        if (this.isOnScreen()) {
+          var viewportTop = this._elementTop - scrollTop;
+          this._progress = 1 - (viewportTop + this._elementHeight) / this._cachedScrollTargetHeight;
+          this._runEffects(this._progress, scrollTop);
+        }
+      },
+
+      /**
+       * Returns true if this app-box is on the screen.
+       * That is, visible in the current viewport.
+       *
+       * @method isOnScreen
+       * @return {boolean}
+       */
+      isOnScreen: function() {
+        return this._elementTop < this._scrollTop + this._cachedScrollTargetHeight
+            && this._elementTop + this._elementHeight > this._scrollTop;
+      },
+
+      _resizeHandler: function() {
+        this.resetLayout();
+      },
+
+      _getDOMRef: function(id) {
+        if (id === 'background') {
+          return this.$.background;
+        }
+        if (id === 'backgroundFrontLayer') {
+          return this.$.backgroundFrontLayer;
+        }
+      },
+
+      /**
+       * Returns an object containing the progress value of the scroll effects.
+       *
+       * @method getScrollState
+       * @return {Object}
+       */
+      getScrollState: function() {
+        return { progress: this._progress };
+      }
+    });
+  </script>
+</dom-module>

data/assets/bower_components/app-layout/app-box/demo/document-scroll.html

@@ -0,0 +1,216 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <title>app-box demo using the document scroll</title>
+
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+
+  <link rel="import" href="../../app-toolbar/app-toolbar.html">
+  <link rel="import" href="../../demo/sample-content.html">
+  <link rel="import" href="../../app-scroll-effects/effects/parallax-background.html">
+  <link rel="import" href="../app-box.html">
+
+  <style is="custom-style">
+
+    body {
+      margin: 0;
+      font-family: 'Roboto', 'Noto', sans-serif;
+      background-color: #eee;
+      scroll-behavior: smooth;
+    }
+
+    header {
+      background-color: white;
+      height: 128px;
+    }
+
+    app-toolbar {
+      font-size: 18px;
+      font-weight: 400;
+      letter-spacing: 5px;
+      text-align: center;
+      color: #1a237e;
+    }
+
+    .nav {
+      height: 64px;
+      margin: 0;
+      padding: 0;
+      text-align: center;
+      background-color: rgba(255, 255, 255, 0.8);
+    }
+
+    .nav li {
+      display: inline-block;
+      list-style: none;
+    }
+
+    .nav a {
+      display: inline-block;
+      font-weight: 12px;
+      line-height: 64px;
+      text-decoration: none;
+      color: black;
+      font-weight: 300;
+      margin: 0 10px;
+    }
+
+    .nav a:hover {
+      color: #444;
+      border-bottom: 1px solid #999;
+    }
+
+    [threshold-triggered] {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      z-index: 1;
+      -webkit-backdrop-filter: saturate(180%) blur(20px);
+      backdrop-filter: saturate(180%) blur(20px);
+    }
+
+    .first, .second, .third, .fourth {
+      height: 640px;
+    }
+
+    .second {
+      --app-box-background-front-layer: {
+        background-image: url(//app-layout-assets.appspot.com/assets/bg2.jpg);
+        background-position: bottom;
+        padding-bottom: 120px;
+        margin-top: -20px;
+        height: 100%;
+      };
+    }
+
+    .third {
+      --app-box-background-front-layer: {
+        background-image: url(//app-layout-assets.appspot.com/assets/bg3.jpg);
+        background-position: bottom;
+        padding-bottom: 120px;
+        margin-top: -20px;
+        height: 100%;
+      };
+    }
+
+    .fourth {
+      --app-box-background-front-layer: {
+        background-image: url(//app-layout-assets.appspot.com/assets/bg4.jpg);
+        background-position: bottom;
+        padding-bottom: 120px;
+        margin-top: -20px;
+        height: 100%;
+      };
+    }
+
+    section {
+      padding-top: 100px;
+    }
+
+    article {
+      font-weight: 100;
+      max-width: 500px;
+      text-align: center;
+      margin: 0 auto 100px auto;
+    }
+    article h2 {
+      font-weight: 100;
+      font-size: 50px;
+      margin: 5px;
+    }
+    article p {
+      font-size: 18px;
+      line-height: 30px;
+    }
+
+    article hr {
+      width: 100px;
+      height: 1px;
+      border: none;
+      margin: 20px auto;
+      background-color: black;
+    }
+
+  </style>
+</head>
+<body class="fullbleed" unresolved>
+
+  <header>
+    <app-toolbar>
+      <div main-title>POLYMER</div>
+    </app-toolbar>
+    <app-box threshold="64">
+      <ul role="navigation" class="nav">
+        <li><a href="#speed">Speed</a></li>
+        <li><a href="#modern">Modern</a></li>
+        <li><a href="#standard">Standard</a></li>
+        <li><a href="#create">Create</a></li>
+      </ul>
+    </app-box>
+  </header>
+
+  <main>
+    <section id="speed">
+      <article>
+        <hr />
+        <h2>Built for Speed</h2>
+        <p>Polymer 1.0 replaces the shadow DOM polyfill with a lightweight shim, uses a new, faster data-binding system, and significantly reduces code size.</p>
+      </article>
+      <app-box class="first" effects="parallax-background">
+        <!--
+          app-box allows to style the mixin `--app-box-background-front-layer` or create a custom background in the light DOM.
+          In this case, we create a custom background by adding the attribute `background` to the `img` in
+          the light DOM.
+        -->
+        <img background src="//app-layout-assets.appspot.com/assets/bg1.jpg" style="width:100%; height: 900px" />
+      </app-box>
+    </section>
+
+    <section id="modern">
+      <article>
+        <hr />
+        <h2>For Modern Browsers</h2>
+        <p>Polymer is built from the ground up for modern browsers, using the latest web platform APIs. Polyfills provide support on evergreen browsers for APIs that aren't universal yet.</p>
+      </article>
+      <!--
+        This app-box uses the class `.second` and the mixin `--app-box-background-front-layer` to assign the background image.
+      -->
+      <app-box class="second" effects="parallax-background"></app-box>
+    </section>
+
+    <section id="standard">
+      <article>
+        <hr />
+        <h2>Using Web Components</h2>
+        <p>Polymer leverages web components, a new set of standards designed to provide reusable components for the web.</p>
+      </article>
+      <app-box class="third" effects="parallax-background"></app-box>
+    </section>
+
+    <section id="create">
+      <article>
+        <hr />
+        <h2>Create your own elements</h2>
+        <p>The Polymer library makes it easy to create your own powerful elements. Give your element some markup and properties, and then use it on a site. Polymer provides useful features like templating and data binding to reduce the amount of boilerplate you need to write.</p>
+      </article>
+      <app-box class="fourth" effects="parallax-background"></app-box>
+    </section>
+  </main>
+
+</body>
+</html>