Posada Piedras Anchas

Una web applications, del tipo portal institucional, basado en Google Polymer 1.0, Polimer Started Kit 1.0

Incluye "out of the box":

• Polymer, Paper, Iron elements
• Material Design layout
• Routing with Page.js
• Unit testing with Web Component Tester
• End-to-end Build Tooling (including Vulcanize)

Demo

La última version demo (from master GitHub) se encuentra vulcanizada en Piedras Anchas en FireBase.com, basada en contenidos y estética de Posada Piedras Anchas

Los datos son tomados con FQL en formato JSON a traves del Graph de Facebook, fotos y textos.

Dependencias

• Node.js a JavaScript runtime built on Chrome's V8 JavaScript engine & npm
• Gulp the streaming build system
• Bower A package manager for the web

Instalacion de las dependencias

En el root del directorio clonado de GitHub, una vez instalado Node.js, abrir Powershell y correr:

npm install -g gulp bower && npm install && bower install

Editor

Archivos manipulados y editados con Brackets con las siguientes extensiones:

• Polymer Brackets Extension los linter para Polymer
• Emmet abreviaciones para escribir html y css rapido
• Brackets Color Highlighter muestra los colores en los css dentro del paño del archivo
• Brackets Gulp para arrancar el webserver local con debug
• Brackets Icons muestra los archivos con los iconos standard de hoy
• Brackets Git para manejar las ramificaciones dentro del brackets
• Brackets Beautify formatea el archivo al guardar
• Brackets TODO para traqueo de tareas y pendientes

Como alternativa todavia en face de pruebas se uso VScode

Deploy

Github

Por supuesto usaremos Git para el control de versiones y ramificaciones. El proyecto se aloja en Piedras Anchas GH

Firebase

La aplicación release usa Firebase para su publicación vulcanizada con gulp.

• Webapp
• Gestión

Ver detalles en

Application Theming & Styling by Polymer SK

Polymer 1.0 introduces a shim for CSS custom properties. We take advantage of this in app/styles/app-theme.html to provide theming for your application. You can also find our presets for Material Design breakpoints in this file.

Read more about CSS custom properties.

Frequently Asked Questions from PSK

Where do I customise my application theme?

Theming can be achieved using CSS Custom properties via app/styles/app-theme.html. You can also use app/styles/main.css for pure CSS stylesheets (e.g for global styles), however note that Custom properties will not work there under the shim.

A Polycast is also available that walks through theming using Polymer 1.0.

Where do I configure routes in my application?

This can be done via app/elements/routing.html. We use Page.js for routing and new routes can be defined in this import. We then toggle which <iron-pages> page to display based on the selected route.

Why are we using Page.js rather than a declarative router like <more-routing>?

<more-routing> (in our opinion) is good, but lacks imperative hooks for getting full control over the routing in your application. This is one place where a pure JS router shines. We may at some point switch back to a declarative router when our hook requirements are tackled. That said, it should be trivial to switch to <more-routing> or another declarative router in your own local setup.

Where can I find the application layouts from your Google I/O 2015 talk?

App layouts live in a separate repository called app-layout-templates. You can select a template and copy over the relevant parts you would like to reuse to Polymer Starter Kit.

You will probably need to change paths to where your Iron and Paper dependencies can be found to get everything working. This can be done by adding them to the elements.html import.