--- /dev/null
+---
+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.
+
+<a href="#" class="large button">Download Foundation for Emails</a>
+
+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.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 `src/layouts/default.html`, you can see the boilerplate needed to make an HTML work, with comments explaining what does what.
+
+```html
+<!-- Emails use the XHTML Strict doctype -->
+<!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">
+<head>
+ <!-- The character set should be utf-8 -->
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <!-- Enables media queries -->
+ <meta name="viewport" content="width=device-width"/>
+ <!-- Link to the email's CSS, which will be inlined into the email -->
+ <link rel="stylesheet" href="assets/css/foundation.css">
+</head>
+
+<body>
+ <!-- Wrapper for the body of the email -->
+ <table class="body" data-made-with-foundation>
+ <tr>
+ <!-- The class, align, and <center> tag center the container -->
+ <td class="center" align="center" valign="top">
+ <center>
+ <!-- The content of your email goes here. -->
+ </center>
+ </td>
+ </tr>
+ </table>
+</body>
+</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 `<center>` tag of `index.html`, add this table code:
+
+```html
+<table class="container">
+ <tbody>
+ <tr>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+```
+
+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
+<table class="row">
+ <tbody>
+ <tr></tr>
+ </tbody>
+</table>
+```
+
+### 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 `<tr>`), add one column using this code:
+
+```html
+<th class="columns small-12 large-6 first">
+ <table>
+ <tr>
+ <th>Column One</th>
+ <th class="expander"></th>
+ </tr>
+ </table>
+</th>
+```
+
+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 `<th>` for the first column, add the code for the second column:
+
+```html
+<th class="columns small-12 large-6 last">
+ <table>
+ <tr>
+ <th>Column Two</th>
+ <th class="expander"></th>
+ </tr>
+ </table>
+</th>
+```
+
+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
+<!-- Container -->
+ <!-- Row -->
+ <!-- Column One -->
+ <!-- Column Two -->
+```
+
+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.
+
+Our [web inliner](http://foundation.zurb.com/emails/inliner.html) automates this process for you. To use it, paste in the contents of `index.html` into the HTML field, paste in the contents of `css/foundation.css` into the CSS field, and then press "Inline!". On the right side of the screen, you'll see a large soup of HTML that is your inlined email.
+
+---
+
+## Testing
+
+Now that you have an inlined email, you'll need to test it in real email clients to verify that it looks correct. All of Foundation's built-in components have already been tested in every major email client, so we've done a lot of the work for you. However, you'll want to test your email before you send it out to the masses.
+
+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.
+
+---
+
+## Next Steps
+
+You've successfully installed Foundation for Emails, and written, inlined, and tested your first email! To keep going with the framework, you can check out the documentation for the other framework components, including [buttons](button.html), [callouts](callout.html), [menus](menu.html).
+
+If you're interested in going in-depth on the framework with the Foundation team, [check out our master class on Foundation for Emails](http://zurb.com/university/responsive-emails-foundation), an on-demand video series that explores every aspect of email design workflow.
---
title: Foundation for Emails
-description: Lorem ipsum
+description: Use Foundation for Emails to design responsive HTML emails that work in any email client.
---
-Don't stop believing.
+## Getting Started
+
+There are two ways to use Foundation: the CSS version and the Sass version.
+
+The **CSS version** is a ZIP file download with all the HTML and CSS you need to get started writing an HTML email. You'll need to run your HTML through our web inliner before you can send them off.
+
+<a href="css-workflow.html" class="large button">Get Started with CSS Version</a>
+
+The **Sass version** gives you more control over the visual styles of the framework, and a full build process, which includes a Sass compiler and image compression. It also includes Inky, our custom HTML language which makes writing code faster, a built-in inliner, and a live reloading server for testing. **The Sass version requires you to have Node.js installed.**
+
+<a href="sass-workflow.html" class="large button">Get Started with Sass Version</a>
+
+---
+
+## What's in the Box?
+
+Get to know the pieces of Foundation.
+
+### General
+
+<div class="row up-1 medium-up-2 large-up-3 docs-big-index">
+ <div class="column"><a href="sass.html">
+ <strong>Using Sass</strong>
+ <p>Loading and customizing the Foundation for Emails Sass.</p>
+ </a></div>
+ <div class="column"><a href="inky.html">
+ <strong>Using Inky</strong>
+ <p>Our custom HTML tags for writing email components.</p>
+ </a></div>
+ <div class="column"><a href="inky.html">
+ <strong>ZURB Stack</strong>
+ <p>An all-in-one solution for email development.</p>
+ </a></div>
+ <div class="column"><a href="inky.html">
+ <strong>Compatibility</strong>
+ <p>Foundation works with every key email client—even Outlook.</p>
+ </a></div>
+ <div class="column"><a href="inky.html">
+ <strong>Migrate from Ink</strong>
+ <p>Upgrade your Ink emails to Foundation for Emails 2.</p>
+ </a></div>
+</div>
+
+### Components
+
+<div class="row up-1 medium-up-2 large-up-3 docs-big-index">
+ <div class="column"><a href="grid.html">
+ <strong>The Grid</strong>
+ <p>A fully responsive grid with support for small and large layouts.</p>
+ </a></div>
+ <div class="column"><a href="global.html">
+ <strong>Global Styles</strong>
+ <p>Core framework styles and Sass variables.</p>
+ </a></div>
+ <div class="column"><a href="alignment.html">
+ <strong>Alignment Classes</strong>
+ <p>Utility classes to align text and images.</p>
+ </a></div>
+ <div class="column"><a href="button.html">
+ <strong>Buttons</strong>
+ <p>Buttons with support for multiple sizes and colors.</p>
+ </a></div>
+ <div class="column"><a href="button.html">
+ <strong>Callout</strong>
+ <p>Colored panels to use for sectioning or calls to action.</p>
+ </a></div>
+ <div class="column"><a href="thumbnail.html">
+ <strong>Thumbnail</strong>
+ <p>Simple image styles to add a thumbnail look.</p>
+ </a></div>
+ <div class="column"><a href="typography.html">
+ <strong>Typography</strong>
+ <p>Core styles for paragraphs, headings, and more.</p>
+ </a></div>
+ <div class="column"><a href="visibility.html">
+ <strong>Visibility</strong>
+ <p>Utility classes to control how content appears at different screen sizes.</p>
+ </a></div>
+</div>
--- /dev/null
+---
+title: Getting Started with Sass
+description: Get started with the Sass-powered ZURB Stack for writing HTML emails.
+---
+
+The Sass workflow needs a bit of installation to get going and uses some more technically complex tools like Gulp. This approach makes it wicked fast to code and keeps your code amazingly clean with our new custom HTML tags in Inky. The Sass Workflow lets you use handlebars, which uses partials for things like the header and footer. You can also easily make sweeping design changes with Sass’s variables and our Settings.scss file. Here’s everything that’s packaged in this approach:
+
+- Inky Templating language support
+- Sass
+- Boilerplate
+- Panini
+- BrowserSync
+- Image Compression
+- Gulp
+
+---
+
+## Requirements
+
+To use the Sass version of Foundation for Emails, you need Node.js installed on your computer. Node is compatible with Windows, OS X, and Linux—the [Node.js website](https://nodejs.org/) has installers for every operating system.
+
+---
+
+## Installing
+
+There’s a couple of ways to get the Sass Workflow on your machine Either our Command-Line Tool (CLI) or cloning the repo from Github.
+
+You’ll need to fire up your terminal to install via the CLI. Just run the following command to install the Foundation CLI.
+
+Note: If you already have the Foundation CLI installed from Sites or Apps, you can skip this first command.
+
+```bash
+npm install --global foundation-cli
+```
+
+If you have any errors after running this command, try running the command:
+
+```bash
+sudo npm install --global foundation-cli
+```
+
+Some machines require sudo for npm commands.
+
+Once the CLI is installed on your machine, it’s super easy to fire up a Foundation for Emails Project. Move into your sites folder in your terminal (something like `cd yourWorkingDirectory`) and just run the following command:
+
+```bash
+foundation new --framework emails
+```
+
+The CLI will ask you for a project name, which is used as the name of the folder to install in.
+
+---
+
+## Running the Server
+
+After your project has been installed, run `cd project`, where `project` is the name of the project just created. Then run:
+
+```bash
+npm start
+```
+
+This will kick off the build process, which includes HTML parsing, Sass, image compression, and a server. When the initial build finishes, your browser will pop open a new tab pointing to your project. You'll be seeing a blank `index.html` file.
+
+---
+
+## File Structure
+
+You'll do all of your work in the `src` folder of your project. The various HTML files, Sass files, and images inside of `src` are compiled to a new folder called `dist` (meaning "distribution"), which contains the final HTML and CSS for your emails. These are the files you'll upload to Litmus, Campaign Monitor, etc. for testing, or load into your email campaign service.
+
+Here's a breakdown of the files in the `src` folder:
+
+- `assets/`: Sass and image files.
+- `layouts/`: Boilerplate HTML that wraps all of your emails.
+- `pages/`: HTML files for emails.
+- `partials/`: Reusable chunks of HTML that can be injected into pages.
+
+---
+
+## Boilerplate
+
+Inside `src/layouts/default.html`, you can see the boilerplate needed to make an HTML work, with comments explaining what does what.
+
+{{{{raw}}}}
+
+```html
+<!-- Emails use the XHTML Strict doctype -->
+<!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">
+<head>
+ <!-- The character set should be utf-8 -->
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <!-- Enables media queries -->
+ <meta name="viewport" content="width=device-width"/>
+ <!-- Link to the email's CSS, which will be inlined into the email -->
+ <link rel="stylesheet" href="assets/css/foundation.css">
+</head>
+
+<body>
+ <!-- Injection point for the inline <style> element. Don't remove this comment! -->
+ <!-- <style> -->
+ <!-- Wrapper for the body of the email -->
+ <table class="body" data-made-with-foundation>
+ <tr>
+ <!-- The class, align, and <center> tag center the container -->
+ <td class="center" align="center" valign="top">
+ <center>
+ <!-- The body of each email you write is injected here -->
+ {{> body}}
+ </center>
+ </td>
+ </tr>
+ </table>
+</body>
+</html>
+```
+
+{{{{/raw}}}}
+
+---
+
+## 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, the ZURB Stack includes Inky, a templating language that converts simple HTML tags to the complex HTML required for the components.
+
+Let's build a basic grid.
+
+```html
+<container>
+ <row>
+ <columns large="6">Column One</columns>
+ <columns 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.
+
+**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.
+
+---
+
+## 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.
+
+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.
+
+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:
+
+---
+
+## Testing
+
+Now that you have an inlined email, you'll need to test it in real email clients to verify that it looks correct. All of Foundation's built-in components have already been tested in every major email client, so we've done a lot of the work for you. However, you'll want to test your email before you send it out to the masses.
+
+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.
+
+---
+
+## Next Steps
+
+You've successfully installed Foundation for Emails, and written, inlined, and tested your first email! To keep going with the framework, you can check out the documentation for the other framework components, including [buttons](button.html), [callouts](callout.html), [menus](menu.html).
+
+If you're interested in going in-depth on the framework with the Foundation team, [check out our master class on Foundation for Emails](http://zurb.com/university/responsive-emails-foundation), an on-demand video series that explores every aspect of email design workflow.
<a href="https://github.com/zurb/foundation-emails/releases/" target="_blank">(Changelog)</a>
</p>
+ <li class="docs-nav-title">Geting Started</li>
+ <li><a href="index.html">Overview</a></li>
+ <li><a href="css-workflow.html">CSS Version</a></li>
+ <li><a href="sass-workflow.html">Sass Version</a></li>
+
<li class="docs-nav-title">Guides</li>
- <li><a href="getting-started.html">Getting Started</a></li>
- <li><a href="installing.html">Installing</a></li>
<li><a href="sass.html">Using Sass</a></li>
<li><a href="inky.html">Using Inky</a></li>
<li><a href="zurb-stack.html">ZURB Stack</a></li>
projects / thirdparty / foundation / foundation-emails.git / commitdiff
