Generate HTML and LESS code for mails. Magento2-mail-generator this is a fork foundation-emails-template
It has a Gulp-powered build system with these features:
- Handlebars HTML templates with Panini
- Simplified HTML email syntax with ODInky - this is a fork Inky
- LESS compilation
- Image compression
- Built-in BrowserSync server
- Full email inlining process
-
clone project files
git clone git@github.com:Overdose-Digital/magento2-mail-generator.git -
open project dir
-
install packages.
npm install -
from
od-libsfolder: clone libraries to -->node_modules -
will start the project.
npm start
Run npm start to kick off the build process. A new browser tab will open with a server pointing to your project files.
Run npm run build to inline your CSS into your HTML along with the rest of the build process.
Run npm run litmus to build as above, then submit to litmus for testing. AWS S3 Account details required (config.json)
Run npm run mail to build as above, then send to specified email address for testing. SMTP server details required (config.json)
Run npm run zip to build as above, then zip HTML and images for easy deployment to email marketing services.
Magento2-mail-generator follows a simple and easy to customize coding structure. Here is the sample for your reference:
src/assets/- Contains all of the assets referencedsrc/assets/components/- components that you can connect to templatessrc/assets/templates/- templates Filessrc/assets/templates/index.html- ODemail Homepagesrc/assets/templates/youNewTemplate.html- created new template hiresrc/assets/web/- Contains all of the assets referencedsrc/assets/web/images/- Images filessrc/assets/web/css/- LESS files
We have added LESS .less files in template. You can find less file here - src/assets/web/css
Open the src/assets/web/css/_variables.scss and edit the values according to your needs. If you need more Advanced Setup then you can edit the Respective Files yourself which have been branched inside the same Folder. It is completely at your discretion only to include the Required .less
Files you need to minimize the amount of CSS & including only the Styles of the Blocks you need. This can be setup in your email-inline.less File.
OdInky is a templating language that converts simple HTML tags into the complex table HTML required for emails.
Odinky - his fork inky lib
Grid:
<container><table-content><row><columns>Button: -<button>,<button-secondary>,<button-link>Spacer:<spacer>Menu: -<menu>-<item>Banner: -<banner>
You can set custom styles for any component:
<container class="custom-style">
<row class="custom-style">
<columns col="12" class="custom-style">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pretium id diam nec ornare. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas vitae condimentum velit. Praesent rhoncus, nisl et vestibulum tincidunt, turpis sem tincidunt mi, nec dictum urna nisi ullamcorper ante. Maecenas eu turpis id urna rhoncus ultrices. Nam maximus sollicitudin pharetra. Donec velit quam, vulputate ut malesuada at, laoreet et magna. Sed vitae risus sed libero posuere feugiat vel vehicula augue. </p>
<button class="custom-style" href="#link">btn name</button>
</columns>
</row>
</container>
<table align="center" class="container custom-style">
<tbody>
<tr>
<td>
<h2 class="text-center">Custom style for component</h2>
<table class="row custom-style">
<tbody>
<tr>
<th class="custom-style col-12 columns">
<table>
<tbody>
<tr>
<th>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pretium id
diam nec ornare. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Maecenas vitae condimentum velit. Praesent rhoncus, nisl et
vestibulum tincidunt, turpis sem tincidunt mi, nec dictum urna nisi
ullamcorper ante. Maecenas eu turpis id urna rhoncus ultrices. Nam maximus
sollicitudin pharetra. Donec velit quam, vulputate ut malesuada at, laoreet
et magna. Sed vitae risus sed libero posuere feugiat vel vehicula augue.
</p>
<table class="button custom-style">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><a href="#link">btn name</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
<th class="expander"></th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
The grid has two core elements: the row and column. Rows define horizontal sections of content, and columns carve up the row into side-by-side sections. A column has a size between 1 and 12—this is how many columns wide the element is. ODemail uses a 12-column grid, so 6 columns is half the width of the whole row.
ODinky
<row>
<columns col="4">
<center>
<img src="https://placehold.co/100x150/777777/&text=images" alt="" class="demo-col__img">
</center>
</columns>
<columns col="8">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pretium id diam nec ornare. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas vitae condimentum velit. Praesent rhoncus, nisl et vestibulum tincidunt, turpis sem tincidunt mi, nec dictum urna nisi ullamcorper ante. Maecenas eu turpis id urna rhoncus ultrices. Nam maximus sollicitudin pharetra. Donec velit quam, vulputate ut malesuada at, laoreet et magna. Sed vitae risus sed libero posuere feugiat vel vehicula augue. </p>
</columns>
</row>
html
<table class="row">
<tbody>
<tr>
<th class="col-4 columns">
<table>
<tbody>
<tr>
<th>
<center>
<img src="https://placehold.co/100x150/777777/&text=images" alt
class="demo-col__img float-center" align="center">
</center>
</th>
</tr>
</tbody>
</table>
</th>
<th class="col-8 columns">
<table>
<tbody>
<tr>
<th>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pretium id diam
nec ornare. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas
vitae condimentum velit. Praesent rhoncus, nisl et vestibulum tincidunt, turpis sem
tincidunt mi, nec dictum urna nisi ullamcorper ante. Maecenas eu turpis id urna
rhoncus ultrices. Nam maximus sollicitudin pharetra. Donec velit quam, vulputate ut
malesuada at, laoreet et magna. Sed vitae risus sed libero posuere feugiat vel
vehicula augue. </p>
</th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
When using Inky HTML, the <table-content> tag will create a <table>, <tr>, <th> structure needed to create consistent full width backgrounds. You can add classes to the wrapper to target CSS properties on it or target elements within it. The .table-content__inner class is available to add padding to the wrapper.
ODinky
<table-content>
<h1>OD test email</h1>
<p class="table-content__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dapibus metus at bibendum maximus.<a href="https://site.com" class="table-content__link">youLink</p>
</table-content>
html
<table align="center" class="table-content">
<tbody>
<tr>
<td class="table-content__inner">
<h1>OD test email</h1>
<p class="table-content__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dapibus metus at bibendum maximus. <a href="https://site.com" class="table-content__link">youLink</p>
</td>
</tr>
</tbody>
</table>
ODinky
<banner>
<img src="web/images/email/demo/banner.png" class="banner__img">
</banner>
html
<table align="center" class="banner">
<tbody>
<tr>
<td class="banner__inner">
<center>
<img src="web/images/email/demo/banner.png" class="banner__img" align="center">
</center>
</td>
</tr>
</tbody>
</table>
Buttons are convenient tools when you need more traditional actions. To that end, OdEmail has many easy to use button styles that you can customize or override to fit your needs.
Creating a bullet-proof button that works in all email clients requires a table nested inside of a table. Put the class .button on the outer <table>. Inside of the inner table, put an <a> with an href attribute containing your link.
In Inky HTML, the <button> tag creates all of this markup for you.
ODinky
<button href="#">Button</button>
<button-secondary href="#">Secondary</button-secondary>
<button-link href="#">Btn link</button-link>
html
<table class="button">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><a align="center" href="#">Button</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="button-secondary">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><a align="center" href="#">Secondary</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="button-link">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><a align="center" href="#">Btn link</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
ODinky
<p>Stuff on top</p>
<spacer size="100"></spacer>
<p>Stuff on bottom</p>
html
<p>Stuff on top</p>
<table class="spacer">
<tbody>
<tr>
<td height="100" style="font-size:100px;line-height:100px;"> </td>
</tr>
</tbody>
</table>
<p>Stuff on bottom</p>
Centering, images, text, buttons, and menus in HTML emails made easy. ODinky
<style>.alignment-col {border: 1px solid #333;}</style>
<h3 class="text-center">Text Alignment</h3>
<row>
<columns class="alignment-col">
<p class="text-left">Left (default)</p>
</columns>
<columns class="alignment-col">
<p class="text-center">center</p>
</columns>
<columns class="alignment-col">
<p class="text-right">right</p>
</columns>
</row>
<h3 class="text-center">Aligning Images</h3>
<row>
<columns>
<img class="float-left" src="https://via.placeholder.com/140x100" alt="">
<img class="float-center" src="https://via.placeholder.com/140x100" alt="">
<img class="float-right" src="https://via.placeholder.com/140x100" alt="">
</columns>
</row>
html
<style>
.alignment-col {
border: 1px solid #333;
}
</style>
<h3 class="text-center">Text Alignment</h3>
<table class="row">
<tbody>
<tr>
<th class="alignment-col col-4 columns">
<table>
<tbody>
<tr>
<th>
<p class="text-left">Left (default)</p>
</th>
</tr>
</tbody>
</table>
</th>
<th class="alignment-col col-4 columns">
<table>
<tbody>
<tr>
<th>
<p class="text-center">center</p>
</th>
</tr>
</tbody>
</table>
</th>
<th class="alignment-col col-4 columns">
<table>
<tbody>
<tr>
<th>
<p class="text-right">right</p>
</th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
<h3 class="text-center">Aligning Images</h3>
<table class="row">
<tbody>
<tr>
<th class="col-12 columns">
<table>
<tbody>
<tr>
<th>
<img class="float-left" src="https://via.placeholder.com/140x100" alt>
<img class="float-center" src="https://via.placeholder.com/140x100" alt>
<img class="float-right" src="https://via.placeholder.com/140x100" alt>
</th>
<th class="expander"></th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
ODinky
<h-line></h-line>
html
<table class="h-line">
<tr>
<th> </th>
</tr>
</table>
Testing in Litmus requires the images to be hosted publicly. The provided gulp task handles this by automating hosting to an AWS S3 account. Provide your Litmus and AWS S3 account details in the example.config.json and then rename to config.json. Litmus config, and aws.url are required, however if you follow the aws-sdk suggestions you don't need to supply the AWS credentials into this JSON.
{
"aws": {
"region": "us-east-1",
"accessKeyId": "YOUR_ACCOUNT_KEY",
"secretAccessKey": "YOUR_ACCOUNT_SECRET",
"params": {
"Bucket": "elasticbeanstalk-us-east-1-THIS_IS_JUST_AN_EXAMPLE"
},
"url": "https://s3.amazonaws.com/elasticbeanstalk-us-east-1-THIS_IS_JUST_AN_EXAMPLE"
},
"litmus": {
"username": "YOUR_LITMUS@EMAIL.com",
"password": "YOUR_ACCOUNT_PASSWORD",
"url": "https://YOUR_ACCOUNT.litmus.com",
"applications": ["ol2003","ol2007","ol2010","ol2011","ol2013","chromegmailnew","chromeyahoo","appmail9","iphone5s","ipad","android4","androidgmailapp"]
}
}Similar to the Litmus tests, you can have the emails sent to a specified email address. Just like with the Litmus tests, you will need to provide AWS S3 account details in config.json. You will also need to specify to details of an SMTP server. The email address to send to emails to can either by configured in the package.json file or added as a parameter like so: npm run mail -- --to="example.com"
{
"aws": {
"region": "us-east-1",
"accessKeyId": "YOUR_ACCOUNT_KEY",
"secretAccessKey": "YOUR_ACCOUNT_SECRET",
"params": {
"Bucket": "elasticbeanstalk-us-east-1-THIS_IS_JUST_AN_EXAMPLE"
},
"url": "https://s3.amazonaws.com/elasticbeanstalk-us-east-1-THIS_IS_JUST_AN_EXAMPLE"
},
"mail": {
"to": [
"example@domain.com"
],
"from": "Company name <info@company.com",
"smtp": {
"auth": {
"user": "example@domain.com",
"pass": "12345678"
},
"host": "smtp.domain.com",
"secureConnection": true,
"port": 465
}
}
}For a full list of Litmus' supported test clients(applications) see their client list.
Caution: AWS Service Fees will result, however, are usually very low do to minimal traffic. Use at your own discretion.
List of supported HTML attributes in an email template
| Tag | attributes support |
|---|---|
| a | class, href, id, style, target |
| b | class, id, style |
| br | class, id, style |
| p | align, class, dir, id, style |
| font | class, color, face, id, size, style |
| h1-h6 | align, class, dir, id, style |
| head | dir, lang |
| hr | align, size, width |
| i | class, id, style |
| img | align, border, class, height, hspace, id, src, style, usemap, vspace, width |
| label | class, id, style |
| li | class, dir, id, style, type |
| ol | class, dir, id, style, type |
| s | class, id, style |
| small | class, id, style |
| span | class, id, style |
| strike | class, id, style |
| strong | class, id, style |
| table | align, bgcolor, border, cellpadding, cellspacing, class, dir, frame, id, rules, style, width |
| td | abbr, align, bgcolor, class, colspan, dir, height, id, lang, rowspan, scope, style, valign, width |
| th | abbr, align, background, bgcolor, class, colspan, dir, height, id, lang, scope, style, valign, width |
| tr | align, bgcolor, class, dir, id, style, valign |
| u | class, id, style |
| ul | class, dir, id, style |
See what's new added, changed, fixed, improved or updated in the latest versions.
- release