Is it possible to use CSS frameworks like Materialize or Bootstrap in GAS for Gmail HTML emails?

Other Questions Gmail
1

I’m trying to make my Gmail emails look better using Google Apps Script. I want to use CSS frameworks like Materialize or Bootstrap to style the HTML body. But when I try, the email shows up without any fancy formatting. It’s just plain old HTML.

Here’s what I’ve tried:

function sendFancyEmail() {
  const to = '[email protected]';
  const subject = 'Check out this styled email!';
  const htmlContent = HtmlService
    .createTemplateFromFile('emailTemplate')
    .evaluate()
    .getContent();
  GmailApp.sendEmail(to, subject, '', { htmlBody: htmlContent });
}

And my email template looks like this:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.example.com/framework.css">
  </head>
  <body>
    <div class="fancy-container">
      <h1>Hello there!</h1>
      <p class="special-text">This should be styled, but it's not working.</p>
    </div>
  </body>
</html>

Any ideas why the styling isn’t working? Is there a trick to using these frameworks with GAS and Gmail? How can I debug this?

2

I’ve encountered this challenge before. Unfortunately, email clients are notoriously finicky with CSS. They often strip out external stylesheets and have limited CSS support. Your best approach is to use inline styles directly on HTML elements. It’s not as elegant, but it’s reliable across different email clients.

Consider using email-specific frameworks like MJML or Foundation for Emails. These are designed with email limitations in mind. They can help you create responsive, well-styled emails without relying on standard web frameworks.

For layout, tables are still the most dependable option in emails. It feels archaic, but it works consistently. Remember to test your emails in various clients, as rendering can differ significantly between them. With some patience and experimentation, you can achieve attractive, functional email designs within these constraints.

3

hey there, ive had similar issues. email clients are picky bout external CSS. ur best bet is inline styles, like style=“color: blue;”. its a pain, but works. also, tables for layout (old school, i kno). keep it simple n test in diff clients. good luck!

4

I’ve wrestled with this issue before, and unfortunately, using external CSS frameworks like Materialize or Bootstrap in Gmail HTML emails is pretty much impossible. The problem lies in how email clients handle HTML and CSS.

Most email clients strip out tags and external stylesheets for security reasons. They also have limited CSS support. This means your carefully crafted styles using frameworks won’t make it through.

Instead, I’ve found success by using inline CSS styles directly on the HTML elements. It’s not as elegant, but it works. You can also use tools like Premailer to automatically inline your CSS.

For more complex layouts, try using HTML tables for structure (yes, it feels like going back in time). Email-specific CSS frameworks like MJML or Foundation for Emails can also be helpful.

Remember to test your emails across different clients. What works in Gmail might break in Outlook. It’s a bit of a headache, but with some trial and error, you can create good-looking emails without relying on standard web frameworks.