@polymer/app-layout


App Layout

A collection of elements, along with guidelines and templates that can be used to structure your app’s layout.

What is inside

$3

- app-box - A container element that can have scroll effects - visual effects based on scroll position.

- app-drawer - A navigation drawer that can slide in from the left or right.

- app-drawer-layout - A wrapper element that positions an app-drawer and other content.

- app-grid - A helper class useful for creating responsive, fluid grid layouts using custom properties.

- 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 - A wrapper element that positions an app-header and other content.

- app-toolbar - A horizontal toolbar containing items that can be used for label, navigation, search and actions.

$3

The templates are a means to define, illustrate and share best practices in App Layout. Pick a template and customize it:

- Getting started
(Demo - Source)

- Landing page
(Demo - Source)

- Publishing: Zuperkülblog
(Demo - Source)

- Shop: Shrine
(Demo - Source)

- Blog: Pesto
(Demo - Source)

- Scroll effects: Test drive
(Demo - Source)

$3

Sample code for various UI patterns:

- Transform navigation:
As more screen space is available, side navigation can transform into tabs.
(Demo - Source)

- Expand Card:
Content cards may expand to take up more horizontal space.
(Demo - Source)

- Material Design Responsive Toolbar:
Toolbar changes its height and padding to adapt mobile screen size.
(Demo - Source)

Users

Here are some web apps built with App Layout:

- Youtube Web
- Google I/O 2016
- Polymer project site
- Polymer summit
- Shop
- News
- webcomponents.org
- Chrome Status
- Project Fi
- NASA Open Source Software

See: Documentation,
Demo.

Usage

$3

`
npm install --save @polymer/app-layout
`

$3

`html

My app

`

$3

`js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/app-layout/app-layout.js';

class SampleElement extends PolymerElement {
static get template() {
return html

;
}
}
customElements.define('sample-element', SampleElement);
`

Contributing

If you want to send a PR to this element, here are
the instructions for running the tests and demo locally:

$3

`sh
git clone https://github.com/PolymerElements/app-layout
cd app-layout
npm install
npm install -g polymer-cli
`

$3

`sh
polymer serve --npm
open http://127.0.0.1:/demo/
`

$3

`sh
polymer test --npm
``