In a previous blogpost we mentioned the style guidelines for Material Design. Google also implemented these guidelines in Polymer, giving you a range of new HTML Web Components that follow the Material Design guidelines. This HTML extension is called Paper elements and is easy to install and use.
Installing Polymer and Paper elements
Using Bower, we can easily install Polymer and Paper elements, but you can also download the ZIPs on the polymer website.
bower install --save Polymer/polymer
bower install --save Polymer/core-elements
bower install --save Polymer/paper-elements
After installing, you will see that all the new HTML elements are added to the bower_components folder in your application.
Using core and paper-elements
First of all, we will need to include the polymer.html script to make sure that everything runs on legacy browsers supported by Polymer. Also a main.css file can be useful to style the added elements.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>polymer blogpost</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <script src="../bower_components/polymer/polymer.html"></script> <link rel="stylesheet" href="styles/main.css"> </head> <body> </body> </html>
Next, we will need to import some core-elements to create a nice looking app. For this example we will use core-toolbar, paper-icon-button, and paper-progress.
We can import these elements by adding a link to the html page’s HEAD section.
<link rel="import" href="../bower_components/core-toolbar/core-toolbar.html"> <link rel="import" href="../bower_components/core-header-panel/core-header-panel.html"> <link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html"> <link rel="import" href="../bower_components/paper-progress/paper-progress.html">
Now we can start using the new HTML elements, but first of all we need to add some attributes to the body tag. To make sure that the layout is displayed correctly we need to add: fullbleed (makes sure there are no more margins and paddings), layout (makes sure body takes up 100% of the screen), and vertical (makes sure the layout is vertically flowed).
<body fullbleed layout vertical> </body>
Now that we got the body out of the way, we will need to add the toolbar to our application. We’ll add a nice looking menu button to the left of the application’s name.
<body fullbleed layout vertical> <core-toolbar> <paper-icon-button icon="menu"></paper-icon-button> <div>MY APP</div> </core-toolbar> </body>
This will show us a nice looking toolbar with our application name (originally called MY APP). The button on the left of the title has the fancy ripple effect when you click on it (as described in the Material Design guidelines). but we can do more than that. For example we can add a progress bar to this toolbar. We can even make it fit and stick to the bottom.
<body fullbleed layout vertical> <core-toolbar> <paper-icon-button icon="menu"></paper-icon-button> <div>MY APP</div> <paper-progress class="bottom fit" value="30"></paper-progress> </core-toolbar> </body>
The result looks somewhat like this
This looks and feels already like a native mobile application and we didn’t have to style anything. Everything has been done with real HTML Elements, which makes the code very readable and easy to maintain.
For more examples and guides for creating your own polymer / paper elements application goto the polymer website.