--- title: Getting Started with CSS description: Get started with the CSS version of Foundation for Emails. --- Foundation for Emails takes the pain out of developing HTML emails by giving you a set of powerful, tested components out of the box. This includes a fully-responsive grid, buttons, callouts, menus, and more. In this Getting Started guide, we'll download Foundation for Emails, construct the basic grid, and then inline our email so it's ready to test. --- ## Installing If you haven't yet, download the starter files for Foundation for Emails. They include the boilerplate HTML needed for an email, and all of the CSS for Foundation. Download Foundation for Emails Unzip the folder and open it in your text editor of choice. --- ## File Structure Here's a breakdown of the files in the folder you got: - `css/foundation-emails.css`: the Foundation for Emails CSS. - `index.html`: a blank boilerplate to get started. - `templates/`: a set of pre-made templates following common email layouts. We'll be writing a layout from scratch, so open up `index.html`. --- ## Boilerplate Inside `index.html`, you can see the boilerplate needed to make an HTML work, with comments explaining what does what. ```html
``` --- ## Grid Basics Foundation for Emails includes many common elements needed to make HTML emails: a grid, typography styles, buttons, callouts, and more. The markup required to create HTML emails that work in all email clients is *complicated*, and involves writing many tables. However, all of Foundation's components are thoroughly tested in every major email client, including the problematic ones like Outlook. The rigid structure ensures your designs don't look off in any email client. Let's start by building a basic grid. To do that, we need three pieces: a container, a row, and then some columns. ### Container Most Foundation for Emails components are full tables, including the container. Inside the `
` tag of `index.html`, add this table code: ```html
``` The **container** will wrap the body of your entire email. It applies a maximum width to the body of the email. Every email needs this bit of boilerplate. ### Row Next, let's build the grid itself, starting with the row. **Rows** group columns together into a unit. Inside of your container, add this table: ```html
``` ### Columns Columns divide your layout into horizontal sections that sit side-by-side. On small screens, these columns stack on top of each other to save space—unless you set them up to keep their layout on small screens. Inside of your row (the innermost ``), add one column using this code: ```html
Column One
``` In the above example, we used the classes `.small-12` and `.large-6` to define the size of the column on small vs. large email clients. Foundation uses a 12-column grid, so on mobile clients, the column stretches the full width of the page, and on desktop clients, the column is half the width of the row. Since this first column is half-width, we need a second one to go with it. *After* the `` for the first column, add the code for the second column: ```html
Column One Column Two
``` You may have noticed the `.first` and `.last` classes on the column. The first column in a row needs the `.first` class, and the last column in a row needs the `.last` class. This is explained more in the [First and Last Classes](grid.html#first-and-last-classes) section of the grid documentation. That's a lot of HTML! Let's look at what it is at a high level: ```html ``` The CSS classes are always on the outermost table element, so that's an easy way to identify where a component starts. The container starts at the table with the `.container` class, the row starts at the table with the `.row` class, and so on. --- ## Inlining Now that we have a basic email, the last thing we need to do before we can send it is *inline* it. This is the process of injecting all of the CSS for the email into the HTML, so that it works as a self-contained file. Email clients like Gmail and Outlook strip out `