✨ Meet the New Foundation Docs: 3 Ways to Learn ✨

Responsive Email Inliner

Bring Your Email Styles Inline

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!

Thanks for subscribing!

There was an error inlining your code. Check that your HTML and CSS have no errors and try again.

You can also try the V1 Inky inliner.

If you're still having issues, send us an email and we'll help you sort it out.




What is Inlining?

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:

  • Inlining CSS: All of your CSS is embedded directly into the HTML as style attributes on each tag.
  • Positioning media query CSS: CSS inside a @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>.
  • Compresses the output: The final HTML is compressed by removing whitespace between tags and CSS blocks. This makes the file size of the email smaller, allowing it to load faster on slower mobile networks.

We use this same inliner in the ZURB Email Stack but it's more automated.

Issues with the Output?

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 Issue

Looking for the V1 Inky Inliner? You can get to it here!

Inky Language

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