Mail Snippet - Snippet para Email Marketing

📌 Descrição

O Mail Snippet é uma extensão para o VS Code que facilita a criação de emails marketing. Com um simples comando, você gera uma estrutura HTML otimizada e pronta para uso, economizando tempo e garantindo padrões consistentes.

🚀 Como Funciona

Ao criar um arquivo .html, basta digitar mail-snippet e o VS Code sugerirá a estrutura base para um email marketing. Isso ajuda a manter a organização e padronização do código.

🛠 Instalação

Abra o VS Code
Acesse a aba Extensões (Ctrl + Shift + X)
Procure por Mail Snippet
Clique em Instalar

✨ Uso

Crie um arquivo .html
No editor, digite mail-snippet
Pressione Enter
A estrutura do email marketing será gerada automaticamente!

📌 Exemplo de Saída

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-BR">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="color-scheme" content="light dark" />
  <meta name="supported-color-schemes" content="light dark" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <style type='text/css'>
    * { font-family: Arial, Helvetica, sans-serif; }
    table { border-spacing: 0; }
    td, tr, table { padding: 0; }
    p { font-size: 15px; }
    img { border: 0; }

    .just-mobile { display: none !important; }

    @media screen and (max-width: 500px) {
      .no-mobile { display: none; }
      .just-mobile { display: block !important; }

      .padding-x-xl { padding: 0 40px !important; }
      .padding-x-lg { padding: 0 30px !important; }
      .padding-x-md { padding: 0 20px !important; }
      .padding-x-sm { padding: 0 10px !important; }

      .p-8 { font-size: 8px !important; }
      .p-10 { font-size: 10px !important; }
      .p-12 { font-size: 12px !important; }
      .p-14 { font-size: 14px !important; }
      .p-16 { font-size: 16px !important; }
      .p-18 { font-size: 18px !important; }
      .p-22 { font-size: 22px !important; }
      .p-40 { font-size: 40px !important; }
    }
  </style>
  <!--[if (gte mso 9)|(IE)]>
  <style type="text/css">
    table { border-collapse: collapse !important; }
  </style>
  <![endif]-->
</head>

<body style="margin: 0; padding: 0; min-width: 100%; background-color: #DDE0E1">
  <!--[if (gte mso 9)|(IE)]>
  <style type="text/css">
    body { background-color: #DDE0E1 !important; }
    body, table, td, p, a { font-family: sans-serif, Arial, Helvetica !important; }
  </style>
  <![endif]-->
  <div style="font-size: 0px; color: #fafdfe; line-height: 1px; mso-line-height-rule: exactly; display: none; max-width: 0px; max-height: 0px; opacity: 0; overflow: hidden; mso-hide: all;"></div>
  <!--[if mso]> <center> <table> <tr> <td width="600"> <![endif]-->
  <center>
    <table align="center" role="presentation" style="margin: 0 auto; border-spacing: 0; background-color: #ffffff; margin: 0; width: 100%; max-width: 600px;">
      Olá
    </table>
  </center>
  <!--[if mso]> </td> </tr> </table> </center> <![endif]-->
  <custom name="opencounter" type="tracking" />
</body>
</html>

📌 Contribuição

Se você deseja sugerir melhorias ou reportar problemas, fique à vontade para abrir uma issue no repositório!

MailSnippet

pdlucs