npm install --global foundation-cli
```
-If you run into any pemission errors (EACCESS) on OS X or Linux, you can try prefixing the command with `sudo`.
+If you run into any permission errors (EACCESS) on OS X or Linux, you can try prefixing the command with `sudo`.
```bash
sudo npm install --global foundation-cli
```html
<container>
<row>
- <columns large="6">Column One</columns>
- <columns large="6">Column Two</columns>
+ <columns small="12" large="6">Column One</columns>
+ <columns small="12" large="6">Column Two</columns>
</row>
</container>
```
Here we're using all three of the key layout elements: the container, row, and column.
-A **container** will wrap the body of your entire email. It applies a maximum width to the body of the email.
+A **container** will wrap the body of your email. It applies a maximum width to the body of the email.
**Rows** are used to group sets of **columns** together. 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.
-In the above example, we used the attribute `large` on the `<column>` tag to define a size for that column *on large screens*. Foundation uses a 12-column grid, and since `large="6"`, that means each column will take up half the width of the row.
+In the above example, we used the attribute `large` on the `<column>` tag to define a size for that column *on large screens*. Foundation uses a 12-column grid, and since `large="6"`, that means each column will take up half the width of the row. On a small screen, each columns will be full width and the second column will stack underneath.
---
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 `<style>` tag from the `<head>` and Gmails strips it from the `<body>` of the email as well. It's best to have your CSS written inline within your markup. Hand writing all your CSS inline in a style tag would be a real pain and would take a long time.
+
The build process doesn't inline by default. To do a full inlining process as you build, quit the process you have running in your command line, and run `npm run build` instead. This does the same build process, but adds the inlining step at the end.
+Your email's CSS will include media queries for responsive styling which the inliner tool will move into the `<body>` so they are preserved.
+
When the email opens up in the browser, it will look the same. But try viewing the source code of the page, and you'll see a mess of code like this:
+```html
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" style="background:#cacaca;min-height:100%"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">...
+```
+
---
## Testing
The most popular tool for testing emails is [Litmus](https://litmus.com/). All you have to do is paste in the HTML of an email, and you get a live preview in any email client you want.
+It's up to you to choose what email clients are important to test in, but you can [see our compatability list](compatibility.html) for recommendations.
+
---
## Next Steps
projects / thirdparty / foundation / foundation-emails.git / commitdiff
