gulp-premailer
Version:
A gulp module using Premailer to bring CSS styles inline when developing HTML emails.
197 lines (181 loc) • 5.64 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="ink.css" />
</head>
<body>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>
<table class="row header">
<tr>
<td class="center" align="center">
<center>
<table class="container">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td class="six sub-columns">
<img src="http://placehold.it/200x50">
</td>
<td class="six sub-columns last" align="right" style="text-align:right; vertical-align:middle;">
<span class="template-label">HERO</span>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<br>
<table class="container">
<tr>
<td>
<!-- content start -->
<table class="row">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td>
<h1>Hi, Elijah Baily</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
<img width="580" height="300" src="http://placehold.it/580x300">
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row callout">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td class="panel">
<p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. <a href="#">Click it! »</a></p>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td>
<h3>Title Ipsum <small>This is a note.</small></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper last">
<table class="three columns">
<tr>
<td>
<table class="button">
<tr>
<td>
<a href="#">Click Me!</a>
</td>
</tr>
</table>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row footer">
<tr>
<td class="wrapper">
<table class="six columns">
<tr>
<td class="left-text-pad">
<h5>Connect With Us:</h5>
<table class="tiny-button facebook">
<tr>
<td>
<a href="#">Facebook</a>
</td>
</tr>
</table>
<br>
<table class="tiny-button twitter">
<tr>
<td>
<a href="#">Twitter</a>
</td>
</tr>
</table>
<br>
<table class="tiny-button google-plus">
<tr>
<td>
<a href="#">Google +</a>
</td>
</tr>
</table>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
<td class="wrapper last">
<table class="six columns">
<tr>
<td class="last right-text-pad">
<h5>Contact Info:</h5>
<p>Phone: 408.341.0600</p>
<p>Email: <a href="mailto:hseldon@trantor.com">hseldon@trantor.com</a></p>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td align="center">
<center>
<p style="text-align:center;"><a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="#">Unsubscribe</a></p>
</center>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>
</html>