Material Design With Polymer

1. Material Design on Web with
Polymer
Suryadi Sulaksono
email: surya@ansvia.com
mt: @surya_black6

2. What is Material Design?#1
Material metaphor is the unifying theory of a rationalized space and a system of motion. Inspire

3. Material Design (Environment)#1
3D World
The material environment is a 3D space, which means all objects have x, y, and z dimensions.

4. Material Design (Environment)#2
Light and Shadow
Within the material environment, virtual lights illuminate the scene and allow objects to cast sha

5. Polymer
The Filosophy :
“Everything is an element ”
“As web apps got more complex, we collectively outgrew the basic set of eleme

6. Polymer is a library, not a framework
Polymer is a way to use material design, but isn't Material Design

7. 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:

9. Polymer Library#1
Core Elements
These are a set of visual and non-visual elements designed to wo

10. Polymer Library#2
Paper Elements
Implements the material design philosophy launched by Google recently at Google I/O 2014, an

11. Install Polymer #1
Bower
bower install –save Polymer/polymer
Zip File
download zip and extract
Pic: http://polymer-project.org

12. Install Polymer #2
GitHub
git clone https://github.com/Polymer/tools.git
./tools/bin/pull-all.sh

13. Builtwith Polymer #1
FoodTrack (http://foodtrack.de/)
Find local food trucks in your area by day of the week.

14. Builtwith Polymer #2
Ele.io (https://ele.io/)
Ele.io is a live code editor for writing and sharing Polymer elements.

15. Builtwith Polymer #3
App-router

16. <!-- Thanks -->