{"id":13433034,"url":"https://github.com/danmindru/responsive-html-email-signature","last_synced_at":"2025-04-11T20:38:27.446Z","repository":{"id":25697111,"uuid":"29133415","full_name":"danmindru/responsive-html-email-signature","owner":"danmindru","description":"✨ Template generator for (responsive) emails \u0026 email signatures ","archived":false,"fork":false,"pushed_at":"2024-08-02T18:12:10.000Z","size":3528,"stargazers_count":856,"open_issues_count":14,"forks_count":246,"subscribers_count":37,"default_branch":"master","last_synced_at":"2025-04-11T02:18:33.814Z","etag":null,"topics":["automation","css","email","email-signature","email-signatures","html","inline-styles","responsive","responsive-email","sass","watches-html"],"latest_commit_sha":null,"homepage":"https://responsive-html-email-signature-generator.com","language":"HTML","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/danmindru.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-01-12T11:58:30.000Z","updated_at":"2025-03-25T14:09:15.000Z","dependencies_parsed_at":"2024-04-23T05:31:34.572Z","dependency_job_id":"23b953a3-53bf-4610-8bb8-c570a464c07f","html_url":"https://github.com/danmindru/responsive-html-email-signature","commit_stats":{"total_commits":251,"total_committers":17,"mean_commits":"14.764705882352942","dds":0.3027888446215139,"last_synced_commit":"c63ffd62389b5d2446748e65823c38169c93449a"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danmindru%2Fresponsive-html-email-signature","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danmindru%2Fresponsive-html-email-signature/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danmindru%2Fresponsive-html-email-signature/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danmindru%2Fresponsive-html-email-signature/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danmindru","download_url":"https://codeload.github.com/danmindru/responsive-html-email-signature/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248478063,"owners_count":21110629,"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":["automation","css","email","email-signature","email-signatures","html","inline-styles","responsive","responsive-email","sass","watches-html"],"created_at":"2024-07-31T02:01:20.078Z","updated_at":"2025-04-11T20:38:27.422Z","avatar_url":"https://github.com/danmindru.png","language":"HTML","funding_links":[],"categories":["HTML","🤖 AI \u0026 Machine Learning"],"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\u003e ####  🪄  Building templates can be automated in S3 - [get started here](#automate-signature-creation).\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] adds 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- [x] allows automatic build \u0026 deployment of templates to S3\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## Building a website or blog?\nUse [Shipixen](https://shipixen.com) to generate a customized boilerplate with your branding, pages and blog - then deploy with 1 click or download a zip!\n\n| | |\n| :- | :- |\n| \u003ca href=\"https://shipixen.com\" target=\"_blank\"\u003e\u003cimg height=\"60px\" src=\"https://user-images.githubusercontent.com/1515742/281071510-d5c0095d-d336-4857-ad80-d18cf65f4acb.png\" alt=\"Shipixen Logo\" /\u003e\u003c/a\u003e \u003cbr/\u003e \u003cb\u003eShipixen\u003c/b\u003e \u003cbr/\u003e Create a blog \u0026 landing page in minutes. \u003cbr/\u003e \u003ca href=\"https://shipixen.com\"\u003eshipixen.com\u003c/a\u003e | \u003ca href=\"https://shipixen.com\" target=\"_blank\"\u003e\u003cimg width=\"300px\" src=\"https://user-images.githubusercontent.com/1515742/281077548-57b24773-3c2a-4e89-b088-cc3945d7037b.png\" alt=\"Shipixen Logo\" /\u003e\u003c/a\u003e |\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: tested with node versions `12-17`. 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 outputted 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## Automate Signature Creation\n\nUse the Github Actions Workflow to automatically generate and store your signature in a cloud storage (e.g. S3 Bucket). [See sample Github action](https://github.com/danmindru/responsive-html-email-signature/blob/master/.github/workflows/generate-email-signature.yml).\n\n1) Create the bucket to store the signature using [AWS CLI](https://aws.amazon.com/cli/):\n\n   `aws s3 mb s3://\u003cBUCKET_NAME\u003e`\n\n   \u003e *where BUCKET_NAME is the unique name of your s3 bucket*\n\n2) Deploy the role with permission to upload signature into your accounts S3 Bucket\n\n   `aws cloudformation deploy --template-file cicd/github_generate_email_role.yaml --stack-name githubOidcGenerateEmail --capabilities CAPABILITY_NAMED_IAM`\n\n   \u003e *details on [Github's OIDC with AWS](https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/configuring-openid-connect-in-amazon-web-services)*\n\n3) Populate the secret values `AWS_REGION`, `EMAIL_ADDRESS`, `MOBILE_PHONE_COUNTRY_CODE`, `BUCKET_NAME`, `MOBILE_PHONE_NUMBER`,  and `GH_GENERATE_EMAIL_ROLE` in [the repo's settings tab](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository).\n\n4) Trigger the [`generate-email-signature`](./.github/workflows/generate-email-signature.yml) workflow via [manual dispatch](https://github.blog/changelog/2020-07-06-github-actions-manual-triggers-with-workflow_dispatch/)\n\n5) Congrats! 🥳 Your signature has been uploaded. You can now download it from your S3 Bucket.\n\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\nUnfortunately, Outlook 2010 client doesn'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\n-----------------\n\n\u003ca href=\"https://apihustle.com\" target=\"_blank\"\u003e\n  \u003cimg height=\"60px\" src=\"https://user-images.githubusercontent.com/1515742/215217833-c07183d2-f688-4d1c-86ea-329f3b28f81c.svg\" alt=\"Apihustle Logo\" /\u003e\n\u003c/a\u003e\n\nCheck out the Apihustle suite for more great tools. \u003cbr/\u003e\n[apihustle.com](https://apihustle.com) \u003cbr/\u003e\n\n-----------------\n\nSave 10s of hours of work by using Shipixen to generate a customized codebases with your branding, pages and blog \u003cbr/\u003e\n― then deploy it to Vercel with 1 click.\n\n| | |\n| :- | :- |\n| \u003ca href=\"https://shipixen.com\" target=\"_blank\"\u003e\u003cimg height=\"60px\" src=\"https://user-images.githubusercontent.com/1515742/281071510-d5c0095d-d336-4857-ad80-d18cf65f4acb.png\" alt=\"Shipixen Logo\" /\u003e\u003c/a\u003e \u003cbr/\u003e \u003cb\u003eShipixen\u003c/b\u003e \u003cbr/\u003e Create a blog \u0026 landing page in minutes with \u003cb\u003eShipixen\u003c/b\u003e. \u003cbr/\u003e Try the app on \u003ca href=\"https://shipixen.com\"\u003eshipixen.com\u003c/a\u003e. | \u003ca href=\"https://shipixen.com\" target=\"_blank\"\u003e\u003cimg width=\"300px\" src=\"https://user-images.githubusercontent.com/1515742/281077548-57b24773-3c2a-4e89-b088-cc3945d7037b.png\" alt=\"Shipixen Logo\" /\u003e\u003c/a\u003e |\n\n-----------------\n\n|    |    |    |    |\n| :- | :- | :- | :- |\n| \u003ca href=\"https://shipixen.com\" target=\"_blank\"\u003e\u003cimg height=\"70px\" src=\"https://github.com/apihustle/apihustle/assets/1515742/3af97560-d774-4149-96c5-65d3cc530a5a\" alt=\"Shipixen Logo\" /\u003e\u003c/a\u003e | **Shipixen** | Create a personalized blog \u0026 landing page in minutes | [shipixen.com](https://shipixen.com) | \n| \u003ca href=\"https://pageui.dev\" target=\"_blank\"\u003e\u003cimg height=\"70px\" src=\"https://github.com/apihustle/apihustle/assets/1515742/953cc5ab-bbf4-4a19-9b16-c74d218b63b4\" alt=\"Page UI Logo\" /\u003e\u003c/a\u003e | **Page UI** | Landing page UI components for React \u0026 Next.js | [pageui.dev](https://pageui.dev) | \n| \u003ca href=\"https://clobbr.app\" target=\"_blank\"\u003e\u003cimg height=\"70px\" src=\"https://github.com/apihustle/apihustle/assets/1515742/50c11d46-a025-40fd-b154-0a5984556f6e\" alt=\"Clobbr Logo\" /\u003e\u003c/a\u003e | **Clobbr** | Load test your API endpoints. | [clobbr.app](https://clobbr.app) | \n| \u003ca href=\"https://crontap.com\" target=\"_blank\"\u003e\u003cimg height=\"70px\" src=\"https://github.com/apihustle/apihustle/assets/1515742/fe1aac71-b663-4f8e-a225-0c47b2eee14d\" alt=\"Crontap Logo\" /\u003e\u003c/a\u003e | **Crontap** | Schedule API calls using cron syntax. | [crontap.com](https://crontap.com) | \n| \u003ca href=\"https://tool.crontap.com\" target=\"_blank\"\u003e\u003cimg height=\"70px\" src=\"https://github.com/apihustle/apihustle/assets/1515742/713ff923-b03c-43ec-9cfd-75e542d0f5c4\" alt=\"CronTool Logo\" /\u003e\u003c/a\u003e | **CronTool** | Debug multiple cron expressions on a calendar. | [tool.crontap.com](https://tool.crontap.com)  |\n\n-----------------\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanmindru%2Fresponsive-html-email-signature","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanmindru%2Fresponsive-html-email-signature","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanmindru%2Fresponsive-html-email-signature/lists"}