The HTML email framework developed to help you build responsive HTML email templates using the pre-built grid options and basic components you need to build responsive HTML email templates. This HTML email framework support's over 60+ email clients and has been thoroughly tested using Litmus.com.
We start with our boilerplate.html, this is the base you need to build your responsive/fluid HTML email templates. This will allow you start building HTML email templates using the provided grids & component options.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style type="text/css">
</style>
</head>
<body style="margin:0; padding:0; background-color:#F2F2F2;">
<center>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#F2F2F2">
<tr>
<td align="center" valign="top">
</td>
</tr>
</table>
</center>
</body>
</html>
Build responsive/fluid & hybrid layouts with ease by using these pre-built grid options. Create the desired structure you need for your HTML email template. These grid options are available in separate form, snippets (Sublime, Atom) & even bundled together into a master template.
<table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
<tr>
<td height="10" style="font-size:10px; line-height:10px;"> </td>
</tr>
<tr>
<td align="center" valign="top">
<table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
<tr>
<td align="center" valign="top">
Grid One
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10" style="font-size:10px; line-height:10px;"> </td>
</tr>
</table>
<table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
<tr>
<td align="center" valign="top" style="padding:10px;">
<table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
<tr>
<td align="center" valign="top" style="padding:10px;">
Grid One
</td>
</tr>
</table>
</td>
</tr>
</table>
<tr>
<td align="center" height="100%" valign="top" width="100%">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" bgcolor="#ffffff">
<tr>
<td align="center" valign="top" style="font-size:14px;">
Grid One
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
You can download the grid master templates via GitHub at
Responsive : https://github.com/g13nn/Email-Framework/blob/master/grids/responsive/responsive-grid-master.html
Fluid : https://github.com/g13nn/Email-Framework/blob/master/grids/fluid/fluid-grid-master.html
Hybrid : https://github.com/g13nn/Email-Framework/blob/master/grids/hybrid/hybrid-grid-master.html
For grid options featuring more than one td we may need to add spacing between them for height on mobile. We can do this by using the following code example below. This allows you to separate the blocks in mobile view by adding a height of 10 between the td . You can also you padding for this.
<td height="10" style="font-size:10px; line-height:10px;" class="mobileOn"></td>
Here is an example of this in action using the responsive grid two option.
<table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#FFFFFF">
<tr>
<td align="center" valign="top">
<table width="600" cellpadding="0" cellspacing="0" border="0" class="container">
<tr>
<td width="300" class="mobile" align="center" valign="top">
Grid Two
</td>
<td height="10" style="font-size:10px; line-height:10px;" class="mobileOn"> </td>
<td width="300" class="mobile" align="center" valign="top">
Grid Two
</td>
</tr>
</table>
</td>
</tr>
</table>
Sometimes a responsive grid just isnt enough, we may need to create Mobile versions of panels. For the desktop version we add the class="mobileOff" on the table Underneath that table we add the mobile table with a div and some outlook conditions around it. This will switch off your desktop table and display the mobile one.
<!--[if !mso]><!-- -->
<div class="mobileOn" style="font-size: 0; max-height: 0; overflow: hidden; display: none">
<table width="320" cellspacing="0" cellpadding="0" border="0" class="mobile" align="center">
<tr>
<td align="center" style="color: #000000; font-size: 12px; line-height: 18px;">
Let's Go!
</td>
</tr>
</table>
</div>
<!--<![endif]-->
There may be some cases where you want to add a further table to your grid in this email framework this is called a content block (see below) you add the content block inside your tds in your grid. To get padding on the top and bottom simply add a spacer to the top and bottom of your wrapper. Spacing example code can be found in the next steps below.
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" valign="top">
<!-- Content -->
</td>
</tr>
</table>
● Simply add your elements (Eg. h1 tag) where it says content.
● You may only need a content block in certain situations. You can rely on the grid alone to house your content.
Within a content block you can add as many content rows as you require. To add another row to your content block simply add the following code under your closing tr tag in your content block. This can be used to create titles, paragraphs, buttons and much more.
<tr>
<td align="center" valign="top">
</td>
</tr>
To align your content you will need to add align="left" , align="right" or align="center" to your containing td
When stacking our titles, paragraphs and buttons like this we may need some spacing. To do this simply add the following row where you need your spacing. We add this in the same way as above. Making sure its added after the closing tr tag.
<tr>
<td height="10" style="font-size:10px; line-height:10px;"> </td>
</tr>
Outlook(2013) will sometimes add extra spacing to your spacers. To stop this from happening you will need to add & nbsp; between the td's.
You can add links to your text by wrapping your text in an a href="" tag. You will also need to add style="" tag to your a a href="" tag like so.
<a href="#" target="_blank" style="color:#66cccc; text-decoration:underline;">Link</a>
By using the following HTML below you will avoid various common display issues. Make sure that the containing td is stripped of font-size & line-height inlining styling, as this will effect how your image is rendered.
<img src="" width="" height="" style="margin:0; padding:0; border:none; display:block;" border="0" alt="" />
It's important to set a width & height on your img tag & remove any styling on your surrounding td so that your image renders correctly on Outlook(2013).
Fully tested HTML email snippets for Sublime Text & Atom https://github.com/g13nn/Email-Framework/tree/master/snippets
This email framework is supported on over 60+ email clients.
| Client | Supported |
| Apple Mail 7 , 8 (Desktop) | ✔ |
| Apple Mail & iOS Devices | ✔ |
| Outlook (2000, 2002, 2003, 2007, 2011, 2010, 2013, 2016) | ✔ |
| Thunderbird 31 | ✔ |
| Android - 2.3 & 4.2 | ✔ |
| Gmail (Desktop) | ✔ |
| Gmail (Mobile, iOS, Android, Apps) | ✔ |
| Outlook 2011 for Mac | ✔ |
| AOL Mail (Explorer, Firefox & Chrome) | ✔ |
| Hotmail | ✔ |
| Outlook.com (Explorer, Firefox & Chrome) | ✔ |
| Yahoo! (Explorer, Firefox & Chrome) | ✔ |
| Windows Phone 8 | ✔ |
| Office 365 | ✔ |
It's important to run your code through the W3C validator to ensure you haven't made any errors while editing the HTML. Once you have validated your HTML code send a test to litmus to ensure your HTML email layout/template renders correctly in all major email clients.