Get started

There are a few ways to get started with Outline Mail.

Download the latest release from GitHub.

Install with Bower

bower install outline-mail

To clone the git repository. Just run the following command.

[sudo] git clone git@github.com:matt-harris/outline-mail.git

Overview

Outline Mail is HTML email framework with a bunch of fully tested responsive components to provide you a solid foundation for your HTML email project.

It allows you to mix and match content blocks to easily build an HTML email using todays best practices in minutes.

You can let Gulp do its magic if you are in to that, or simply copy & paste the component code into the master layout file.

Outline Mail comes with a fully commented gulpfile.js and package.json file which lists the plugins used. For more information about getting sarted with gulp read this excellent intro by Mark Goodyear.

Outline Mail's components are tested in Litmus in over 30+ email clients.

Outline Mail's library of email components will keep on growing! If you have any requests please get in touch.

Layouts

Start creating your HTML email

I've included layouts/index.tpl.html (if you are using Gulp) or dist/index.html (if you are copying and pasting the component code), as a starting point. This has all base markup and styles needed to build your responsive email. You then just simply change / add text and images.

You have two options to build your HTML email:-

  1. Use Gulp and automate the build of your email (use layouts/index.tpl.html):-

    Gulp tasks included:-

    • Include partial files into email template (compiles to dist/)
    • Compress images (compiles to dist/)
    • Reload browser (Browser Sync)
    • Send test emails (Requires Mailgun API key)

    Just simply stack your email components in order to create your responsive email.

    For example to include a header - pick the style of your choice and then paste into the index.tpl.html

    @@include('header/_header-full.html')
  2. Copy and paste the component html straight into your dist/index.html file. Just hit the 'View code' button to view the source code for that component.

Examples

Five example emails are included for reference.

The build files are located in templates/layouts/.

The final compiled files are located in dist/.

Example 1

Example Email View demo View code

Example 2

Example Email View demo View code

Example 3

Example Email View demo View code

Example 4

Example Email View demo View code

Example eCommerce

Example ecommerce View demo View code

Hero

Hero - title, text and CTA components/hero/_hero-title-text-cta.html

A hero block with a title, text and CTA button aligned to the left.

Hero - title, text and CTA

Copy and paste this into the main layout file.

@@include('hero/_hero-title-text-cta.html')
View demo View code

Hero - title, text and CTA centre components/hero/_hero-title-text-cta-centre.html

A hero block with a title, text and CTA button aligned to the centre.

Hero - title, text and CTA centre

Copy and paste this into the main layout file.

@@include('hero/_hero-title-text-cta-centre.html')
View demo View code

Hero - image, title, text and CTA components/hero/_hero-img-title-text-cta.html

A hero block with an image, title, text and CTA button aligned to the left.

Hero - image, title, text and CTA

Copy and paste this into the main layout file.

@@include('hero/_hero-img-title-text-cta.html')
View demo View code

Hero - image, title, text and CTA centre components/hero/_hero-img-title-text-cta-centre.html

A hero block with an image, title, text and CTA button aligned to the centre.

Hero - image, title, text and CTA centre

Copy and paste this into the main layout file.

@@include('hero/_hero-img-title-text-cta-centre.html')
View demo View code

List

List - image, title and author components/list/_list-img-title-author.html

A list style layout with section title, image, title and author.

List - image, title and author

Copy and paste this into the main layout file.

@@include('list/_list-img-title-author.html')
View demo View code

List - title and author components/list/_list-title-author.html

A list style layout with section title, title and author.

List - title and author

Copy and paste this into the main layout file.

@@include('list/_list-title-author.html')
View demo View code

Misc

Misc - Divider components/misc/_divider.html

A full width dividing line.

Misc - Divider

Copy and paste this into the main layout file.

@@include('misc/_divider.html')
View demo View code

Misc - Section title centre components/misc/_section-title-centre.html

A section title aligned to the centre. Place this above a content component block (e.g Two up centre).

Misc - Section title centre

Copy and paste this into the main layout file.

@@include('misc/_section-title-centre.html')
View demo View code

Misc - View in browser components/misc/_view-in-browser.html

A basic full width block with text aligned to the centre.

Misc - View in browser

Copy and paste this into the main layout file.

@@include('misc/_view-in-browser.html')
View demo View code

One up

One up - text components/one-up/_one-up.html

A basic one column block.

One up

Copy and paste this into the main layout file.

@@include('one-up/_one-up.html')
View demo View code

Two up

Two up - text components/two-up/_two-up-text.html

A two column text block aligned to the left.

Two up - text

Copy and paste this into the main layout file.

@@include('two-up/_two-up-text.html')
View demo View code

Two up - title, text components/two-up/_two-up-title-text.html

