![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAoHXURruc7Oo9aO-uEmde5UY3VRf9OdaBtTbwUgPGIMzQnAvP-3eXp3J_8e0WjujjS2zYkqyoQvGPZtsVVVmAw1Mf3Z1labV7skMfyUIb5yX7HwcOTbq8r2hN9DyNguQ0q28aQnHRzA/s280/material.png)
This is useful for your Google Apps Script web-apps, because you just insert CSS into your rendered HTMLSevice. You don't have to vulcanize html files
At top of your code insert this snippet
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.indigo-pink.min.css"> <script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Now you can add class name into your already written HTML elements. For example if you have created
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Send form</button>
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlOTXIujmZbPCW4ysw0MiNRhpf13i2B-Tt1jRpXYNUj2yTVEQE22qmfDmn2-ajIUH9IHo1Cf5FhhOdxevEVLypweWMNqh2emBc7OPCDC-ztmujcxKhpIyoPDqwWCe-6mH5fQqRbQUjTg/s1600/icon.png)
Modularity first! Google offers customize your color scheme. There is online tool, where you can choose primary and secondary color. The generated unique URL defined your setup.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4hEKbVUATuQVPJiuIA6A2iKE5fe3YzSlm4mKNupT-tEhuqTt8Fi_KJFLJLvTGaZ0L6GNUA2EOSXTUYNXFuRdWLuKL61PnrTaJigISU1pkRY2_0MkQ40wFz3sf5U3ojTg-H_JDT9htfA/s280/materil2.png)
I have already implemented Material Design in public.
At AppSatori we launched free tool Google Apps Finder. If you typed domain, you get response whether company using Google Apps.
I needed create easy and fast first prototype. Instead of creating design and graphic elements, I have put together all material elements.
Live demo is available at https://script.google.com/macros/s/AKfycbxAGnsK0FcGIPB0Kfl38Bx4PbLa9hXZd4nqJ6-cqrcwr4alFllD/exec
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidTFmcoAAMES2l_jRTf3ah5nerb9sFPoDifgXu4RnK_dTcJLs7u0m6HARE2NlquYczHDdgw1VmWfPgzf7H0i9S7W1EaaWoqygT4lnJNSVpbygiV-twW7gBYBWX0nWQRW9mfpDm8f7apQ/s280/finder.png)