Material Design on Web with

Polymer

Suryadi Sulaksono

email: surya@ansvia.com

mt: @surya_black6

What is Material Design?#1

Material metaphor is the unifying theory of a rationalized space and a system of motion. Inspired by study of paper and ink.

Material Design (Environment)#1

3D World

The material environment is a 3D space, which means all objects have x, y, and z dimensions.

Material Design (Environment)#2

Light and Shadow

Within the material environment, virtual lights illuminate the scene and allow objects to cast shadows. A key light creates d

Polymer

The Filosophy :

“Everything is an element ”

“As web apps got more complex, we collectively outgrew the basic set of elements that ships in browsers. Our solution was to

Polymer is a library, not a framework

Polymer is a way to use material design, but isn't Material Design

Polymer does a lot of reduces boilerplate that you have to write over and over

Source:

http://www.slideshare.net/mattsmcnulty/polymer-state-of-the-union-chrome-dev-summit-2014

Slide 15

Example:

Polymer Library#1

Core Elements

These are a set of visual and non-visual elements designed to work with the layout, user interaction, selection, and scaffolding

Polymer Library#2

Paper Elements

Implements the material design philosophy launched by Google recently at Google I/O 2014, and these include everything from a

Install Polymer #1

Bower

bower install –save Polymer/polymer

Zip File

download zip and extract

Pic: http://polymer-project.org

Install Polymer #2

GitHub

git clone https://github.com/Polymer/tools.git

./tools/bin/pull-all.sh

Builtwith Polymer #1

FoodTrack (http://foodtrack.de/)

Find local food trucks in your area by day of the week.

Builtwith Polymer #2

Ele.io (https://ele.io/)

Ele.io is a live code editor for writing and sharing Polymer elements.

Builtwith Polymer #3

App-router

<!-- Thanks -->