A two column text block with title aligned to the left.

Two up - title, text

Copy and paste this into the main layout file.

@@include('two-up/_two-up-title-text.html')
View demo View code

Two up components/two-up/_two-up.html

A two column block with image, title and text aligned to the left.

Two up

Copy and paste this into the main layout file.

@@include('two-up/_two-up.html')
View demo View code

Two up - centre components/two-up/_two-up-centre.html

A two column block with image, title and text aligned to the centre.

Two up - centre

Copy and paste this into the main layout file.

@@include('two-up/_two-up-centre.html')
View demo View code

Two up - button components/two-up/_two-up-button.html

A two column block with image, title, text and CTA button aligned to the left.

Two up - button

Copy and paste this into the main layout file.

@@include('two-up/_two-up-button.html')
View demo View code

Two up - button centre components/two-up/_two-up-button-centre.html

A two column block with image, title, text and CTA button aligned to the centre.

Two up - button centre

Copy and paste this into the main layout file.

@@include('two-up/_two-up-button-centre.html')
View demo View code

Three up

Three up - text components/three-up/_three-up-text.html

A three column text block aligned to the left.

Three up - text

Copy and paste this into the main layout file.

@@include('three-up/_three-up-text.html')
View demo View code

Three up - title, text components/three-up/_three-up-title-text.html

A three column text block with title aligned to the left.

Three up - title, text

Copy and paste this into the main layout file.

@@include('three-up/_three-up-title-text.html')
View demo View code

Three up components/three-up/_three-up.html

A three column block with image, title and text aligned to the left.

Three up

Copy and paste this into the main layout file.

@@include('three-up/_three-up.html')
View demo View code

Three up - centre components/three-up/_three-up-centre.html

A three column block with image, title and text aligned to the centre.

Three up - centre

Copy and paste this into the main layout file.

@@include('three-up/_three-up-centre.html')
View demo View code

Three up - button components/three-up/_three-up-button.html

A three column block with image, title, text and CTA button aligned to the left.

Three up - button

Copy and paste this into the main layout file.

@@include('three-up/_three-up-button.html')
View demo View code

Three up - button centre components/three-up/_three-up-button-centre.html

A three column block with image, title, text and CTA button aligned to the centre.

Three up - button centre

Copy and paste this into the main layout file.

@@include('three-up/_three-up-button-centre.html')
View demo View code

Four up

Four up components/four-up/_four-up.html

A two column block with four items including image, title and text aligned to the left.

Four up

Copy and paste this into the main layout file.

@@include('four-up/_four-up.html')
View demo View code

Four up - centre components/four-up/_four-up-centre.html

A two column block with four items including image, title and text aligned to the centre.

Four up - centre

Copy and paste this into the main layout file.

@@include('four-up/_four-up-centre.html')
View demo View code

Four up - button components/four-up/_four-up-button.html

A two column block with four items including image, title, text and CTA button aligned to the left.

Four up - button

Copy and paste this into the main layout file.

@@include('four-up/_four-up-button.html')
View demo View code

Four up - button centre components/four-up/_four-up-button-centre.html

A two column block with four items including image, title, text and CTA button aligned to the centre.

Four up - button centre

Copy and paste this into the main layout file.

@@include('four-up/_four-up-button-centre.html')
View demo View code

Article

Article components/article/_article.html

A two column article layout block including image, title, text and CTA button.

Article

Copy and paste this into the main layout file.

@@include('article/_article.html')
View demo View code

Article - multiple with title components/article/_articles-title.html

Multiple articles with a section heading including image, title, text and CTA button.

Article - multiple with title

Copy and paste this into the main layout file.

@@include('article/_articles-title.html')
View demo View code

eCommerce

eCommerce Intro components/ecommerce/_ecommerce-intro.html

A general eCommerce text introduction with CTA button.

eCommerce Intro

Copy and paste this into the main layout file.

@@include('ecommerce/_ecommerce-intro.html')
View demo View code

eCommerce Order details components/ecommerce/_ecommerce-order-details.html

A general eCommerce product item with product image and description.

eCommerce Order details

Copy and paste this into the main layout file.

@@include('ecommerce/_ecommerce-order-details.html')
View demo View code

eCommerce Order total components/ecommerce/_ecommerce-order-total.html

A general eCommerce order total.

eCommerce Order total

Copy and paste this into the main layout file.

@@include('ecommerce/_ecommerce-order-total.html')
View demo View code

eCommerce Order delivery components/ecommerce/_ecommerce-order-delivery.html

An eCommerce two column order delivery section.

eCommerce Order delivery

Copy and paste this into the main layout file.

@@include('ecommerce/_ecommerce-order-delivery.html')
View demo View code