From c49e76e5bcfc0ce232bdbbd1496af6e4d79e05fa Mon Sep 17 00:00:00 2001 From: Dan Mindru Date: Mon, 19 Oct 2015 18:10:54 +0200 Subject: [PATCH] Updated README --- README.md | 73 +++++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 60 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 05a480f..b376589 100644 --- a/README.md +++ b/README.md @@ -1,26 +1,53 @@ # Responsive HTML email signatures -Responsive templates for email signatures. -**Disclaimer**: super basic layout. +Responsive templates for email signatures.
+**Disclaimer**: super basic layout, but there's nothing basic about HTML emails. -## What does it do (checklist) - -## Get started +When you need some basic signatures that work on mobile.
+...and your colleagues need them too.
+...but you don't want to deal with tables and inline styles. ## Preview -@todo -Here's an example of what's inside: +Here's how the samples look: -![Signature preview](http://danmind.ru/img/fadeit-sign.png) -There are a few other variations too, but they need some polishing. +![Fadeit desktop](http://danmind.ru/img/fadeit-desktop.png)
+![Fadeit mobile](http://danmind.ru/img/fadeit-mobile.png) + +![Play desktop](http://danmind.ru/img/play-desktop.png)
+![Play mobile](http://danmind.ru/img/play-mobile.png) + + +## What does it do (checklist) +- [x] config-based template generation +- [x] allows generating multiple templates (for your colleagues too!) +- [x] transforms linked (``) CSS into inline styles +- [x] embeds local `img[src]` into the template (base64).* +- [x] minifies the template +- [x] media queries for email clients that support them +- [x] can build templates from multiple sources +- [x] watches HTML/CSS files for changes and re-builds + +** *Some email clients don't support them, so an external URL might be a good idea. ** + + +## Getting started +Take a look at `src/fadeit/` for an example. Copy / Paste, rename it and change `src/fadeit/conf.js` to suite your needs. Run `gulp` to build the templates (into `/dist`). The gulp task will watch HTML & CSS files by default. + +``` +$ gulp +``` ## CSS Support -See [this table](https://www.campaignmonitor.com/css/). Using gulp-inline-css (link). +Remember, it's HTML emails, so you need to check a big-ass table to find out nothing's gonna work. +See [this](https://www.campaignmonitor.com/css/). To convert CSS files to inline styles [gulp-inline-css](https://www.npmjs.com/package/gulp-inline-css) is being used. -## TODOs -fix inline-css issue, preprocessor support (simpler BEM)? +## TODO +- [] closing `inline-css` issue [#8](https://github.com/jonkemp/inline-css/issues/8#issuecomment-149025428) would greatly improve this repo +- [] preprocessor support (simplifies BEM) +- [] use github pages to show live demos +- [] fix all email clients ## Usage with different e-mail clients @@ -29,4 +56,24 @@ fix inline-css issue, preprocessor support (simpler BEM)? There are several Thunderbird plugins which can automatically insert signatures when composing e-mails. We recommend [SmartTemplate4](https://addons.mozilla.org/en-us/thunderbird/addon/smarttemplate4) as one of the options. It can use different templates for new e-mails, replies and forwarded e-mails. -### Apple mail \ No newline at end of file +### Apple Mail / OS X (oh boy) +1. Open Mail.app and go to `Mail` -> `Preferences` -> `Signatures` +2. Create a new signature and write some placeholder text (doesn't matter what it is, but you have to identify it later). +3. Close Mail.app. +4. Open terminal, then open the signature files using TextEdit (might be different for iCloud drive check the article below). +``` +$ open -a TextEdit ~/Library/Mobile\ Documents/com~apple~mail/Data/V3/MailData/Signatures/ubiquitous_*.mailsignature` +``` +5. Keep the file with the placeholder open, close the other ones. +6. Replace the `...` and it's contents with the template of your choice. *Don't remove the meta information at the top!* +7. Open Mail.app and compose a new mail. Select the signature from the list to test it out. + +**NB**: Images won't appear in the signature preview, but will work fine when you compose a message. + + + + +You can also open the HTML files in `/dist` in a browser, CMD + A, CMD + C and then paste into the signature box. This won't copy the `` part or the `