New tutorial on using Materialize CSS to create a Sidebar

[Andrew Roberts]

If you were interested in using the Materialize CSS framework and jQuery to create a sidebar in a GSheet check out this tutorial!

The script creates a basic form with file upload and client-side validation, and all the code is available on GitHub.

It could be easily modified to work in a pop-up dialogue, and/or on a Google Document.

Enjoy!

[Adam Morris]

Very cool! Thanks for sharing. It's an especially good idea to use materalize CSS and the associated design patterns.

--
You received this message because you are subscribed to the Google Groups "Google Apps Script Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-apps-script-c...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/eac57db8-e46c-4870-8e24-7cd3bd334bc5o%40googlegroups.com.

[Fernando Falcao]

Thanks a lot, Andrew!

I am starting to study the use of Materialize together with google script and your tutorial will help me to learn how they can work together!

Cheers,

Fernando

--

[Amit Agarwal]

Thanks for the tutorial, Andrew.

I have built the Mail Merge and Document Studio addons using the Materialize CSS framework but I am thinking of switching to a different framework as the developers seem to have abandoned the framework. 

The last major release of MaterializeCSS happened in 2018. The main contributor, @dogalo, has not pushed a single commit since last year. You can follow this thread for updates.

Just my 2 cents.

Amit Agarwal

www.labnol.org

 

To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/CAD0JAkGbVTr86Qnq%3Dea8eD9%2BohKW8CWx-Jz9mohXH6%2B7esXLjQ%40mail.gmail.com.

[Andrew Roberts]

Thanks for that Amit. I'd not ventured into the Materialize's GitHub repo before. There's some interesting reading there! 

Things do seem to have moved on a bit since I settled on Materialize. Which framework are you thinking of moving to? I know Bruce is a fan of MUI. Maybe Material Components are the way to go as they have the weight of Google behind them, although they do seem to have a bit of a learning curve??

It would be interesting to know what other people are using. 

To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/CA%2BQraH8wrMU_0BwCBynpwDwap0q_LqBsMW2oQRFcGi%3Dv4P2V7Q%40mail.gmail.com.

[Amit Agarwal]

I am likely moving to React with Tailwind though it does involve a learning curve for someone new to web development.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/CAN1QPJSB2eP7NkFjsHY1-aoQQc4La3i7uHB_T5BitnjHtFydTg%40mail.gmail.com.

[Adam Morris]

I’m moving to Svelte and also tailwind. I tried out react and Vue and preferred svelte by far actually.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/CA%2BQraH-v_Oj%2BG_92sy6NUFbYXBOqkK50HoLoqDTm5-hA_DfX-Q%40mail.gmail.com.

--

http://classroomtechtools.com

[Amit Agarwal]

Svelte is light and much easier to understand. The only reason I am choosing React is that has a whole ecosystem of UI components that I can directly import into my projects.

Amit Agarwal

www.labnol.org

💡 Automate your business with Mail Merge and Document Studio

 

To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/CAHQVb%2BSzEf18vtV33-OuCMmE59mLk7cHU_XNQf%2BYEe944gOJRQ%40mail.gmail.com.

[Adam Morris]

React definitely has a bigger ecosystem, that’s for sure. Svelte I think is a better choice for appscripts platform because it is aimed at beginners and doesn’t assume you already know how to do all of the HTML/CSS/JS/DOM/browser API stuff.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/CA%2BQraH9pPeT%3DTZkBTQjrNC%3DvxXM4dHLMBr%3DoAtAdJ5Miry12Bg%40mail.gmail.com.

--

http://classroomtechtools.com

[Andrew Roberts]

So many frameworks to play and so little time :( Maybe I'll just learn a new framework for every project??

To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/CAHQVb%2BR2hk5w3KrTqJpV6vAD0ZuB8Otw8p3%3D2ZRaS1z8f1uWMQ%40mail.gmail.com.

[Adam Morris]

I had summer holiday and had a few weeks to take them for a spin. My plan of attack is to try and build an app that you know cold. No design or question marks; you know exactly what to make. Then try and build with it. You don’t have to get a finished product just far enough to form an opinion. Then research what others say about it. 

To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/CAN1QPJTJ02pSMTDfOq6fXa_Jezxe%3DUMZH4RCuSS4x4qYr9CLJw%40mail.gmail.com.

--

http://classroomtechtools.com

[Faustino Rodriguez]

After suffering the deprecation of several frameworks/libraries, last year I switched over Vue + Vuetify, so far using them as libraries (not the full framework)

So far I am having a great experience with them both

[Adam Morris]

It’d be really interesting to compare notes on those who have used all these different options. 

To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/ef91b342-29f9-440c-8f0c-ab2e53de679dn%40googlegroups.com.

--

http://classroomtechtools.com

[Jorge Forero]

Here there are my options:

1- I use Materialize for small projects like sidebars and modal windows on Spreadsheets.  It's very simple to use and I think it's a very lightweight option for this kind of thing.

2- For bigger projects, I use Bootstrap (3.x and I willing to move to V4.). My approach was to get a prebuild template for the front-end and integrate it with GAS.  In general, this combination works well for me.

3- I'm taking some basic approaches to Viu and Vuetify in order to know a little bit more about this framework. I think is an option (maybe for small projects related to sheets), but it's too early for me to emit a concept. 

4- Reading some emails from this post, I will explore some suggestions like Svelte and Tailwind.  I think is very interesting to have some examples of how to use React with GAS.

Greetings, Jorge.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/CAHQVb%2BSRk%3DRy_bfCy9m1G%2BC-khp40%2BfFtH8uo1GFavm9LX%2BnMw%40mail.gmail.com.