3.1 Basic Email
The first email template we’ll build is a basic one. I want it to show my logo, a title, the body of the email, and then a footer containing social media links and my address. Let’s get started.
1.Introduction2 lessons, 03:30
2.Getting Started with Foundation for Emails5 lessons, 35:24
3.Let’s Create Some Emails4 lessons, 25:53
4.Conclusion1 lesson, 00:56
3.1 Basic Email
The emails we're going to build in the next four lessons are kind of molded to my own needs, because I have a website. I have a blog, which I intend to update more often. And I also plan on selling more items on ThinkForest. So, the very first email is a basic one. And I wanted to show a title, my logo, the body of the email and the footer that should contain some social links and also my address, which is actually a requirement if we have subscribers. So let's begin with my setup here. I'm using the SaaS version of the framework. I created a new page called index-basic. I gave it a subject of Basic Email Template. And I've also open it right here. So the first thing I'm gonna start with is by changing the color settings a little bit because I wanna add a different color background. So I'm gonna go to my settings. And I'm gonna change the dark gray color to this. And then I'm gonna change my body background from light gray to dark gray. Now this will not actually change anything because we are still using the template.css files. So you can either change these if you want. These are some demo styles or you can delete them entirely and that's gonna use some of the styles that you define later in app CSS. And while we're here let's get rid of this test wrapper. All right so that will give me this dark background to work with. So now, I'm gonna start by adding some text on the top of my email that basically says, cannot see images, or cannot see this email properly, view in browser. This is also a recommended practice. So to do that, I'm gonna add a paragraph with a class of text-center, oops, not here actually. [LAUGH] We need to put that in our HTML. So, paragraph with class of text-center. And I'm gonna use a small tag and say this email contains images. And I'm gonna duplicate it and say no images, a href = view online. And after that, I'm gonna add my wrapper and inside, a container because I'm gonna get to the main contents of my email. So I'm gonna add a row and inside side, some columns because I want the centered image in the form of my logo. So center img, I'm gonna give it some height and width attributes, 64, also 64. The source I'm just gonna link to my own server here. And you should always do this by the way, you should give it an absolute path to a place that you own basically, not a public file sharing service, that's not good. You should always keep your images or the resources that you are linking to in the safe place alt I'm just gonna say logo. All right let's see what we have so far. Okay, that looks pretty good but I would like a little bit more vertical space between some of these sections and a very easy way to add that is with a component called spacer. And it goes like this, spacer you simply set a size in pixels and you're done. So I'm gonna add one here, one here and my one just above the image, like this. So now we have some vertical space. Great, let's move on. Now we're gonna have the main content so, I'm gonna put another row with full width columns inside. By the way if you don't specify a column number it's just gonna be full width. And in here I'm gonna say on h1, hi and maybe a spacer and then a paragraph, this is the main body of the email, okay? That looks pretty good. But I would like to add a horizontal line on the top and bottom of this content. So, the way I'm gonna do that is by creating a custom wrapper. So in here, I'm gonna say wrapper with a class of, I'm gonna call it main-content. I'm gonna put all of this inside and then I'm gonna style it in my app CSS. Main-content, and for this I'm actually gonna target the table component with the class of wrapper-inner. Because in the end, we are using tables, right? So what I'm gonna add is a little bit of padding top and bottom of 30 pixels, and a border top, we'll say, 1px solid. And the color, well, we'll just lighten because we are using SaaS. We can use the lightning function. The dark-gray we use for the background and I'm gonna lighten it by about 65%, and let's also do a border-bottom like that. And now this looks something like this, pretty cool. Finally, I want to add a footer that's gonna have my social media links, and also some other relevant information like my address and the reason why people are receiving this e-mail. So to add that, I'm gonna create another row with columns. And inside I'm gonna center a menu. Now the menu components can be used to display items horizontally, one after the other. So you would use the menu tag and inside the item tag, again this is inky so all of this will be transformed into tables. So we're gonna say item href you can point to whatever you want and then I'm gonna paste them some images with some social media icons. So here we have three icons for Facebook, Twitter,and Google +. After that, after the center, I'm gonna add a spacer with a size of 30 and then I'm gonna add a paragraph with a class of text-centre, that's gonna say the reason why the user is receiving that email. All right, let's see what we have so far. Not bad. And finally let's add a few more paragraphs for my address. And I also added a spacer the size of 30. And now here is my finished email. And as far as being responsible, it's a very simple email. So why don't we resize it. You can see that it resizes nicely apart from the icons. Now, you might see that these images are a little bit bigger than they're supposed to be and that's because when we go to smaller screens, a foundation basically sets the width and height to auto for the images and that's useful for when we have larger images they just adapt to the full width of the available content. Not so great in the case of these images. Now the reason why they're so big is because I actually made them bigger and then resized them using the width and height attributes on the image. But you don't have to do that. You can just set the images to be their normal size, the size that you want them displayed at. And in that case, here, you won't be running into this problem, but just keep that in mind. All right, and that's what the basic template would look like for me. The next template will be a welcome email. So we'll tackle that in the next lesson.