Skip to content

Instantly share code, notes, and snippets.

@janogarcia

janogarcia/bento_email.html

Last active December 28, 2016 18:02
Show Gist options
  • Save janogarcia/cbb626fd92832ec90cbe576bdfeb8547 to your computer and use it in GitHub Desktop.
Save janogarcia/cbb626fd92832ec90cbe576bdfeb8547 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bento_email.html
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<!-- utf-8 works for most cases -->
<meta charset="utf-8">
<!-- Forcing initial-scale shouldn't be necessary -->
<meta name="viewport" content="width=device-width">
<!-- Fix images not loading on Live Mail https://www.emailonacid.com/blog/article/email-development/prevent-ie-edge-meta-tag-from-breaking-images-in-live-mail -->
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<!--<![endif]-->
<!-- The title tag shows in email notifications, like Android 4.4. -->
<title></title>
<!-- Web Font / @font-face : BEGIN -->
<!-- NOTE: If web fonts are not required, lines 9 - 26 can be safely removed. -->
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style type="text/css">
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
<!--[if !mso]><!-->
<!-- insert web font reference, eg: <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css"> -->
<!--<![endif]-->
<!-- Web Font / @font-face : END -->
<!-- Normalize Styles -->
<style type="text/css">
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops WebKit and Windows mobile clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What is does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
/* What it does: Remove spacing between tables in Outlook 2007 and up. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
/* What it does: Reset styles. */
img {
line-height: 100%;
outline: none;
text-decoration: none;
/* Uses a smoother rendering method when resizing images in IE. */
-ms-interpolation-mode: bicubic;
/* Remove border when inside `a` element in IE 8/9/10. */
border: 0;
/* Sets a maximum width relative to the parent and auto scales the height */
max-width: 100%;
height: auto;
/* Remove the gap between images and the bottom of their containers */
vertical-align: middle;
}
/* What it does: Overrides styles added when Yahoo's auto-senses a link. */
.yshortcuts a {
border-bottom: none !important;
}
/* What it does: A work-around for iOS meddling in triggered links. */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* What it does: Neutralize whitespace for inline-block grids on iOS. */
@media screen and (min-width: 600px) {
.ios-responsive-grid {
display: -webkit-box !important;
display: flex !important;
}
/* Alternative method. Not needed if already using the .ios-responsive-grid flex workaround. */
/* .ios-responsive-grid__unit class would need to be added to the inline-block <div> grid units */
.ios-responsive-grid__unit {
float: left;
}
}
</style>
<!-- Do not add `|(IE)` to bypass Windows Live Mail -->
<!--[if gte mso 9]>
<style type="text/css">
/* What it does: Normalise space between bullets and text. */
/* https://litmus.com/community/discussions/1093-bulletproof-lists-using-ul-and-li */
li {
text-indent: -1em;
}
</style>
<![endif]-->
<!-- Progressive Enhancements -->
<style type="text/css">
/* Components */
/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease;
}
.button-td:hover,
.button__a:hover {
background: #03a4ef !important;
}
/* What it does: Mobile optimized styles */
@media screen and (max-width: 599px) {
/* Utilities */
/* Display */
.mobile-hidden {
display: none !important;
}
.mobile-d-block {
display: block !important;
}
/* Size */
.mobile-w-full {
width: 100% !important;
}
/* Margin */
.mobile-m-h-auto {
margin: 0 auto !important;
}
/* Padding */
.mobile-p-0 {
padding: 0 !important;
}
.mobile-p-t-0 {
padding-top: 0 !important;
}
/* Images */
.mobile-img-fluid {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
}
}
</style>
</head>
<body style="background: #ffffff; height: 100% !important; margin: 0 auto !important; padding: 0 !important; width: 100% !important;">
<!--
## Demo
<https://rawgit.com/janogarcia/cbb626fd92832ec90cbe576bdfeb8547/raw/bento_email.html>
## TODO
- Remove 1px gap between wrapper tables on Gmail iOS/Android (those were fixed in iOS Mail iPad portrait as a side effect of using `display: flex` for responsive grids)?
- Improve background image cell padding in Outlook?
- Bulletproof background gradients? https://www.linkedin.com/pulse/solved-bullet-proof-email-gradient-backgrounds-james-brown
- Improve Outlook high dpi widths and paddings?
- Minimize cargo-cult reset styles in <head> and <body>
## Issues
iOS white space bug: the inline-block based multi-column layouts are always stacked on iOS.
https://litmus.com/community/discussions/4223-ios-9-mail-app-for-ipad-adds-padding-that-can-t-be-overridden#comment-6663
The `font-size: 0` hack doesn't work on iOS Mail.
Shortcoming of different "kill inline-block elements' white space" hacks:
- Negative margin (as in TedGoas/Cerberus Hybrid) or negative letter spacing (as in csswizardry/csswizardry-grids) add some noticeable gaps in other clients than iOS Mail to the otherwise seamless "gutterless grids".
- Concatenating grid units with HTML comments can fall apart easily when not properly formatted.
- Alternatively, you can make the columns span the full width for iPad (not including the iPad Pro) by using `max-width: 768px` for your responsive utilities media query, which is not optimal either.
Best workaround overall is adding `display: flex` to the responsive grid rows via a media query. Use the provided .ios-responsive-grid or .ios-responsive-grid__unit classes.
---
Yahoo Mail min-width fiasco: width values are stripped out and converted to min-width, breaking the table layouts.
Yahoo Mail is not affected by this bug anymore. In the case it is reintroduced in the future here's how to counteract it:
- Convert percentage based widths to fixed widths. The only percentage `width` you can safely use is `100%`,
- Add a `max-width` of the same value to every `width`. You don't need to add a `max-width` for 100% `width` values.
- You don't need to add the `!important` modifier to either `width` or `max-width`.
https://litmus.com/community/discussions/5336-yahoo-mail-update-potentially-breaks-hybrid-emails#comment-8130
---
Outlook High dpi
Bento won't try to prevent the text from being upscaled on high Windows dpi settings for accessibility reasons.
Image sizes are rendered correctly, but paddings and widths will get somewhat bigger. This behavior might be improved in future updates.
- https://blog.jmwhite.co.uk/2014/03/28/solving-dpi-scaling-issues-with-html-email-in-outlook/
- https://litmus.com/community/discussions/151-mystery-solved-dpi-scaling-in-outlook-2007-2013
- https://www.emailonacid.com/blog/article/email-development/dpi_scaling_in_outlook_2007-2013
- http://www.emailmonks.com/blog/email-delivery/dpi-scaling-in-outlook-2007-2013-achieving-it-like-a-pro/
## Inspiration
- Cerberus https://github.com/TedGoas/Cerberus
- Hybrid https://github.com/fcarneiro/tedc15_template/
- Litmus Community https://litmus.com/community/discussions/5235-hybrid-coding-take-a-step-forward
- Litmus Slate and Salted
## Tested on
- Litmus: [Previews](https://litmus.com/checklist/emails/public/204a33f), [Builder](https://litmus.com/builder/32dc9b2).
- Email on Acid: [Previews](https://www.emailonacid.com/app/acidtest/display/summary/39D7glob8bghtZK14rkBEtl2dRMgH4bpEpDHROEgwjjjD/shared).
- Putsmail (real devices)
-->
<!-- Preheader -->
<div style="display: none; font-size: 1px; line-height: 1px; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all;">
(Optional) This text will appear in the inbox preview, but not the email body.
</div>
<!-- Single-column -->
<!-- Wrapper: Full bleed -->
<table cellpadding="0" cellspacing="0" style="background: #444444; border: 0; width: 100%;">
<tr>
<td align="center">
<!-- Inner wrapper: Column width -->
<table cellpadding="0" cellspacing="0" style="background: #ffffff; border: 0;">
<tr>
<td align="center" style="width: 600px;">
<!-- Content -->
<table cellpadding="0" cellspacing="0" style="border: 0; width: 100%;">
<!-- Full-bleed hero image -->
<tr>
<td style="text-align: center;">
<a href="http://example.com" style="text-decoration: none;" target="_blank">
<img src="http://placehold.it/1200x600" alt="Placehold.it" width="600" style="border: 0; height: auto; max-width: 100%; vertical-align: middle;">
</a>
</td>
</tr>
<!-- Hero heading -->
<tr>
<td style="color: #505050; font-family: sans-serif; font-size: 21px; mso-line-height-rule: exactly; line-height: 25px; padding: 20px; text-align: center;">
Hero-unit heading <br class="mobile-hidden"> with a line break for large viewports
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Single-column: background image -->
<!-- Wrapper: Full bleed -->
<table cellpadding="0" cellspacing="0" style="background: #444444; border: 0; width: 100%;">
<tr>
<td align="center">
<!-- Inner wrapper: Column width -->
<table cellpadding="0" cellspacing="0" style="background: #ffffff; border: 0;">
<tr>
<td align="center" style="width: 600px;">
<!-- Content -->
<!-- Bulletproof background image https://backgrounds.cm -->
<table cellpadding="0" cellspacing="0" style="border: 0; width: 100%;">
<tr>
<!-- `background-image` inline CSS property is not supported by Lotus 8.x -->
<td background="http://placehold.it/1200x400/222222/666666" style="background-color: #222222; background-position: center center; background-size: cover;">
<!--[if (gte mso 9)|(IE)]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
<v:fill type="tile" src="http://placehold.it/600x200/222222/666666" color="#222222" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<table cellpadding="0" cellspacing="0" style="border: 0; width: 100%;">
<tr>
<td style="color: #ffffff; font-family: sans-serif; font-size: 15px; mso-line-height-rule: exactly; line-height: 21px; text-align: center; padding: 40px 20px;">
Bulletproof image backgrounds. The image URL is added to the HTML background attribute instead of the CSS background-image property for making it compatible with Lotus 8.x. VML is used for Outlook support. Progressively enhanced with CSS background-size property, it makes the background image looks nicer on compatible clients. A solid color is used as a fallback for really obscure clients.
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Multi-column: responsive, gutterless -->
<!-- Do not mix width and padding in the same element to avoid box model issues -->
<!-- Wrapper: Full bleed -->
<table cellpadding="0" cellspacing="0" style="background: #444444; border: 0; width: 100%;">
<tr>
<td align="center">
<!-- Inner wrapper: Column width -->
<table cellpadding="0" cellspacing="0" style="background: #ffffff; border: 0;">
<tr>
<td align="center" style="width: 600px;">
<!-- Grid row -->
<table cellpadding="0" cellspacing="0" style="border: 0; width: 100%;">
<tr>
<td class="ios-responsive-grid" align="center" style="font-size: 0; text-align: center; vertical-align: top;">
<!-- Grid column -->
<div style="display: inline-block; margin-bottom: auto; vertical-align: top;">
<!-- Column width -->
<table cellpadding="0" cellspacing="0" style="border: 0;">
<tr>
<td class="mobile-w-full" align="center" style="width: 300px;">
<!-- Content -->
<table cellpadding="0" cellspacing="0" style="border: 0; width: 100%;">
<tr>
<td style="color: #737373; font-family: sans-serif; font-size: 15px; mso-line-height-rule: exactly; line-height: 21px; padding: 20px; text-align: center; background: #cccccc;">
Left column (gutterless).
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td align="center" style="font-size: 0; text-align: center; vertical-align: top;">
<![endif]-->
<!-- Grid column -->
<div style="display: inline-block; margin-bottom: auto; vertical-align: top;">
<!-- Column width -->
<table cellpadding="0" cellspacing="0" style="border: 0;">
<tr>
<td class="mobile-w-full" align="center" style="width: 300px;">
<!-- Content -->
<table cellpadding="0" cellspacing="0" style="border: 0; width: 100%;">
<tr>
<td style="color: #ffffff; font-family: sans-serif; font-size: 15px; mso-line-height-rule: exactly; line-height: 21px; padding: 20px; text-align: center; background: #969696">
Right column (gutterless).
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Multi-column: responsive, gutter -->
<!-- Do not mix width and padding in the same element to avoid box model issues -->
<!-- Wrapper: Full bleed -->
<table cellpadding="0" cellspacing="0" style="background: #444444; border: 0; width: 100%;">
<tr>
<td align="center">
<!-- Inner wrapper: Column width -->
<table cellpadding="0" cellspacing="0" style="background: #ffffff; border: 0;">
<tr>
<td align="center" style="width: 600px;">
<!-- Inner wrapper: Column gutter -->
<table cellpadding="0" cellspacing="0" style="border: 0; width: 100%;">
<tr>
<td style="padding: 10px;">
<!-- Grid row -->
<table cellpadding="0" cellspacing="0" style="border: 0; width: 100%;">
<tr>
<td class="ios-responsive-grid" align="center" style="font-size: 0; text-align: center; vertical-align: top;">
<!-- Grid column -->
<div style="display: inline-block; margin-bottom: auto; vertical-align: top;">
<!-- Column width -->
<table cellpadding="0" cellspacing="0" style="border: 0;">
<tr>
<td class="mobile-w-full" align="center" style="width: 290px;">
<!-- Column gutter -->
<table cellpadding="0" cellspacing="0" style="border: 0; width: 100%;">
<tr>
<td style="padding: 10px;">
<!-- Content -->
<table cellpadding="0" cellspacing="0" style="border: 0; width: 100%;">
<tr>
<td style="text-align: center;">
<img class="mobile-w-full" src="http://placehold.it/270x160" width="270" alt="Placehold.it" style="border: 0; height: auto; max-width: 100%; vertical-align: middle;">
</td>
</tr>
<tr>
<td style="color: #ffffff; font-family: sans-serif; font-size: 15px; mso-line-height-rule: exactly; line-height: 21px; padding: 20px; text-align: center; background: #969696">
Left column (20px gutter).
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td align="center" style="font-size: 0; text-align: center; vertical-align: top;">
<![endif]-->
<!-- Grid column -->
<div style="display: inline-block; margin-bottom: auto; vertical-align: top;">
<!-- Column width -->
<table cellpadding="0" cellspacing="0" style="border: 0;">
<tr>
<td class="mobile-w-full" align="center" style="width: 290px;">
<!-- Column gutter -->
<table cellpadding="0" cellspacing="0" style="border: 0; width: 100%;">
<tr>
<td style="padding: 10px;">
<!-- Content -->
<table cellpadding="0" cellspacing="0" style="border: 0; width: 100%;">
<tr>
<td style="text-align: center;">
<img class="mobile-w-full" src="http://placehold.it/540x320" width="270" alt="Placehold.it" style="border: 0; height: auto; max-width: 100%; vertical-align: middle;">
</td>
</tr>
<tr>
<td style="color: #ffffff; font-family: sans-serif; font-size: 15px; mso-line-height-rule: exactly; line-height: 21px; padding: 20px; text-align: center; background: #969696">
Right column (20px gutter).
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Multi-column: responsive, gutterless, swappable direction -->
<!-- Do not mix width and padding in the same element to avoid box model issues -->
<!-- Wrapper: Full bleed -->
<table cellpadding="0" cellspacing="0" style="background: #444444; border: 0; width: 100%;">
<tr>
<td align="center">
<!-- Inner wrapper: Column width -->
<table cellpadding="0" cellspacing="0" style="background: #ffffff; border: 0;">
<tr>
<td align="center" style="width: 600px;">
<!-- Grid row -->
<!-- dir=ltr is where the magic happens. This can be changed to dir=rtl to swap the alignment on wide while maintaining stack order on narrow. -->
<table dir="rtl" cellpadding="0" cellspacing="0" style="border: 0; width: 100%;">
<tr>
<td class="ios-responsive-grid" align="center" style="font-size: 0; text-align: center; vertical-align: top;">
<!-- Grid column -->
<div style="display: inline-block; margin-bottom: auto; vertical-align: top;">
<!-- Column width -->
<table cellpadding="0" cellspacing="0" style="border: 0;">
<tr>
<td class="mobile-w-full" align="center" style="width: 300px;">
<!-- Content -->
<table cellpadding="0" cellspacing="0" style="border: 0; width: 100%;">
<tr>
<td dir="ltr" style="color: #737373; font-family: sans-serif; font-size: 15px; mso-line-height-rule: exactly; line-height: 21px; padding: 20px; text-align: center; background: #cccccc;">
Swapped left column (gutterless).
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td align="center" style="font-size: 0; text-align: center; vertical-align: top;">
<![endif]-->
<!-- Grid unit -->
<div style="display: inline-block; margin-bottom: auto; vertical-align: top;">
<!-- Column width -->
<table cellpadding="0" cellspacing="0" style="border: 0;">
<tr>
<td class="mobile-w-full" align="center" style="width: 300px;">
<!-- Content -->
<table cellpadding="0" cellspacing="0" style="border: 0; width: 100%;">
<tr>
<td dir="ltr" style="color: #ffffff; font-family: sans-serif; font-size: 15px; mso-line-height-rule: exactly; line-height: 21px; padding: 20px; text-align: center; background: #969696">
Swapped right column (gutterless).
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Multi-column: responsive, gutter, swappable direction -->
<!-- Useful for implementing OOCSS media object pattern. -->
<!-- Do not mix width and padding in the same element to avoid box model issues -->
<!-- Wrapper: Full bleed -->
<table cellpadding="0" cellspacing="0" style="background: #444444; border: 0; width: 100%;">
<tr>
<td align="center">
<!-- Inner wrapper: Column width -->
<table cellpadding="0" cellspacing="0" style="background: #ffffff; border: 0;">
<tr>
<td align="center" style="width: 600px;">
<!-- Inner wrapper: Column gutter -->
<table cellpadding="0" cellspacing="0" style="border: 0; width: 100%;">
<tr>
<td style="padding: 10px;">
<!-- Grid row -->
<!-- dir=ltr is where the magic happens. This can be changed to dir=rtl to swap the alignment on wide while maintaining stack order on narrow. -->
<table dir="ltr" cellpadding="0" cellspacing="0" style="border: 0; width: 100%;">
<tr>
<td class="ios-responsive-grid" align="center" style="font-size: 0; text-align: center; vertical-align: top;">
<!-- Grid column -->
<div style="display: inline-block; margin-bottom: auto; vertical-align: top;">
<!-- Column width -->
<table cellpadding="0" cellspacing="0" style="border: 0;">
<tr>
<td class="mobile-w-full" align="center" style="width: 290px;">
<!-- Content -->
<!-- Reset dir=ltr -->
<table dir="ltr" cellpadding="0" cellspacing="0" style="border: 0; width: 100%;">
<tr>
<td style="padding: 10px; text-align: center;">
<img class="mobile-w-full" src="http://placehold.it/540x320" width="270" alt="Placehold.it" style="border: 0; height: auto; max-width: 100%; vertical-align: middle;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td align="center" style="font-size: 0; text-align: center; vertical-align: top;">
<![endif]-->
<!-- Grid column -->
<div style="display: inline-block; margin-bottom: auto; vertical-align: top;">
<!-- Column width -->
<table cellpadding="0" cellspacing="0" style="border: 0;">
<tr>
<td class="mobile-w-full" align="center" style="width: 290px;">
<!-- Content -->
<!-- Reset dir=ltr -->
<table dir="ltr" cellpadding="0" cellspacing="0" style="border: 0; width: 100%;">
<tr>
<td style="color: #737373; font-family: sans-serif; font-size: 15px; mso-line-height-rule: exactly; line-height: 21px; padding: 10px; text-align:left;">
<!-- Cross client block elements -->
<!-- Inherited styles from the td could be added directly to each element instead -->
<!-- Do not insert images on a td with `mso-line-height-rule: exactly` or otherwise Outlook will crop their height, put them in a separate tr or td -->
<!-- <p style="margin: 20px 0;"> could be replaced by <div style="margin: 20px 0;">,
or alternatively by <ul style="list-style-type:none;margin: 20px 0;padding: 0;"> -->
<h1 style="font-size: 36px; font-weight: normal; mso-line-height-rule: exactly; line-height: 38px; margin: 0 0 20px;">h1 Heading 1 <br> with a line break.</h1>
<h2 style="font-size: 24px; font-weight: normal; mso-line-height-rule: exactly; line-height: 26px; margin: 20px 0;">h2 Heading 2 <br> with a line break.</h2>
<h3 style="font-size: 18px; font-weight: normal; mso-line-height-rule: exactly; line-height: 20px; margin: 20px 0;">h3 Heading 3 <br> with a line break.</h3>
<h4 style="font-size: 16px; font-weight: normal; mso-line-height-rule: exactly; line-height: 18px; margin: 20px 0;">h4 Heading 4 <br> with a line break.</h4>
<h5 style="font-size: 14px; font-weight: normal; mso-line-height-rule: exactly; line-height: 16px; margin: 20px 0;">h5 Heading 5 <br> with a line break.</h5>
<h6 style="font-size: 12px; font-weight: normal; mso-line-height-rule: exactly; line-height: 14px; margin: 20px 0;">h6 Heading 6 <br> with a line break.</h6>
<h6 style="border-bottom: 1px solid #cccccc; font-size: 12px; font-weight: normal; mso-line-height-rule: exactly; line-height: 14px; margin: 20px 0; text-transform: uppercase;">h6 Heading 6 - Uppercase &amp; Bordered</h6>
<ul style="list-style-type: disc; padding: 0; margin: 20px 0 20px 1em;">
<li style="margin: 0;">A simple and quick</li>
<li style="margin: 0;">HTML</li>
<li style="margin: 0;">Unordered list</li>
</ul>
<ol style="padding: 0; margin: 20px 0 20px 1em;">
<li style="margin: 0;">One</li>
<li style="margin: 0;">Two</li>
<li style="margin: 0;">Three items</li>
</ol>
<p style="margin: 20px 0;">A paragraph with a line break <br> followed by a separator.</p>
<div style="border-top: 1px solid #cccccc; font-size: 1px; mso-line-height-rule: exactly; line-height: 1px; max-height: 0; margin: 20px 0; overflow: hidden;">&#8203;</div>
<p style="margin: 20px 0;">A paragraph with some styled text: <span style="font-weight: bold;">bold</span>, <span style="font-style: italic;">italic</span>, <span style="text-decoration: line-through;">striked out</span>, <span style="text-transform: uppercase;">uppercase</span>, and a <a href="http://example.com" style="color: #00a9f7; text-decoration: none;" target="_blank">link</a>.</p>
<p style="border-bottom: 1px solid #cccccc; font-size: 12px; margin: 20px 0; text-transform: uppercase;">Paragraph - Uppercase &amp; Bordered</p>
<p style="font-size: 12px; margin: 20px 0">Footer.</p>
</td>
</tr>
<tr>
<td style="padding: 0 10px 10px;">
<!-- Bulletproof button -->
<!-- Use align attribute to position the button -->
<table class="mobile-w-full" align="center" cellspacing="0" cellpadding="0" style="border: 0; margin: auto;">
<tr>
<td class="button-td" style="background: #00a9f7; border-radius: 4px; text-align:center;">
<a href="http://example.com" class="button-a" target="_blank" style="border: 1px solid #2796ca; border-radius: 4px; color: #ffffff; display: block; font-family: sans-serif; font-size: 15px; font-weight: 500; mso-height-rule: exactly; line-height: 1.1; padding: 12px 18px; text-decoration: none;"><!--[if gte mso 9]>&nbsp;<![endif]-->A bulletproof button<!--[if gte mso 9]>&nbsp;<![endif]--></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Multi-column: non-reponsive, gutter, swappable direction -->
<!-- Useful for implementing OOCSS media object pattern. -->
<!-- Do not mix width and padding in the same element to avoid box model issues -->
<!-- Wrapper: Padded -->
<table cellpadding="0" cellspacing="0" style="background: #444444; border: 0; width: 100%;">
<tr>
<td align="center" style="padding: 20px;">
<!-- Inner wrapper: Column width. Rounded corners. -->
<table cellpadding="0" cellspacing="0" style="background: #ffffff; border: 0; border-radius: 4px;">
<tr>
<td align="center" style="width: 600px;">
<!-- Inner wrapper: Column gutter -->
<table cellpadding="0" cellspacing="0" style="border: 0; width: 100%;">
<tr>
<td style="padding: 10px;">
<!-- Grid row -->
<!-- dir=ltr is where the magic happens. This can be changed to dir=rtl to swap the alignment on wide while maintaining stack order on narrow. -->
<table dir="ltr" cellpadding="0" cellspacing="0" style="border: 0; width: 100%;">
<tr>
<!-- Grid column -->
<td align="center" valign="top" style="width: 25%;">
<!-- Content -->
<!-- Reset dir=ltr -->
<table dir="ltr" cellpadding="0" cellspacing="0" style="border: 0; width: 100%;">
<tr>
<td style="padding: 10px; text-align: center;">
<img src="http://placehold.it/250x250" width="125" alt="Placehold.it" style="border: 0; height: auto; max-width: 100%; vertical-align: middle;">
</td>
</tr>
</table>
</td>
<!-- Grid column -->
<td align="center" valign="middle" style="width: 75%;">
<!-- Content -->
<!-- Reset dir=ltr -->
<table dir="ltr" cellpadding="0" cellspacing="0" style="border: 0; width: 100%;">
<tr>
<td style="color: #737373; font-family: sans-serif; font-size: 15px; mso-line-height-rule: exactly; line-height: 21px; padding: 10px; text-align: left;">
A media object <br class="mobile-hidden"> with a left to right arrangement (dir="ltr").
</td>
</tr>
</table>
</td>
</tr>
</table>
<div style="border-top:1px solid #cccccc; font-size: 1px; line-height: 1px; max-height: 0; margin: 10px; overflow: hidden;">&#8203;</div>
<!-- Grid row -->
<!-- dir=ltr is where the magic happens. This can be changed to dir=rtl to swap the alignment on wide while maintaining stack order on narrow. -->
<table dir="rtl" cellpadding="0" cellspacing="0" style="border: 0; width: 100%;">
<tr>
<!-- Grid column -->
<td align="center" valign="top" style="width: 25%;">
<!-- Content -->
<!-- Reset dir=ltr -->
<table dir="ltr" cellpadding="0" cellspacing="0" style="border: 0; width: 100%;">
<tr>
<td style="padding: 10px; text-align: center;">
<img src="http://placehold.it/250x250" width="125" alt="Placehold.it" style="border: 0; height: auto; max-width: 100%; vertical-align: middle;">
</td>
</tr>
</table>
</td>
<!-- Grid column -->
<td align="center" valign="middle" style="width: 75%;">
<!-- Content -->
<!-- Reset dir=ltr -->
<table dir="ltr" cellpadding="0" cellspacing="0" style="border: 0; width: 100%;">
<tr>
<td style="color: #737373; font-family: sans-serif; font-size: 15px; mso-line-height-rule: exactly; line-height: 21px; padding: 10px; text-align: left;">
The same media object <br class="mobile-hidden"> with a right to left arrangement (dir="rtl").
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Multi-column: responsive, gutter, swappable direction -->
<!-- Useful for implementing OOCSS media object pattern. -->
<!-- Do not mix width and padding in the same element to avoid box model issues -->
<!-- Wrapper: Full bleed -->
<table cellpadding="0" cellspacing="0" style="background: #444444; border: 0; width: 100%;">
<tr>
<td align="center">
<!-- Inner wrapper: Column width -->
<table cellpadding="0" cellspacing="0" style="background: #ffffff; border: 0;">
<tr>
<td align="center" style="width: 600px;">
<!-- Column gutter -->
<table cellpadding="0" cellspacing="0" style="border: 0; width: 100%;">
<tr>
<td style="padding: 10px;">
<!-- Content -->
<table cellpadding="0" cellspacing="0" style="border: 0; width: 100%;">
<tr>
<td style="padding: 10px; text-align: center;">
<!-- Responsive image grid -->
<!-- For best results:
All images should be of equal height.
The line-height must be at least as high as the tallest image and the images should fit in a single row on desktop, so that Outlook doesn't cut them off.
-->
<table cellpadding="0" cellspacing="0" dir="ltr" style="border: 0; width: 100%;">
<tr>
<td class="" style="padding: 0; text-align: center; font-size: 60px; mso-line-height-rule: exactly; line-height: 60px;">
<a href="#" style="text-decoration: none;" target="_blank">
<img src="http://placehold.it/100x100" width="50" alt="Placehold.it" style="border: 0; height: auto; max-width: 100%; vertical-align: middle;">
</a>
<!--[if mso]>
&#8203;
<![endif]-->
<a href="#" style="text-decoration: none;" target="_blank">
<img src="http://placehold.it/100x100" width="50" alt="Placehold.it" style="border: 0; height: auto; max-width: 100%; vertical-align: middle;">
</a>
<!--[if mso]>
&#8203;
<![endif]-->
<a href="#" style="text-decoration: none;" target="_blank">
<img src="http://placehold.it/100x100" width="50" alt="Placehold.it" style="border: 0; height: auto; max-width: 100%; vertical-align: middle;">
</a>
<!--[if mso]>
&#8203;
<![endif]-->
<a href="#" style="text-decoration: none;" target="_blank">
<img src="http://placehold.it/100x100" width="50" alt="Placehold.it" style="border: 0; height: auto; max-width: 100%; vertical-align: middle;">
</a>
<!--[if mso]>
&#8203;
<![endif]-->
<a href="#" style="text-decoration: none;" target="_blank">
<img src="http://placehold.it/100x100" width="50" alt="Placehold.it" style="border: 0; height: auto; max-width: 100%; vertical-align: middle;">
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
@janogarcia
Copy link
Author

Live Demo https://rawgit.com/janogarcia/cbb626fd92832ec90cbe576bdfeb8547/raw/bento_email.html

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