Friday, August 28, 2015

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




Are you interested in this topic? Follow me on Twitter, Google+ or subscribe RSS

12 comments:

  1. This is something I've been desperate to find some time for - maybe it'll be another million years for me yet!

    Typo: At tope of your code inser this snippet => At the top of your code insert ...

    Haven't got permission to access Apps Finder.

    ReplyDelete
  2. De beste tijd van de wereld Luxe tijd! Als u deze luxe horloges wilt, wilt u dan deze horloges? Het is gebeurd, maar gestopt met? Omdat hun dure prijs stopt met uw stappen, is dit de meest geschikte plaats voor u. Bovenal moeten we dit bevestigenkopie horloges verkoopkopie horloges verkoop

    ReplyDelete
  3. Such a strikingly basic article.I basically wish to offer a creature proceed for the standard data you have perfect here on this post. every door direct mail® postcard prints at 55printing

    ReplyDelete
  4. Love to read it,Waiting For More new Update and I Already Read your Recent Post its Great Thanks. Art prints posters

    ReplyDelete
  5. "I аm curious tօ find out whaqt blog platfor you Һappen tߋ be սsing?
    I’m havіng some small security issues ѡith my latest website
    aand ӏ’ԁ likе to finnd sߋmething mоre secure. Do you Һave any recommendations?"
    Regards: Eve Hunt

    ReplyDelete
  6. I really appreciate this post. I¡¦ve been looking all over for this! Thank goodness I found it on Bing. You have made my day! Thank you again

    ReplyDelete
  7. Thanks for the useful information, give more updates like First time I visit your channel really nice, here after a daily visit.
    ecommerce website development company in chennai

    ReplyDelete
  8. Excellent blog here! Also your site loads up very fast! What web host are you using? Can I get your affiliate link to your host? I wish my site loaded up as fast as yours lol

    ReplyDelete
  9. Good way of telling, and pleasant article to obtain information concerning my presentation subject, which i am going to convey in institution of higher education
    regards:https://www.techlazy.com/live-tv-streaming-sites/

    ReplyDelete
  10. Hello It’s really a nice and helpful piece of info. I am happy that you shared this helpful info with us. Please stay us informed like this. Thank you for sharing. bye
    Tangki Panel
    Tangki Fiberglass
    Jual Septic Tank

    ReplyDelete