Polymer -

Architecture

The offline cookbook this is useful when working with Service Worker Precache to provide the best experience for your users. Service worker lifecycle is explained in the second chapter of the udacity course Offline Web Applications which explains how to use IndexedDB & Service Worker

Responsive app layout explains some basic components drawers, toolbar, headers and esponsive navigation pattern

Polymer App Toolbox

Misc

polymer-admin this is build with gulp. needs some work to change to polymer-cli

Built with Polymer Sample of websites built with polymer

Shop case study

polymer-editor-service

Tools

Polymer Starter Kit

Polymer CLI is like a cheatsheet for commands

Polymer Designer

Google chrome lighthouse

Advanced tools

Polymer/vulcanize: Always use vulcanize for production
Polylint

polymer-analyzer

lazy imports

PolymerLabs/IMD Use IMD to manipulate HTML Imports

ex. doesn’t need to load both components

define('loader',['xh-app','xh-login'],
  function(xhApp,xhLogin){
  	if(isAuthed()){
  		xhApp();
	} else {
  		xhLogin();
	}
})

Atom tools

Polymer Snippets for Atom

polymer-atom linter Polylint in Atom is slow. A lot … Use polymer-ide instead.

polymer-ide

IDE

visualstudio with polymer ide

Components

Polymer Catalog - elements

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

iron-pages is used to select one of its children to show. One use is to cycle through a list of children “pages”.

iron-list displays a virtual, ‘infinite’ list. The template inside the iron-list element represents the DOM to create for each list item. The items property specifies an array of list item data.

iron-icons is a utility import that includes the definition for the iron-icon element, iron-iconset-svg element, as well as an import for the default icon set.

iron-icon displays an icon. By default an icon renders as a 24px square.

PolymerElements/seed-element

iron-media-query can be used to data bind to a CSS media query.

dom-if stamps the template iff the if property is truthy. When if becomes falsey, the stamped content is hidden but not removed from dom.

iron-ajax element exposes network request functionality.

iron-meta this might be the solution to global variables

Custom elements

vaadin

vaadin-grid

vaadin/vaadin-core-elements

Saulis/iron-data-table iron-data-table is a Web Component for displaying data as a table or grid. Built on top of iron-list using Polymer. This seems to be the only element that works well with iron-ajax

material-components Material components use Materialize.css and Vue.js to build UI . nice ui library but version alpha

robdodson/chart-elements See the component page for more information.

lazyload-image HTMLImageElement extension for lazy loading. Images will be loaded when they are shown.

addyosmani/x-imager A Polymer element for responsive images with Imager.js

rcaferati/awesome-button The awesome-button Vanilla JS custom element web component is a cool option to quickly add share buttons (or any kind of buttons) to your projects.

Zecat/paper-stepper Paper-stepper is an element made with Polymer to easily create a stepper with respect to the material specification.

kzima/vuestrap-icons Vuestrap Icons Component complements vuestrap web components with svg icons. SVG sprite consists of 223 icons from Iconic — www.useiconic.com/open plus two custom ones: circle-fill and circle-outline

hejty/social-media-icons A Polymer element with a set of scalable social media icons

x-tag/modal A modal is a UI component that pops up when specified, covering its parent element until it is dismissed.

oxygen-language is an element that determines the best match between a browser’s preferred language(s), and an application’s supported languages. It can be used to help internationalize your application.