View
138
Download
0
Category
Preview:
Citation preview
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.
Recommended