Skip to content

Instantly share code, notes, and snippets.

@julie-ng

julie-ng/v0.html

Last active March 10, 2017 21:31
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save julie-ng/805e596e814994dd12f9 to your computer and use it in GitHub Desktop.
Save julie-ng/805e596e814994dd12f9 to your computer and use it in GitHub Desktop.
Download ZIP
Email Layout Calculator Template
Raw
v0.html
<script type="javascript/template" id="js-code-template">
<!-- Here is the mobile gmail first (but still works in Outlook) markup -->
<table width="{{ container }}" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
{% _(cols).times(function(n) { %}
{% if (n === 0) { %}
<!--[if mso]><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td valign="top" width="{{ colWidths[n] }}"><![endif]-->
{% } %}
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="left" class="col" style="width: 100%; max-width: {{ colWidths[n] }}px;">
<tr>
<td class="col-{{ n+1 }}-td" style="padding-left:{{ gutterHalf }}px; padding-right:{{ gutterHalf }}px">
Column {{ n+1 }}
</td>
</tr>
</table>
{% if (n < cols-1) { %}
<!--[if mso]></td><td valign="top" width="{{ colWidths[n+1] }}"><![endif]-->
{% } %}
{% if (n == cols-1) { %}
<!--[if mso]></td></tr></table><![endif]-->
{% } %}
{% }); %}
</td>
</tr>
</table>
<!-- include this in the head of your email -->
<style>
{% _(cols).times(function(n) { %}
.col-{{ n+1 }}-td {
{% if (n===0){ %}
padding-left: {{ gutter }}px !important;
padding-right: {{ gutterHalf }}px !important;
{% } else if (n == cols-1) { %}
padding-left: {{ gutterHalf }}px !important;
padding-right: {{ gutter }}px !important;
{% } else { %}
padding-left: {{ gutterHalf }}px !important;
padding-right: {{ gutterHalf }}px !important;
{% } %}
}
{% }); %}
@media screen and (max-width: 599px) {
.col {
width: 100% !important;
max-width: 100% !important;
}
.col td {
padding-left: {{ gutterHalf }}px !important;
padding-right: {{ gutterHalf }}px !important;
}
}
</style>
</script>
Raw
v1.hbs
<!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"> <!-- So that mobile will display zoomed in -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- enable media queries for windows phone 8 -->
<meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS -->
<title>Email Layout Calculator</title>
<!-- Included CSS for non gmail clients -->
<style type="text/css">
/* Level Two: reset mobile gmail first gutters */
.col-first-td {
padding-left: {{ gutter }}px !important;
padding-right: {{ gutterHalf }}px !important;
}
{{#ifMore columns}}
.col-td {
padding-left: {{ ../gutterHalf }}px !important;
padding-right: {{ ../gutterHalf }}px !important;
}
{{/ifMore}}
.col-last-td {
padding-left: {{ gutterHalf }}px !important;
padding-right: {{ gutter }}px !important;
}
/* Level Three: use mobile gutter */
@media screen and (max-width: 599px) {
.col {
width: 100% !important;
max-width: 100% !important;
}
.col td {
padding-left: {{ gutterHalf }}px !important;
padding-right: {{ gutterHalf }}px !important;
}
}
</style>
</head>
<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Level One CSS (inlined): the mobile gmail first (but still works in Outlook) markup -->
<table width="{{ container }}" border="0" cellpadding="0" cellspacing="0" align="center" id="container">
<tr>
<td>
{{#each columns}}
{{#if @first}}
<!--[if mso]><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td valign="top" width="{{ total }}"><![endif]-->
{{else}}
<!--[if mso]></td><td valign="top" width="{{ total }}"><![endif]-->
{{/if}}
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="left" class="col" style="width:100%;max-width:{{ total }}px;">
<tr>
<td class="{{doSelector index}}" style="padding-left:{{ gutterLeft }}px;padding-right:{{ gutterRight }}px">
Column {{ plusOne @index }}
</td>
</tr>
</table>
{{#if @last}}
<!--[if mso]></td></tr></table><![endif]-->
{{/if}}
{{/each}}
</td>
</tr>
</table><!--/#container-->
</body>
</html>
@julie-ng
Copy link
Author

Responsive Email Grid Logic

Here you'll find the templates used in the Email Layout Calculator tool.

Version 0 (prototype)

Version 1 (28 October)

  • Handlebars template.
  • Logic moved from view to the Model in our app (best practice).
  • Template more readable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment