---
title: Getting Started with Sass
description: Get started with the Sass-powered ZURB Stack for writing HTML 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.
The Sass workflow for Foundation for Emails is backed by the [ZURB Email Stack](zurb-stack.html), an all-in-one build system for creating HTML emails. This workflow requires a bit more up-front setup, but the tooling makes it wicked fast to code, and keeps your code amazingly clean with our new custom HTML tags in Inky.
The ZURB Stack workflow also includes Handlebars, allowing you to write emails as templates instead of static files. Lastly, you can easily make sweeping design changes with the Sass [settings file](sass.html#the-settings-file). Here’s everything that’s packaged in this template:
- Inky HTML
- Sass
- Handlebars templates
- BrowserSync
- Image compression
- Inlining
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.
---
## 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
We'll use the Foundation CLI to set up a new project. If you already have the Foundation CLI installed from Foundation for Sites or Apps, you can skip this first command.
```bash
npm install --global foundation-cli
```
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
```
Once the CLI is installed on your machine, it’s super easy to fire up a blank Foundation for Emails project. Move into the folder you store your projects in, and then run this 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. After that, the project template will be downloaded, and the various dependencies installed. The entire process takes over a minute.
---
## 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/` (as in "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. Below we've annotated this boilerplate, explaining what does what.
{{{{raw}}}}
```html
{{> body}}
```
{{{{/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
Column OneColumn Two
```
Here we're using all three of the key layout elements: the container, row, and column.
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 `` 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.
---
## 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 `