Skip to content

Instantly share code, notes, and snippets.

@johndwells

johndwells/htmlemailboilerplate.html

Created December 19, 2011 12:28
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save johndwells/1497005 to your computer and use it in GitHub Desktop.
Save johndwells/1497005 to your computer and use it in GitHub Desktop.
Download ZIP
HTML Email Boilerplate
Raw
htmlemailboilerplate.html
<html><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
/*
* ========================================================================
* Some cross-device, client-specific styles, courtesy of CampaignMonitor
* ========================================================================
*/
#outlook a { padding: 0; } /* Force Outlook to provide a "view in browser" button. */
body { width: 100% !important; }
.ReadMsgBody { width: 100%; }
.ExternalClass { width: 100%; display:block !important; } /* Force Hotmail to display emails at full width */
.yshortcuts, .yshortcuts a, .yshortcuts a:link,.yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span {
color: black; text-decoration: none !important; border-bottom: none !important; background: none !important;
}
/*
* ========================================================================
* Reset Styles
* ========================================================================
*/
html, body { margin: 0; padding: 0; }
table td, table tr { border-collapse: collapse; }
br { line-height: 100%; }
p { margin: 0 0 1em 0; line-height: 160%; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 1em 0; line-height: 100% !important; -webkit-font-smoothing: antialiased; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
text-decoration: none !important;
}
img { line-height: 100%; outline: none; text-decoration: none; display: block; }
a, a img { border: 0 !important; }
.editable img, img.editable { height: auto !important; }
.gutter { line-height: 0; font-size: 0; }
.padding { line-height: 0; font-size: 0; }
p, li { line-height: inherit; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
color: inherit;
text-decoration: inherit;
}
/*
* ========================================================================
* THE GRID
* ========================================================================
*/
/* structural heigh and width classes */
table.w0, td.w0, img.w0 { width: 0; }
table.w640, td.w640, img.w640 { width: 640px; }
table.h0, td.h0, img.h0 { height: 0; }
/* Mobile-specific overrides */
@media only screen and (max-device-width: 480px) {
table.w0, td.w0, img.w0,
table[class=w0], td[class=w0], img[class=w0] { width: 0 !important; }
table.w640, td.w640, img.w640,
table[class=w640], td[class=w640], img[class=w640] { width: 480px !important; }
table[class=hide], td[class=hide], img[class=hide], p[class=hide], span[class=hide], .hide { display:none !important; }
table.h0, td.h0, img.h0,
table[class=h0], td[class=h0] { height: 0 !important; }
}
/*
* ========================================================================
* TYPOGRAPHY
* ========================================================================
*/
html, body, td {
background-color: @bgColor;
color: @txtColor;
font-family: @txtFontFamily;
font-size: @txtFontSize;
line-height: @txtLineHeight;
}
fblike, tweet, webversion, unsubscribe, forwardtoafriend,
a, a:active, a:visited {
color: @linkColor;
font-weight: @linkFontWeight;
text-decoration: @linkTextDecoration;
}
strong {
color: @strongColor;
font-weight: @strongFontWeight;
}
h1, h2, h3, h4, h5, h6 {
color: @headerColor;
font-weight: @headerFontWeight;
}
/* the outer-wrapping background table */
#background-table {
background-color: @bgColor;
}
/* gutters go between tables of content */
.gutter {
background-color: @gutterBackgroundColor;
}
/* padding helps maintain inner structure of tables of content */
.padding {
background-color: @paddingBackgroundColor;
}
/* anywhere there's readable text */
.content {
background-color: @contentBackgroundColor;
font-family: @contentFontFamily;
line-height: @contentLineHeight;
font-size: @contentFontSize;
color: @contentColor;
}
/* areas editable by CM editor */
.editable {
background-color: @editableBackgroundColor;
color: @editableColor;
font-family: @editableFontFamily;
font-size: @editableFontSize;
line-height: @editableLineHeight;
}
/*
* ========================================================================
* DESIGN-SPECIFIC
* ========================================================================
*/
</style>
</head><body><table width="100%" cellpadding="0" cellspacing="0" border="0" id="background-table" bgcolor="@bgColor">
<tbody><tr>
<td align="center" valign="top">
<!--
CampaignMonitor Tags:
http://help.campaignmonitor.com/topic.aspx?t=129
Some editing rules:
- every table needs:
- bgcolor=""
- cellpadding="0"
- cellspacing="0"
- border="0"
- width=""
- class="" (at least a wX to match width)
- every table cell needs:
- class="" (at least a wX; then any combo of: hX, gutter, padding, content, editable, webversion, header, footer, repeater, etc)
- width="" (matching wX)
- height="" (matching hX)
- align=""
- valign=""
- every img needs:
- class="" (wX && hX; then maybe editable)
- width="" (matching wX)
- height="" (matching hX)
-->
</td>
</tr>
</tbody></table></body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment