Can GMail html body be formatted with Materialize, Bootstrap etc. in GAS?

It's possible to style the html beforehand when sending email with an html body from Google Apps Script with the GMailApp.sendEmail method. But when trying to style using Materialize it fails for me and the mail shows up in basic unformatted html. I am aware the html templating is finicky but can styling frameworks at all be applied? If so, does anyone know how to debug what is causing it to fail?

Sample GA script (code.gs):

function spamMe() {
  let recipient = 'mymail@gmail.com';
  let subject = 'Your daily serving of spam. For FREE!';
  let html = HtmlService
    .createTemplateFromFile('emailbody')
    .evaluate()
    .getContent();
  GmailApp.sendEmail(recipient, subject, '', { htmlBody: html });
}

Sample html body template (emailbody.html):

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  </head>
  <body>    
    <div class="container">
      <h1>Hey worldo!</h1>
      <div class="row">
        <div class="col s12 m5">
          <div class="card-panel teal">
            <span class="white-text">I am a very simple card. I am good at containing small bits of information.
            I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.
            </span>
          </div>
        </div>
      </div>
    </div>    
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </body>
</html>

Solution

In theory it could work, as long as you inlined the code (style="..." rather than <link>). That's a really big "could" though, since most systems like Bootstrap, Materialise are built for the web, which functions quite differently than email.

So, most (all?) systems rely on <div>s, and Outlook desktops don't play well with <div>s, this is not going to work well for you.

Digging a little deeper, with two and three columns, you would set them up differently too so they stack even without media queries.

Also, a great many components are coded differently, and don't use, for example, flexbox which Bootstrap depends upon. See https://www.caniemail.com/ for detail that way.

However, there is a system called MJML (https://mjml.io/) that is close to what you may want. But it's compiled, rather than class-driven.