Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/foundation/foundation-emails

Quickly create responsive HTML emails that work on any device and client. Even Outlook.
https://github.com/foundation/foundation-emails

Last synced: 17 days ago
JSON representation

Quickly create responsive HTML emails that work on any device and client. Even Outlook.

Host: GitHub
URL: https://github.com/foundation/foundation-emails
Owner: foundation
License: mit
Created: 2013-09-18T20:13:27.000Z (about 11 years ago)
Default Branch: develop
Last Pushed: 2023-12-06T23:12:15.000Z (about 1 year ago)
Last Synced: 2024-04-14T17:41:32.883Z (8 months ago)
Language: HTML
Homepage: https://get.foundation/emails/docs/
Size: 8.45 MB
Stars: 7,752
Watchers: 256
Forks: 1,092
Open Issues: 192
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md

Awesome Lists containing this project

awesome - foundation-emails - Quickly create responsive HTML emails that work on any device and client. Even Outlook. (HTML)
awesome-email-marketing - Foundation for Emails
awesome-opensource-email - Foundation for Emails 2 - Quickly create responsive HTML emails that work on any device and client. Even Outlook. - `MIT`, `HTML` (Code / Templating)

README

# [Foundation for Emails](https://get.foundation/emails)

[![npm version badge](https://img.shields.io/npm/v/foundation-emails.svg)](https://www.npmjs.org/package/foundation-emails)
[![downloads badge](http://img.shields.io/npm/dm/foundation-emails.svg)](https://www.npmjs.org/package/foundation-emails)
[![Gem Version](https://badge.fury.io/rb/foundation_emails.svg)](https://badge.fury.io/rb/foundation_emails)
[![downloads badge](http://img.shields.io/npm/l/foundation-emails.svg)](https://www.npmjs.org/package/foundation-emails)
[![CDNJS](https://img.shields.io/cdnjs/v/foundation-emails.svg)](https://cdnjs.com/libraries/foundation-emails)

Foundation for Emails (previously known as Ink) is a framework for creating responsive HTML emails that work in any email client — even Outlook. Our HTML/CSS components have been tested across every major email client to ensure consistency. And with the [Inky](https://github.com/zurb/inky) templating language, writing HTML emails is now even easier.

## Getting Started

The main way to get started is with our [email template stack](https://github.com/zurb/foundation-emails-template). To use the stack, you'll need [Node.js](https://nodejs.org/en/) no greater than version 10 installed on your machine.

`nvm` installation instructions can be found [here](https://github.com/nvm-sh/nvm#install--update-script)

To set up the emails template, run these commands:

```bash
git clone https://github.com/zurb/foundation-emails-template project
cd project
nvm install 10
nvm use 10
npm install
```

Then run `npm start` to run the project. A new browser window will open with a BrowserSync server showing the finished files.

Run `npm run build` to do a full email inlining process.

#### Using the Ruby gem

**foundation_emails** is a gem that enables you to use Foundation for Emails assets within a Rails project. To install in your app:

1. Add the following line to your Gemfile:

```ruby
gem 'foundation_emails'
```

2. Then execute:

```bash
bundle install
```

3. Import Foundation for Emails in your emails' stylesheet(s):

```scss
// app/assets/stylesheets/your_emails_stylesheet.scss

@import "foundation-emails";
```

Adding Inky's templating capabilities to Rails is easy thanks to the [**inky-rb**](https://github.com/zurb/inky-rb) gem, which bundles `foundation_emails` by default.

## Documentation

**Check out our [Migration Guide](https://github.com/zurb/foundation-emails/blob/master/migration.md) for upgrading an existing template or for more in-depth code examples.**

Foundation for Emails 2.0 documentation and framework are on the `develop` branch and you can compile it on your own machine.

Run these commands to set up the documentation:

```bash
git clone https://github.com/zurb/foundation-emails.git
cd foundation-emails
```

Foundation for Emails 2.0 documentation is on the `develop` branch.

```bash
git fetch
git checkout develop
npm install
```

Then run `npm start` to compile the documentation. When it finishes, a new browser window will open pointing to a BrowserSync server displaying the documentation.

## Testing

Run `npm run test:visual` to compile the visual regression tests. All of the pages under `test/visual/pages` are compiled and inlined. From there, they can be uploaded to Litmus for testing.

## Inky

[Inky](https://github.com/zurb/inky) is our new templating language that converts simple HTML into the complex tables required for email layout.

The parser converts a set of custom HTML tags, expanding them out into full HTML syntax. Below is a list of every custom element.

### Grid

```html

```

### Block Grid

```html

```

### Components

```html

```

```html

Item One
Item Two
Item Three

```

## Contributing

As an open source project, we looooove our community support. Please file issues, or better yet pull requests on the [Foundation for Emails Repo](https://github.com/zurb/foundation-emails). We're stoked to hear your feedback, make improvements, and keep evolving Foundation for Emails!