Skip to content
πŸ“¨ Making emails fun again
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src πŸ› FIX: Image sizes Apr 9, 2019
.gitignore
CODE_OF_CONDUCT.md πŸš€ RELEASE: First commit Apr 7, 2019
LICENSE πŸš€ RELEASE: First commit Apr 7, 2019
README.md πŸ“– DOC: Outlook screenshot Apr 9, 2019
gulpfile.js πŸ› FIX: Typo Apr 9, 2019
package-lock.json πŸ“¦ NEW: Update dependencies Apr 24, 2019
package.json πŸ“¦ NEW: Update dependencies Apr 24, 2019

README.md

FuzzyMail Dependencies

Making emails fun again ✌

Preview Demo Screenshots: Modern Client β€’ Gmail β€’ Outlook β€’ Mobile


Problem: Supporting old email clients it's a real pain. I wanted to create something that can be flexible in design and yet support legacy email clients like Outlook.


Solution: FuzzyMail - is a simple tool to automate the development process for creating email templates. Supporting old email clients while maintaining responsiveness. Fuzzymail is supported on over 60+ email clients.


Features

  • Dev server with live reload
  • PostCSS with postcss-preset-env
  • Reusable chunks for HTML templating
  • Inline CSS on distribution files

Documentation

Installation

FuzzyMail requires Node v7.5+. This is the only global dependency. You can download Node here.

Setup project

Clone repository:

git clone https://github.com/luangjokaj/fuzzymail & cd fuzzymail
β”œβ”€β”€ build/                   # Build files
β”œβ”€β”€ dist/                    # Distribution files
β”œβ”€β”€ src/                     # Template files
β”‚   β”œβ”€β”€ assets/              # Assets directory
β”‚       β”œβ”€β”€ css/             # CSS files
β”‚       β”œβ”€β”€ img/             # Image directory
β”‚   β”œβ”€β”€ includes/            # Template partials
└── .gitignore               # Git ignored files
└── CODE_OF_CONDUCT.md       # Code of conduct
└── gulpfile.js              # Gulp configuration
└── LICENSE                  # License agreements
└── package.json             # Node packages
└── README.md                # You are reading this

Development

Start development server:

npm run dev

Templating ✍️

To avoid repetitive HTML code the build uses gulp-file-include, it allow us to re-use chunks of code written in separate files. It is recommended to place the included files in the /src/includes directory to keep track of changes and live-reload.

Production

To build the production templates:

npm run prod

All styles will be inlined.


Credits:

You can’t perform that action at this time.