Footnote for Polymer: Build a Material Design Mobile Web App with Paper Elements

Footnote for Polymer: Build a Material Design Mobile Web App with Paper Elements.md

Footnote for Polymer: Build a Material Design Mobile Web App with Paper Elements

2. Installing core elements

• :host: Shadow DOM 201: CSS and Styling - HTML5 Rocks
  • Korean version
• unresolved: Styling elements - Polymer
• webcomponents.js: Polyfills — WebComponents.org

3. Building a responsive layout

• Basic layout, core-drawer-panel, core-header-panel, core-toolbar: Layout elements - Polymer
  • core-drawer-panel: core-drawer-panel
  • core-header-pannel: core-header-pannel
  • core-toolbar: core-toolbar
• core-icons: Using core icons - Polymer, core-icons demo
• paper-icon-button: paper-icon-button
• [drawer], [main]: Attribute selectors - CSS | MDN
• Check the responsiveness of the app in Inspect element

4. Opening a drawer

• this.$: API developer guide - Polymer

5. Using Paper elements

• polymer-fab: paper-fab
• polymer-input: paper-input
• Polymer.ready: API developer guide - Polymer
• paper-checkbox: paper-checkbox
• <template repeat="{{data}}" >, Data binding: Data binding overview - Polymer

6. Storing notes locally

• dataChanged: API developer guide - Polymer
• core-localstorage: core-localstorage

7. Using control elements

• core-item: core-item
• paper-toggle-button: paper-toggle-button
• paper-button: paper-button
• paper-slider: paper-slider
• paper-toast: paper-toast
• flex: Layout attributes - Polymer

8. Adding Paper effects

• paper-shadow: paper-shadow
• paper-ripple: paper-ripple
• fit: Layout attributes
• waterfall: core-header-panel demo
• class tall: core-toolbar
• tokenList and narrow

class="{{ {tall : !narrow} | tokenList }}" 
=> var class = function(narrow) {return !narrow ? 'tall' : ''};

Awesome

👍