Beautify Visualforce Pages with Google Material Design and Paper Elements

Twitter Boostrap is fairly popular design framework and I have written bunch of blog post on them, then learned about Flat UI, which were slick and beautiful, but not good enough to leverage real touch feel to application. 

Not too long ago, Google introduced Material Design, a brand new set of guidelines for designers and developers alike. Material Design introduces a fresh perspective on user interfaces, motion, and interaction states, and are a great foundation for you to build a product upon.

Material design offer more power to to users, as it is quicker to get back to and find a certain state withing an application and clearly adds more intuitiveness, feel and productivity to application

In recent android version called Lollipop, you might have seen massive changes in the designs, transition and feel of applications, Inbox by Gmail is another email application that have caught lot of attention by offering a  brand new experience, so I thought of giving kick start on material design, I simply started by importing Paper-elements on the page. Paper-element are set of elements design to produce paper type touch feel to the application, I used the CDN resource to the HTML

To get started, I created a codepen, embedded below that you can navigate here switching tabs below

See the Pen Google Material Design Paper Elements by Harshit Pandey (@oyecode) on CodePen.

Implementation
Create a visualforce page and import cdn resource for paper element and polymer core-elements as shown in the code below and start implementing check out Live Page here

Source Code
Check out the code to new Visualforce page available at this Github Gist

Summary
After importing, you can add custom style to arrange elements properly on page and them implementing paper-elements as shown in the snippet below and that's it,  the visualforce page is ready to serve. Moving further, there are more interesting resources out there, check out polymer apps using material design and this page will give the most fun you can imagine for the next five minutes using Material Design. Stay tuned for next post on more of my experiments using Material Design with Visualforce applications

Other important resources are