Skip to content

Instantly share code, notes, and snippets.

@fddemora

fddemora/boilerplate.html

Created January 31, 2024 00:53
Show Gist options
  • Save fddemora/5be0d6d947f39ba691b25d849b70b2bf to your computer and use it in GitHub Desktop.
Save fddemora/5be0d6d947f39ba691b25d849b70b2bf to your computer and use it in GitHub Desktop.
Download ZIP
taken from emailonacid
Raw
boilerplate.html
<!DOCTYPE html>
<!-- We use the HTML5 doctype as it's the most widely supported and our recommended doctype, for more on this visit https://www.emailonacid.com/blog/article/email-development/doctype_-_the_black_sheep_of_html_email_design/
In our HTML tag we include a language for accessibility purposes and VML namespace declaration, for if we need to add specific Outlook VML code.-->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!-- This Outlook specific code helps alleviate the issues caused by high DPI versions of Outlook. -->
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG />
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<!-- We always want to include a relevant title in our email, for if users open in a browser. -->
<title>Your Message Subject or Title</title>
<!-- These two meta tags are extremely important, the first is encoding our characters so we don't have any funky symbols when using special characters
the second is telling the browser/email client to render the email in the device's native screen size
Read more: https://www.emailonacid.com/blog/article/email-development/the_importance_of_content-type_character_encoding_in_html_emails/ -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
<meta name="x-apple-disable-message-reformatting">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<!--Now we'll get into a few basic pieces of CSS we include in every email, for clients that do support CSS in the head -->
<style type="text/css">
/* color-scheme and supported-color-schemes enables dark mode control via the dark mode media query */
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
/* By default we turn off hover effects on links, your design may have it differently */
a:hover {
text-decoration: none !important;
}
/* This snippet removed random blue links on Apple Devices */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
}
/* This will stop email clients adding random styling to phone numbers */
a[href^="tel"]:hover {
text-decoration: none !important;
}
/* We want all our links and images to not have hidden borders, so they fit snugly in the design */
a img {
border: none;
}
/* Since we're using semantic HTML markup, we want to reset our paragraphs and headings to not have margins by default, if the design needs them we'll add them inline */
p {
margin: 0;
padding: 0;
margin-bottom: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
margin-bottom: 0;
}
/* Force Outlook to use our line-heights as an exact value rather than a minimum */
table td {
mso-line-height-rule: exactly;
}
/* Collapse borders on tables so there are no gaps in Outlook */
table {
border-collapse: collapse;
}
/* This snippet removed random blue links on Apple Devices */
#emailBody #emailWrapper [x-apple-data-detectors] {
color: inherit !important;
text-decoration: inherit !important;
}
/* This is the most reliable way of utilizing Google Fonts (or other web fonts) in your email code.
For a guide on how to find the URL of the webfont you want to use in this way, please visit: https://www.emailonacid.com/blog/article/email-development/web-fonts-google-fonts/ */
/* Here we are including a few basic Media Queries, these CSS rules will only be applied when the device width is 640px or below.
Feel free to adjust this value as your design permits/requires. */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Simply setting our container tables to 100% width */
@media only screen and (max-width:640px) {
.wrapper {
width: 100% !important;
padding: 0 !important;
}
/* Here we use this to force our grid sections to expand out and stack on mobile devices */
.tflex {
display: block !important;
width: 100% !important;
}
/* We use this if we need to hide elements on mobile */
.hm {
display: none !important;
width: 0 !important;
height: 0 !important;
padding: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
}
}
</style>
</head>
<body id="emailBody" class="body" xml:lang="en" style="background:#EFEFEF; margin:0; padding:0; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;">
<!-- Wrap your entire email in a div. For accessibility purposes, include a role, aria-roledescription, aria-label, lang, and dir attributes. -->
<div role="article" aria-roledescription="email" aria-label="email name" lang="en" dir="ltr" style="font-size:medium; font-size:max(16px, 1rem)">
<!-- Hidden Preheader Text.
This is our preview text that displays in email clients, but we hide it so it doesn't effect our design. -->
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family:sans-serif;">Get 10% off. Use offer code JUNE10 for 10% off or show this email in-restaurant.</div>
<!-- This is where we open the email content, we use a few basic resets on the body and add our desired background color. -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#EFEFEF" class="wrapper" role="presentation">
<tr>
<td align="center" valign="top" width="100%">
<!-- Responsive Grid:
Below is the example code for a Responsive 2 column section. We're simply using our Media Queries above to tell the email client to replace our 300px wide table cells
with 100% width, expanding and forcing a 2 column section.
For more on Hybrid vs Responsive please visit https://www.emailonacid.com/blog/article/email-development/whats-the-difference-between-responsive-mobile-friendly-and/
-->
<table width="600" cellpadding="0" cellspacing="0" border="0" class="wrapper" role="presentation">
<!-- Notice how the tables have role="presentation", this is for accessibility purposes.
Read more about coding accessible emails: https://www.emailonacid.com/blog/article/email-development/how-to-code-accessible-emails -->
<tr>
<td width="300" class="tflex" align="center" valign="top" style="color:#333333; font-family: 'Inter', Arial, sans-serif; font-size: 16px;">
<!-- Whenever we're adding copy, we're using semantic markup using paragraph and heading tags -->
<h1>Section One</h1>
<img src="https://placekitten.com/200/140" border="0" style="border:0; display:block;" alt="a cute kitten">
<!-- When adding images, we want to make sure we're forcing border:0 and display:block so that there's no white spaces around the images
It's also crucial for accessibility purposes to include a descriptive alt text. -->
<p>
This is our first section
</p>
</td>
<td width="300" class="tflex" align="center" valign="top" style="color:#333333; font-family: 'Inter', Arial, sans-serif; font-size: 16px;">
<h1>Section Two</h1>
<img src="https://placekitten.com/200/140" border="0" style="border:0; display:block;" alt="a cute kitten">
<p>
This is our second section
</p>
</td>
</tr>
</table>
<!-- Hybrid Grid:
Below is the example code for a Hybrid 2 column section. We use conditional Outlook code to set maximum widths on our table and cells while having them at
100% width, this ensures that when you view this on a mobile device, the sections will expand out to create a stacking effect.
For more on Hybrid vs Responsive please visit https://www.emailonacid.com/blog/article/email-development/whats-the-difference-between-responsive-mobile-friendly-and/
-->
<!--[if true]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" role="presentation">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" role="presentation">
<tr>
<td align="center" valign="top" style="font-size:0;">
<!--[if true]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" role="presentation">
<tr>
<td align="left" valign="top" width="298">
<![endif]-->
<div style="display:inline-block; max-width:298px; vertical-align:top; width:100%;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:298px;" role="presentation">
<tr>
<td align="center" valign="top" style="color:#333333; font-family: 'Inter', Arial, sans-serif; font-size: 16px;">
<h1>Section One</h1>
<img src="https://placekitten.com/200/140" border="0" style="border:0; display:block;" alt="a cute kitten">
<p>
This is our first section
</p>
</td>
</tr>
</table>
</div>
<!--[if true]>
</td>
<td align="left" valign="top" width="298">
<![endif]-->
<div style="display:inline-block; max-width:295px; vertical-align:top; width:100%;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:295px;" role="presentation">
<tr>
<td align="center" valign="top" style="color:#333333; font-family: 'Inter', Arial, sans-serif; font-size: 16px;">
<h1>Section Two</h1>
<img src="https://placekitten.com/200/140" border="0" style="border:0; display:block;" alt="a cute kitten">
<p>
This is our second section.
</p>
</td>
</tr>
</table>
</div>
<!--[if true]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if true]>
</td>
</tr>
</table>
<![endif]-->
<!-- Ghost tables + DIV method:
Since tables are only needed for Outlook, you may choose to use ghost tables and divs to code your emails.
Stacking columns will require using a media query.
Example code can be found from Mark Robbins at Good Email Code: https://www.goodemailcode.com/email-code/columns.html
-->
<!--[if true]>
<table role="presentation" width="600" style="all:unset;opacity:0;">
<tr>
<![endif]-->
<!--[if false]></td>
</tr>
</table><![endif]-->
<div style="display:table;width:100%;max-width:600px;">
<!--[if true]>
<td width="50%">
<![endif]-->
<!--[if !true]><!-->
<div style="display:table-cell;width:50%;color:#333333; font-family: 'Inter', Arial, sans-serif; font-size: 16px;" class="tflex">
<!--<![endif]-->
<h1>Section One</h1>
<img src="https://placekitten.com/200/140" border="0" style="border:0; display:block;" alt="a cute kitten">
<p>
This is our first section
</p>
<!--[if !true]><!-->
</div>
<!--<![endif]-->
<!--[if true]>
</td>
<![endif]-->
<!--[if true]>
<td width="50%">
<![endif]-->
<!--[if !true]><!-->
<div style="display:table-cell;width:50%;color:#333333; font-family: 'Inter', Arial, sans-serif; font-size: 16px;" class="tflex">
<!--<![endif]-->
<h1>Section Two</h1>
<img src="https://placekitten.com/200/140" border="0" style="border:0; display:block;" alt="a cute kitten">
<p>
This is our second section.
</p>
<!--[if !true]><!-->
</div>
<!--<![endif]-->
<!--[if true]>
</td>
<![endif]-->
</div>
<!--[if true]>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment