{"id":29177892,"url":"https://github.com/gitcoinco/signatures","last_synced_at":"2025-07-01T18:09:08.322Z","repository":{"id":44260659,"uuid":"252271931","full_name":"gitcoinco/signatures","owner":"gitcoinco","description":"Email signature builder","archived":false,"fork":false,"pushed_at":"2023-05-10T04:20:24.000Z","size":847,"stargazers_count":9,"open_issues_count":4,"forks_count":7,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-02-11T23:06:59.827Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gitcoinco.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-01T19:47:48.000Z","updated_at":"2023-12-06T04:47:34.000Z","dependencies_parsed_at":"2022-08-27T23:50:57.057Z","dependency_job_id":null,"html_url":"https://github.com/gitcoinco/signatures","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gitcoinco/signatures","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitcoinco%2Fsignatures","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitcoinco%2Fsignatures/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitcoinco%2Fsignatures/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitcoinco%2Fsignatures/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gitcoinco","download_url":"https://codeload.github.com/gitcoinco/signatures/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitcoinco%2Fsignatures/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263013738,"owners_count":23399815,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-07-01T18:09:02.483Z","updated_at":"2025-07-01T18:09:08.313Z","avatar_url":"https://github.com/gitcoinco.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Responsive HTML email signature(s)\n\n[![npm](https://img.shields.io/npm/v/responsive-html-email-signature.svg)](https://www.npmjs.com/package/responsive-html-email-signature)\n[![license](https://img.shields.io/github/license/danmindru/responsive-html-email-signature.svg)](/LICENSE)\n[![test action status](https://github.com/danmindru/responsive-html-email-signature/workflows/Test%20template%20output/badge.svg)](https://github.com/danmindru/responsive-html-email-signature/actions)\n\n### Let's punch email clients in the stomach 👊\n\nWhen you need some basic responsive email signatures that work on mobile.\u003cbr/\u003e\n...and your colleagues need them too.\u003cbr/\u003e\n...but you don't want to deal with tables and inline styles.\n\n[Read the docs in other languages](/i18n) ↗️\n\n## Preview\n\nHere are some examples:\n![responsive emails-01](https://cloud.githubusercontent.com/assets/1515742/10591900/13889d32-76b9-11e5-8dc0-b89d80189e93.png)\n![responsive emails-02](https://cloud.githubusercontent.com/assets/1515742/10591901/139c4954-76b9-11e5-80f7-5b0ccaf5af81.png)\n\n## Getting started\n\n- Clone repo `git clone https://github.com/danmindru/responsive-html-email-signature.git`\n- Run `npm install`\n- Run `npm start` to generate templates from configuration. This will continue to watch your files and re-make the template until you exit.\n\n### Customizing templates\n\n- Edit files in _/templates_\n- Open files from `./dist` in your fav browser to check them out\n\n\u003e When you're done, check out [how to add them to your email client of choice](#usage-with-different-email-clients) if in doubt.\n\n## Motivation\n\nWriting HTML emails \u0026 email signatures sucks. Let's make it easier. We can't fix all email clients, but we can surely make our lives easier with some automation. \u003cbr/\u003e\n\n## What does this pile of code do\n\n- [x] generates email templates from your config\n- [x] allows generating multiple templates at once (for your colleagues too!)\n- [x] transforms linked (`\u003clink\u003e`) CSS into inline styles\n- [x] embeds local `img[src]` into the template (base64).\\*\n- [x] minifies the template\n- [x] ads some basic media queries for mail clients that support them\n- [x] can build templates from multiple sources\n- [x] watches HTML / CSS files for changes and re-builds\n- [x] supports LESS / SASS / PostCSS\n- [x] autoprefixer, so you don't have to worry about your `-moz-`s or `-webkit-`s\n- [x] linting, checks for used template config parameters and more!\n\n\\*_Some mail clients might have [hard limits](https://support.google.com/a/answer/176652?hl=en) regarding the email size, so don't include large images if possible. If you need to, use a URL instead and host the image somewhere else._\n\n## Docs\n\n### Installing\n\n```bash\n$ npm install\n$ npm start # By default, templates will be created in `./dist` and HTML \u0026 CSS files in './templates' will be watched for changes.\n```\n\n\u003e Note: works well with node v10+. Earlier and later versions might also work.\n\n### Configuring\n\nTo make a basic email from existing templates, you only have to edit the `conf.json` file in each template.\n\nFor example, the dark template accepts the following:\n\n```json\n{\n  \"id\": \"\u003cwill-be-used-for-filename\u003e\",\n  \"signature\": \"\u003csignature-of-choice\u003e\",\n  \"name\": \"\u003cyour-name\u003e\",\n  \"contactMain\": \"\u003cphone-or-email-or-html\u003e\",\n  \"contactMail\": \"\u003cemail\u003e\",\n  \"slogan\": \"\u003ca-basic-slogan\u003e\",\n  \"logoUrl\": \"\u003c/assets/dark.png?\u003e\",\n  \"logoAlt\": \"\u003ctext-in-case-logo-is-blocked\u003e\",\n  \"website\": \"\u003chttp://dark.dk\u003e\"\n}\n```\n\n### Generating multiple emails from the same config (for your colleagues too!)\n\nTo generate multiple templates, use an array instead of an object in `conf.json`, like so:\n\n```json\n[{ ...conf1 }, { ...conf2 }]\n```\n\n### Using config values in HTML\n\nConfig variables are made available in all HTML files. \u003cbr/\u003e\nAdd any variable to the configuration file and use it in HTML like so:\n\n```html\n\u003cp\u003e\u003c!-- @echo yourCustomVariable --\u003e\u003c/p\u003e\n```\n\nWhere the configuration contains:\n\n```json\n{\n  \"yourCustomVariable\": \"Custom!\"\n}\n```\n\n\u003e NB: config variables also accept HTML. That's useful for including links.\n\n### Adding CSS \u0026 pre-processing\n\nAny number of CSS, SASS or LESS files in a template directory \u0026 they will be automatically processed \u0026 inlined into the files outputed in `./dist`.\n\n### Multiple emails in the same template\n\nTemplates can contain multiple HTML files from which to build emails. For example, the dark template has `signature.html` and `signature-reply.html`, which is a simpler version.\nEach HTML file will be treated as an email template, except for `*.inc.html`. See below ⬇️\n\n### Using partials (\\*.inc.html)\n\nBy naming files with `*.inc.html`, they become partials. Partials will not be treated as templates (ignored), but they can be included in any HTML template using the `@include` HTML comment.\n\n```html\n\u003csection\u003e\n\u003c!-- @include footer.inc.html --\u003e\n\u003c/section\n```\n\nPartials are useful if you have bits of HTML that repeat, like headers, footers, etc.\n\n### Advanced templating\n\nInside HTML files, any [preprocess directive](https://github.com/jsoverson/preprocess#all-directives) is supported, such as `@if`, `@extend`, `@exec`, etc.\n\n## Template structure (examples)\n\nThere are no rules regarding how to structure templates, but it's a good idea to create directories for a template group. \u003cbr/\u003e\nThere are 2 examples of template structures, one for the `light` email template and one for the `dark` one.\n\nHere's how the dark one is structured:\n\n```bash\n./templates\n├── dark\n    ├── assets\n        ├── dark.png              # Image to embed as base64\n    ├── conf.json                 # Template strings, logo, etc.\n    ├── dark.css                  # Stylesheet.\n    ├── footer.inc.html           # Contact info \u0026 logo\n    ├── head.inc.html             # 'Responsive' CSS goes here\n    ├── signature.html            # Full signature (loads head/footer)\n    ├── signature-reply.html      # Simplified signature (loads head)\n```\n\nHere's how the light one is structured:\n\n```bash\n./templates\n├── light\n    ├── assets\n        ├── light.png             # Image to embed as base64\n    ├── conf.json                 # Template strings, logo, etc.\n    ├── footer.inc.html           # Contact info \u0026 logo\n    ├── full-mail.html            # Body + signature\n    ├── head.inc.html             # 'Responsive' CSS goes here\n    ├── light.css                 # Stylesheet.\n    ├── signature.html            # Full signature (loads head/footer)\n    ├── signature-reply.html      # Simplified signature (loads head)\n```\n\nThere's one convention you have to keep in mind: `all files that you wish to include should follow the *.inc.html format`. The gulp task ignores `*.inc.html` files, but will try to process \u0026 create email templates from all `.html` files.\n\nYou are of course encouraged to change the default structure for your use case.\n\n## Overview of the build process\n\nThe diagram below shows what happens to your email templates.\nEach folder in 'templates' is considered a `template group`. A template file will be generated for each of the configuration objects you add have in the template group -\u003e `conf.js`.\n![Responsive HTML email template/signatures diagram](https://user-images.githubusercontent.com/1515742/45000195-35268300-afc3-11e8-82b4-7507430c48a0.png)\n\n## CSS Support\n\nRemember, it's HTML mails, so you need to check a big-ass table to find out nothing's gonna work.\nSee [this](https://www.campaignmonitor.com/css/) for more info. [Gulp-inline-css](https://www.npmjs.com/package/gulp-inline-css) is being used to convert whatever CSS you throw at it to inline styles, but it probably won't handle everything.\n\nSome bonuses of using `gulp-inline-css`: many css props will be converted to attributes. For example, the 'background-color' prop will be added as 'bgcolor' attribute to table elements.\nFor more details take a look at the [inline-css mappings](https://github.com/jonkemp/inline-css/blob/master/lib/setTableAttrs.js).\n\n## Usage with different email clients\n\n### Thunderbird\n\nThere 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.\n\n### Gmail\n\nGo to your mailbox settings \u0026 paste the generated signature.\n\n\u003e **NB**: Gmail doesn't seem to support inlined (base64) images. You have to use absolute `http(s)//...`.\n\n### Office 365 / outlook.live.com\n\nIt's a bit hacky to set up, but possible. See [this issue](https://github.com/danmindru/responsive-html-email-signature/issues/52).\n\n### Apple Mail / OS X (oh boy)\n\n#### Solution 1\n\n- Open Mail.app and go to `Mail` -\u003e `Preferences` -\u003e `Signatures`\n- Create a new signature and write some placeholder text (doesn't matter what it is, but you have to identify it later).\n- Close Mail.app.\n- Open terminal, then open the signature files using TextEdit (might be different for iCloud drive check the article below).\n\n```\n$ open -a TextEdit ~/Library/Mobile\\ Documents/com~apple~mail/Data/V3/MailData/Signatures/ubiquitous_*.mailsignature\n```\n\n- Keep the file with the placeholder open, close the other ones.\n- Replace the `\u003cbody\u003e...\u003c/body\u003e` and it's contents with the template of your choice. _Don't remove the meta information at the top!_\n- Open Mail.app and compose a new mail. Select the signature from the list to test it out.\n\n\u003e **NB**: Images won't appear in the signature preview, but will work fine when you compose a message.\n\n#### Solution 2\n\nYou 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 `\u003chtml\u003e` part or the `\u003cstyle\u003e` part that includes media queries. Follow the guide if you want it.\n\n#### Troubleshooting\n\nIf solution #1 doesn't work, you can repeat the steps and lock the signature files before you open Mail.app again.\nLock Files:\n\n```\n$ chflags uchg ~/Library/Mail/V3/MailData/Signatures/*.mailsignature\n```\n\nIf you want to do changes later, you have to unlock the files:\n\n```\n$ chflags nouchg ~/Library/Mail/V3/MailData/Signatures/*.mailsignature\n```\n\nIf you are using iCloud drive or having problems with it, you might also want to check [this article](http://matt.coneybeare.me/how-to-make-an-html-signature-in-apple-mail-for-el-capitan-os-x-10-dot-11/).\n\n### Outlook 2010 Client for Windows 7\n\n#### Solution 1\n\n- Open Outlook 2010 and go to `File \u003e Option \u003e Mail \u003e Signature`\n- Create new signature (with a placeholder for your convenience)\n- Open signature folder using CMD\n\n\u003e As the AppData folder is hidden, I'd recommend you to open it via CMD.\n\n```\ncd AppData\\Roaming\\Microsoft\nstart Signatures\n```\n\n- Within this folder, find a file named with your placeholder then right click this file and select edit.\n- Replace it with your HTML and save\n- Open Outlook again and check your signature\n\n#### Solution 2\n\nUnfortnately, Outlook 2010 client dosen't support HTML file import features for your email template. But you can add your own signatures by simple Copy and paste like **Solution 2** above.\n\n- Open built html file on `/dist` folder and Ctrl A + C\n- Open Outlook 2010 and go to `File \u003e Option \u003e Mail \u003e Signature`\n- Create new signature and paste copyed one\n\n\u003e **NB**: base 64 will not be shown on Outlook 2010 client. So, I recommend to use external url if you want to use images.\n\n## Other commands\n\n### `npm run test`\n\nRuns tests once.\n\n### `npm run once`\n\nCreates templates and exits; does not watch files.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgitcoinco%2Fsignatures","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgitcoinco%2Fsignatures","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgitcoinco%2Fsignatures/lists"}