Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:12Length:1.1 hours
  • Overview
  • Transcript

2.1 The (Vanilla) CSS Version

Let’s assume that you have basic HTML and CSS knowledge and you want to develop emails using Foundation.

The easiest way to start is with the straight-up CSS version. Let’s begin.

Related links:

2.1 The (Vanilla) CSS Version

All right let's assume that you have some basic HTML and CSS knowledge and you want to build some Emails using Foundation. The easiest way to start is with the CSS version. So to do that you would go to foundationsorg.com/emails. You would hit Get Started and scroll down on the CSS Version, and you would Download the Starter Kit. Now the starter kit gives you some CSS files, gives you a few HTML templates and an index HTML that you can use to create your email. The index HTML currently just has a few starter markup to get you going. So for example if I type here h1 and I'm gonna say Hello, it's gonna give me this bit. Now the next step is to write your email. And you can do that from scratch or you can check out some of the templates that you see here, and copy the code from those. It's really up to you. Now, assuming you have completed your email, everything is coded, everything looks good, you checked it in a browser, you wrote some custom CSS for it maybe, well, now it's time to get it in lined. And that's the next step. And in lining basically brings all the CSS into the HTML. That's necessary, because some or actually most email clients will strip all the style tags and you cannot use external CSS. So the way to do that is with a tool called inliner and an inliner is also provided by foundation. You can find that right here and the way you will do it is you would paste the HTML. So let's do that. And you will paste the complete CSS of your email including foundation. Now we don't actually have any custom CSS. So we're just gonna include the one from Foundation Email. So you will copy this, you would paste it here, and you would say Inline. And also you have the ability to compress the HTML. And now, this is your finished email. As you can see apart from HTML we also have CSS in here. And doing this by hand is not really recommended. It's a lot of work. But with tools like the Inliner it can do it really fast. Now your email is written. It's inlined, it's ready to go. What do you do next? Well the recommended thing is to test it on as many email clients as possible and instead of doing it by hand, you can actually use specialized tools. Now, some of these tools include Litmus which can be used freely for a week and has plans that start at $99 a month, or you can use email on acid which is a cheaper alternative coming in at $45 a month on its cheapest plan. Mind you, these are not the only tools. There are a bunch out there, just Google email testing or something similar, and I'm sure you'll find others. Now, if all the testing was good, maybe fix some bugs, maybe some layouts and some email clients didn't quite work out, and you tweak those a little bit, you now have a version of your email that is ready to go to be sent to your subscribers or to your users. So how do you do that? Well, again, you can use specialized tools. And two of these tools are called MailChimp and Campaign Monitor. These are also called ESPs or email service providers. And the ones I mentioned, MailChimp and Campaign Monitor, actually do more than just send emails. They also give you access to analytics. So you can monitor how your campaigns are going and also get your revenue reports and stuff like that. And that's how you can get started with Foundation for Emails using the CSS version. Now if you're a more experienced user or developer and you're familiar with the command line or with task runners, then check out the next lesson, where I'll show you how to use the Sass version of foundation. See you there.

Back to the top