luangjokaj / Fuzzymail
Programming Languages
Projects that are alternatives of or similar to Fuzzymail
Information | Discord | Donate |
---|---|---|
FuzzyMail is Email template generator. Making emails fun again ✌ 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 for generating email templates. Supporting old email clients while maintaining responsiveness. Fuzzymail is supported on over 60+ email clients. |
Demo Screenshots: Modern Client • Gmail • Outlook • Mobile
Features
👇 | Includes |
---|---|
📦 | Live Server |
🔥 | Hot Reload & CSS Injection |
🎒 | Code Minification |
🌈 | Image Compression |
🕸 | Templating & Partial HTML Injection |
🎨 | PostCSS & Next Generation CSS |
🛎 | Inline CSS on distribution files |
Documentation
Installation
FuzzyMail requires Node.js v12+. This is the only global dependency. You can download Node.js here.
Setup project
File Structure
├── build/ # Build files
├── dist/ # Distribution files
├── src/ # Source files
│ ├── assets/ # Assets directory
│ ├── css/ # CSS files
│ ├── img/ # Image directory
│ ├── includes/ # HTML template partials
│ ├── index.html # Index page
└── .gitignore # Git ignored files
└── .editorconfig # Editor code styles
└── gulpfile.js # Gulp configuration
└── LICENSE # License agreements
└── package.json # Node.js packages
└── README.md # You are reading this
Install FuzzyMail from NPM
- Create a directory for the new email template and from there run FuzzyMail to generate the file structure:
npx fuzzymail
That's it 🍾 easy as that. Now start the development workflow: Start Workflow
Install FuzzyMail from Repository
Clone repository:
git clone https://github.com/luangjokaj/fuzzymail
-
This will clone the repository on your local machine. Navigate to the newly created directory.
-
Replace the file:
./package.json
with./installer/package.json
and continue with the dependency installation.
INSTALL DEPENDENCIES
npm install
Start Workflow
- To start the development server run the command:
npm run dev
- You are ready to go! Happy coding! 🤓
Templating and HTML Partials
To avoid repetitive HTML code, FuzzyMail uses gulp-file-include. It has a simple templating synthax and allows to re-use chunks of code written in separate files. These partials are located in the directory:
src/includes/
For more information check out their documentation and examples: https://github.com/haoxins/gulp-file-include
Production
To build the production templates:
npm run prod
All styles will be inlined, ready to upload the generated ZIP on mailchimp or else 🚀
Credits:
- HTML Templates http://emailframe.work/
Changelog
v0.0.8
- 🚀 RELEASE: Install files from versioned release instead of
master
branch.
v0.0.7
- 📖 DOC: Update README.md.
v0.0.6
- 🐛 FIX: Dependencies.
v0.0.5
- 🚀 RELEASE: Improved installation speed for global dependencies.
- BREAKING CHANGE: It is required to update FuzzyMail:
sudo npm install fuzzymail -g
.
v0.0.4
- 👌 IMPROVE: Meta.
v0.0.3
- 📖 DOC: Update documentation.
v0.0.2
- 📦 NEW: Run FuzzyMail globally from NPM.
v0.0.1
- 🚀 RELEASE: First release.