Build Workflow Guide

How to use, customize, and deploy these email templates in your projects. Covers manual workflows, build tool integration, and automated pipelines.

Directory Structure

responsive-email-templates/
├── templates/
│   ├── transactional/         # 10 templates for account & order flows
│   │   ├── welcome.html
│   │   ├── receipt.html
│   │   ├── password-reset.html
│   │   ├── email-verification.html
│   │   ├── account-activated.html
│   │   ├── shipping-notification.html
│   │   ├── invoice.html
│   │   ├── subscription-confirmed.html
│   │   ├── order-cancelled.html
│   │   └── account-deactivated.html
│   ├── marketing/             # 10 templates for campaigns
│   │   ├── promotional-offer.html
│   │   ├── announcement.html
│   │   ├── product-launch.html
│   │   ├── flash-sale.html
│   │   ├── seasonal-campaign.html
│   │   ├── referral-invite.html
│   │   ├── survey-request.html
│   │   ├── re-engagement.html
│   │   ├── webinar-invite.html
│   │   └── loyalty-reward.html
│   └── newsletters/          # 10 templates for recurring content
│       ├── weekly-digest.html
│       ├── monthly-roundup.html
│       ├── featured-content.html
│       ├── industry-news.html
│       ├── tips-and-tricks.html
│       ├── community-update.html
│       ├── curator-picks.html
│       ├── event-recap.html
│       ├── product-changelog.html
│       └── year-in-review.html
├── partials/
│   ├── head-reset.html        # CSS resets and head boilerplate
│   └── footer.html            # Reusable footer with legal links
├── guides/
│   ├── merge-tags-guide.md    # ESP merge tag reference
│   ├── email-client-compatibility.md  # Client support matrix
│   ├── testing-checklist.md   # Pre-send QA checklist
│   └── build-workflow.md      # This file
├── configs/
│   └── litmus-test-config.json  # Litmus test automation config
├── README.md
└── LICENSE

Quick Start: Manual Workflow

The simplest way to use these templates — no build tools required.

Step 1: Pick a Template

Choose the template that matches your email type. Each template is a complete, standalone HTML file — no assembly required.

Step 2: Customize Branding

Open the template in a text editor and update these values:

Search & Replace:
  "Acme Corp"           → Your company name
  "#4a90d9"             → Your primary brand color
  "#2c5f8a"             → Your dark brand color (buttons hover, header)
  "#e8f4e8"             → Your light accent color
  "https://example.com" → Your website URL
  Logo image URL        → Your hosted logo URL

Step 3: Replace Merge Tags

Follow the merge-tags-guide.md to swap {{placeholder}} syntax for your ESP's format.

Step 4: Upload to Your ESP

Mailchimp: Campaigns → Email templates → Code your own
SendGrid: Email API → Dynamic Templates → Add Version → Code Editor
Klaviyo: Email Templates → Create HTML Template
HubSpot: Marketing → Email → Design Manager → Coded files

Step 5: Test and Send

Follow the testing-checklist.md before sending to your list.

Build Tool Integration

For teams with a build pipeline, here are patterns for common tools.

MJML Conversion

MJML is a markup language that compiles to email-compatible HTML. You can use these templates as-is (they're already compiled), but if you want to author new templates in MJML:

bash

# Install MJML CLI
npm install -g mjml

# Compile a single template
mjml input.mjml -o output.html

# Watch for changes during development
mjml --watch input.mjml -o output.html

To integrate MJML into a build pipeline:

json

// package.json
{
  "scripts": {
    "build:emails": "mjml src/emails/*.mjml -o dist/emails/",
    "watch:emails": "mjml --watch src/emails/*.mjml -o dist/emails/",
    "preview:email": "open dist/emails/welcome.html"
  }
}

CSS Inlining with Juice

If you prefer writing styles in a

Contents