Foundation for Emails
Use the Foundation for Emails Inliner to do it in one fell swoop.
Loading the Inliner...
Paste the HTML and CSS of your email to the left, then hit "Inline!".
Make sure to include all of the Foundation for Emails CSS!
There was an error inlining your code. Check that your HTML and CSS have no errors and try again.
If you're still having issues, send us an email and we'll help you sort it out.
Inlining is the process of prepping an HTML email for delivery to email clients. Some email clients strip out your email's styles unless they are written inline with style tags. Here's what the inliner does:
style
attributes on each tag.@media
block can't be inlined, so it's put in a <style>
tag. Because some clients, such as Outlook and Gmail, strip out any CSS found in the <head>
, the inliner moves the <style>
tag out of the <head>
and into the <body>
.We use this same inliner in the ZURB Email Stack but it's more automated.
You can open an issue on the Foundation for Emails GitHub repo to get help. Please include the HTML/CSS that isn't working so we can test it ourselves.
Open an IssueLooking for the V1 Inky Inliner? You can get to it here!
If you're interested in using our Inky template language to write emails even faster, learn how to setup the ZURB Email Stack on your computer. The ZURB Stack gives you a Sass compiler, Inky support, and a full inlining process, all in one template.
Learn About the ZURB Email Stack