+
+
+
+
+
+
+
+
+```
+
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).
diff --git a/resources/script/polymer/app-layout/app-box/README.md b/resources/script/polymer/app-layout/app-box/README.md
index ecdd77e14..6c9efb9fb 100644
--- a/resources/script/polymer/app-layout/app-box/README.md
+++ b/resources/script/polymer/app-layout/app-box/README.md
@@ -10,9 +10,10 @@ rate than the foreground.
```
-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:
+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 {
@@ -30,14 +31,39 @@ Finally, app-box can have content inside. For example:
```
-## Scroll effects
+#### Importing the effects
-Effect name | Description
-----------------|-------------
-`parallax-background` | A parallax effect
+To use the scroll effects, you must explicitly import them in addition to `app-box`:
+
+```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 name
+
+```
+
+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 | {}
\ No newline at end of file
+`--app-box-background-front-layer` | Applies to the front layer of the background | {}
diff --git a/resources/script/polymer/app-layout/app-box/app-box.html b/resources/script/polymer/app-layout/app-box/app-box.html
index da159f419..961270cee 100644
--- a/resources/script/polymer/app-layout/app-box/app-box.html
+++ b/resources/script/polymer/app-layout/app-box/app-box.html
@@ -24,9 +24,10 @@
```
-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:
+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 {
@@ -44,11 +45,36 @@
Sub title
```
-## Scroll effects
+#### Importing the effects
-Effect name | Description
-----------------|-------------
-`parallax-background` | A parallax effect
+To use the scroll effects, you must explicitly import them in addition to `app-box`:
+
+```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 name
+
+```
+
+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
@@ -67,31 +93,24 @@
Polymer 1.0 replaces the shadow DOM polyfill with a lightweight shim, uses a new, faster data-binding system, and significantly reduces code size.
-
+
-
+
-
+
Using Web Components
Polymer leverages web components, a new set of standards designed to provide reusable components for the web.
-
+
-
+
Create your own elements
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.
](https://polymerelements.github.io/app-layout/)
+
+```html
+