[https://templates.mailchimp.com/getting-started/template-language/]
mc:edit="header"
Use this to name your email header.
mc:label="header"
Label is not required.
mc:hideable
Can be added to any html element to allow a element tot be hidden.
mc:repeatable
Is used to provide a duplication action for a particular element within a template.
Uses custom fonts. Uses Google Font with link and @import Google Fonts:
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap');
.font-family-roboto-condensed{
font-family: 'Roboto Condensed', sans-serif;
}
</style>
mailwind package used for implmenting email design. See the github page: yesandagency.github.io/ndli-email/
mailwind --input-html email.html --output-html index.html
https://stackshare.io/mailwind
npm install -g mailwind
Design your HTML email using the Tailwind utility classes like you normally would for the web.
Then run the following command to generate the corresponding CSS file:
mailwind --input-html email.html --output-css style.css
Or run this command to generate an inlined HTML file:
mailwind --input-html email.html --output-html index.html
--input-css
The path to your base CSS file. Use this if you need to write custom CSS. Defaults to style.css.
--input-html
The path to your HTML email file.
--output-css
The path to the CSS file that will be generated.
--output-html
The path to the inlined HTML file that will be generated.
--tailwind-config
The path to your custom Tailwind configuration file. Defaults to tailwind.config.js.
In the provided default config file, all the units are changed to pixel which is probably what you want for HTML emails.
Given an email.html file with this content:
<html>
<body>
<p class="font-bold text-lg">Welcome</p>
</body>
</html>running this command:
mailwind \
--input-html email.html \
--output-css style.css \
--output-html email-inlined.html
will generate the following CSS and inlined HTML files:
.text-lg {
font-size: 18px
}
.font-bold {
font-weight: 700
}<html>
<body>
<p class="font-bold text-lg" style="font-size: 18px; font-weight: 700;">Welcome</p>
</body>
</html>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent