Material Design with Polymer

What is Material Design and how Polymer makes life easier for developers who want to apply these style guides to websites and progressive web apps.

Polymer is a library based on Web Components that provides us with a large set of components to implement interfaces, pages and applications based on Google’s Material Design guidelines.

The “material” components are cataloged within the “paper elements” classification, which offers you everything from elements dedicated to implementing a layout, to elements for interfaces as simple as buttons or as complex as dialog boxes.

In this article we will explain above what Material Design is and how to use Polymer elements to implement some interfaces.

Note: This content and the easy level of difficulty make it suitable even for people with no programming knowledge. You just have to and it’s something that anyone with a bit of an idea of ​​HTML can achieve.

What is Material Design

We are not going to stop to explain all the details around Material Design, but simply the concept. Basically they are style guides for the development of mobile applications and web applications created by Google. Material Designs are especially popular because all Google products implement them to a greater or lesser extent, from the search engine itself, the Google+ social network, or services such as Google Music.

But the most common place to experience Material Design is within Android itself, the system on which most of its top apps follow these style guides. If you use WhatsApp for Android, Google Play, Twitter, etc. You will see that the Look & Feel partly has the same root. That is Material Design.

The best thing to know something more is to go to your own.

How to make a Material Design with Polymer

You don’t really need Polymer or any other library to do Material Design, it would just apply the style guides indicated by Google. But the truth is that if you rely on Polymer, most of the work can be done very quickly, because most of Material Design’s interfaces, patterns, blocks, styles, and even colors are modeled in components from the element catalog. of Google.

It is simply about knowing the elements and knowing how to extract their juice to develop quickly and not have to reinvent the wheel. The elements are there well documented and with abundant examples, but sometimes the practice is not as simple as it might seem.

Knowing the elements is the key, knowing what they have and what is the most appropriate way to use them. But everything can be achieved little by little. The technical level or difficulty of the task is not great, but the number of elements and things that we may need to apply is.

You can start by taking a look at the above , which are the components that implement the interfaces and styles for building sites and progressive web apps with “Material” design.

How to start a Material Design with Polymer

As we have said, the first step is to learn how to use elements. Be careful, we are not talking about learning to program with Polymer, a task that may be a little more difficult, but rather learning to use the catalog of components created by them.

Basically you will have to learn how to import the elements you want to use and then use them like any other HTML tag. As this is something that we have already explained before, we leave you the link to the article about .

Note: Now, and here the difficulty can increase a bit, to create a suitably optimized app or site, you do have to follow some good practices, such as having a good application architecture and knowing how to compact the components with what we call the . Now we have a quick way to get a starting point for a Polymer application that already gives us the optimization part of the components and their union in one or more files.

Practicing with a toolbar component (paper-toolbar)

In order not to end the article without going into a slightly more practical part, we are going to work with one of the most used paper-element components, such as the paper-toolbar. This component is used to implement a standard toolbar according to the Material Design guidelines.

If you want to use the component, the first step is to go to the documentation and copy the Bower command to download the code in our project.

bower install –save PolymerElements/paper-toolbar Note: We have already discussed the operation on other occasions. For this command to work you must have performed the “bower init” before.

Once the component is installed, we import its code in the head of your page.

We are now in a position to use the paper-toolbar element, for which we can write the following code.

That will place the toolbar. You will see that inside it has a division with a class=”title”. That tells the component that this DIV element is the title bar function.

If you open the page from a web server you will see the first toolbar created working. It will be something like what you can see in this image:

At the moment this bar will not tell us much with its title alone, but it is a start. Now we are going to add some more code to it.

We are using a couple of elements with icons. They are elements that also belong to the “paper elements” catalog, for material design and are called paper-icon-button. They consist of icons that are also buttons. The appearance is the same as the normal icons, but pressing them will give them a “ripple” effect, such as a wave of color that briefly highlights them.

If we see the page after this change, we will see that nothing is seen and that is that the paper-icon-button element is not yet known to the browser. Again we have to do a couple of steps. The first download the code of this component through Bower.

bower install –save PolymerElements/paper-icon-button

Then we’ll need to import the component to make the browser aware of its code.

It may seem to be enough, but it is not. Actually these components use icons and the icon files themselves are not with us yet. The theme of the icons is simple, but it is not so trivial. They are categorized by icon packs and are in various component files. These icons that I am using “menu” and “info” belong to the basic package.

All icon sets are in the “iron-icons polymer elements” classification. You download them all at once with:

bower install –save PolymerElements/iron-icons

You will then need to import the icon pack(s) you want to use. For the basic icons you have to do the general “iron-icons” import.

Once the whole process is done you should see your toolbar with the icons used.

conclusion

With what we have seen we have a nice introduction to what is Material Design in Polymer. We have only used a couple of components of the paper-elements, but we are already seeing that the work mechanics are available to anyone.

If you want to complement this information, you can also watch a video where we carry out this process from scratch in a new project. It will be interesting especially for those people who have less experience with Polymer and need to see how things are done step by step.