Material Design into your Google Apps Script application

Google recently introduced Material Design Lite, which is library of components and templates in pure CSS, HTML and JavaScript without any Polymer implementation.

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>

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.

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

Read More