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

2.5 Components

Components are the nuts and bolts of Foundation for Emails. From buttons to wrappers, Foundation gives you the essential components you can use to build emails. Let’s check them out.

2.5 Components

Components are the bread and butter of foundation. And the framework will give you a few essential ones you can use to build your emails. Now, please note that you will not find accordions, tabs, sliders or anything like that. And the reason for that is one, they belong in web pages, not emails, and two JavaScript is blocked in pretty much every email file and for security reasons. Now, what we're left with are some basic, but very well constructed and documented components that will work in pretty much every email client. In this lesson I'm gonna cover what I consider to be the most important ones. But feel free to check out the official documentation for all the others. Now let's jump in here. And we'll start with the very first component, which is the grid. But before we do that, I'm gonna create a new page. I'm gonna create this right here. Of course you can work on any of these existing pages, but I'm gonna create a new one called indexcomponents.html, and in here I'm just going to copy this bit, paste that in. Subject I'm gonna say components, layout is not really necessary. And now we can get started. I'm also going to open this in my browser so that everything is ready to go. Now the grid. The grid if you've been using a foundation for sites then you're already familiar with it. The grid has two components, rows and columns. The rows will define horizontal sections and the columns will divide the row into side-by-side sections or vertical sections. Now to begin, you need a container. And I'm actually gonna use the templating language to write all of my code here because working with tables is really tedious. Normally, you would use tables but since we're using the SAS version, we have access to. So we're gonna say container and the container will give the email the maximum with on larger screens and will also place your email content in the center. The rows go into the container so you would say, row. The columns are written like this, columns. So, in here, we can say, Hello, this is my content. And if we jump back to our page, you can see that my content is now centered in the page and it starts from the very top. Now, the nice thing about columns is that you can size these from 1 to 12. This is also customizable from SAS. But the way you would do that is by applying some attributes to the columns here. So you would say for example, large = the number of columns, let's say 6, for example. And this means on large screens I want this content to be divided or to be represented on six columns. Now let's duplicate this, Column 1, Column 2. So now, our page looks like this. Of course, I can divide this in any way I want as long as it adds up to 12 columns. So I can have 12 elements in here that says columns large=1 or I can have 4 + 8 or I can have 5 + 7 or 1 + 11, you get the picture. As long as they add up to 11, you're good to go. Now I can also specify how many columns I want on small devices, by using the small keyword. So let's say that on large screens I want 6 columns, but on small screens I want 12. I'm gonna say small="12". So now when I'm gonna resize. My page here on smaller screens the columns turn to 12 instead of 6. And when back to six, when I'm dealing with larger screens. A handy utility is the class of collapse which is used to remove the spacing between two columns. Now if for example we take a look in the inspector here. And we'll see that our two columns are represented by these th elements. And if you look right at their edge you can see a little bit of spacing, right? Well, if you wanna get rid of that all you gotta do is add the class of collapse to the parent row. And that will remove that spacing, as you can see here. But also be aware that it removed the spacing on the other side of the column. So basically, it removes the gutters. And the gutters are on both sides of the column. And finally, I wanna show you how to offset columns. And an offset will add spacing to the left of a column. So for example, if your columns don't add up to 12, if you have, for example 4 + 4, you can have an offset of 4, so it all adds up to 12. So let's see how we can do that. We're gonna remove the row there. So we're gonna say, columns large 4 on both of these. And also, to add the offset, you're gonna add the class of large-offset-4. And now, this first column is pushed to the right by 4 columns. And they all add up to 12. Of course, you don't have to add up to 12. If you just wanna push it to the right, say, two columns, you can do that, no problem. And the result looks like this. And as I was saying the grid is customizable. So you can go to the assets settings SCSS, I am under grid, you're gonna find the grind-column-count and some other information that you can use to fine tune the grid to your own liking. So if you want 16 columns, you just change this value and a new SAS file will be compiled automatically with new width values, pretty cool. Now that was the first component grid. I think it's one of the more important ones. The next one I wanna talk about is called a wrapper. And a wrapper, will basically wrap elements so that you can apply full-width backgrounds. So for example, if we were to add a wrapper in here and place the container inside the wrapper nothing new would actually happen on the page. We would just have a different set of a different markup. You can see we have a td with a class of wrapper-inner. Now you can target this class, for example, to add padding. Or you can specify external classes to this wrapper to target it with CSS. So for example, you can say class = "test wrapper". And then you can go into your CSS file. And you can say test wrapper and you can set its background color to, I don't know let's put a very ugly blue here. All right, so that will create a full width section that can be targeted with CSS and styled the way you want. You wanna add some padding, totally fine, just target the class of wrapper-inner. Set some padding maybe 2ems or I don't know 5em. Right, so that will add some padding all around. Next, I want to talk about typography and the framework gives you styles for all the basic elements that you need. Heading, paragraphs, links, dividers and that's pretty much it, really. I mean, what else could you need in an email, right? So if we can get rid of [LAUGH] some of these ugly colors here and let's add some typography here. So the headings are defined just like you would in normal HTML, there is no other way to do that, even N key. Hello, the paragraphs, the same thing with the p tag, and what's interesting about the headings is that you can add, small header segments. So for example, it can say hello. And you can have a small tag here, and it can say how are you? And that would result in something like this. Links also use the standard markup, so a, a tref, this is a link and let's also add in a hr after all this. So, these are the standard typography elements. Now you can modify these via CSS. If we go to the settings, you're gonna find under Typography, a bunch of things. You can change the font color, the font family, weights, different font sizes for all the headings, font sizes for the small tag. So as you can see this is a very customizable, just writing your HTML, your mark-up Is one step. But you really have to take the time and update this and add your own CSS and tweak everything to your own needs. So until you get the desired result. Finally, the last component I wanna talk about is the alignment class, or the alignment classes, because there are multiple classes. So the alignment classes allow you to align images, text, buttons, and even menus in HTML emails. Now let's start with text alignment. And for that I'm just gonna delete these rows here. And I'm gonna start with a paragraph. Now, to apply text alignment, you need to use certain classes. The first class is text-, followed by the direction, left center right. So if I want to center the text, I would just say this. This is a text. And it results in a centered text. Do I want that on the right side? I would do center right. And now it's aligned to the right. This works with any kind of typographic elements. Please note that you can also use the small text classes, for example, if you want the text aligned to the left on small screens you can say text-right and small text-left to make the text align to the left on small screens. Now what about images? Well, for images, when we want to center them on the left or the right, we have the classes of float-left and float-right. But when we want to align them in the center well, we have the class of float center. But there is also another way to do it. So I don't actually have an image here. But I'm gonna grab one from placeholdit. And I'm gonna put it in this center tag. So center, and then inside img. And that's gonna give us a centered image. We can also center buttons like this, and other things. So if I put a button in here, let's say under the image, it will also be centered. Now, what if you want to center a column? Well, that's actually very easy to do because of the nature of tables, tables want to grab as much space as is available to them. So, if you add one column to the left and one column to the right, of the column that you want to center those two columns will have equal width. Therefore, centering your desired column. The important thing is those two columns need to be empty. So, in here we would do something like this. We would have a row, and inside the row we're gonna add empty columns, and then the column that we wanna center and then empty columns again. And that will give us a centered column. Now what about vertical alignment? Well because we're working with tables this is actually very easy. We just use the v align attribute. So we would say something like columns valign equals top, bottom, or middle, depends on where we want that column. Now I added some images here so we can see this app work. But if we align it to the bottom, we get this middle, Gives us this. And top gives us this, which is actually the default. And that was a quick walk-through of what I consider to be the more important components in foundation for emails. You're gonna be learning about more components in the next chapter because we'll be building some sample emails. So, I'll see you in the next lesson.

Back to the top