{"id":13397437,"url":"https://github.com/leemunroe/grunt-email-workflow","last_synced_at":"2025-12-17T09:19:35.540Z","repository":{"id":16035143,"uuid":"18778957","full_name":"leemunroe/grunt-email-workflow","owner":"leemunroe","description":"A Grunt workflow for designing and testing responsive HTML email templates with SCSS.","archived":false,"fork":false,"pushed_at":"2024-05-02T16:46:22.000Z","size":1811,"stargazers_count":3046,"open_issues_count":6,"forks_count":339,"subscribers_count":93,"default_branch":"master","last_synced_at":"2024-10-29T17:58:06.211Z","etag":null,"topics":["css","email","grunt","litmus","mailgun","responsive","template","transactional-emails"],"latest_commit_sha":null,"homepage":"","language":"SCSS","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/leemunroe.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":"2014-04-14T22:23:47.000Z","updated_at":"2024-10-23T06:25:19.000Z","dependencies_parsed_at":"2023-01-11T20:24:23.631Z","dependency_job_id":"59cc362c-95a7-4ad3-b7af-e9d103d94d09","html_url":"https://github.com/leemunroe/grunt-email-workflow","commit_stats":{"total_commits":256,"total_committers":25,"mean_commits":10.24,"dds":0.484375,"last_synced_commit":"ebc83d5dcc28e5e21b2cd4e14d54cdf98e60c648"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leemunroe%2Fgrunt-email-workflow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leemunroe%2Fgrunt-email-workflow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leemunroe%2Fgrunt-email-workflow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leemunroe%2Fgrunt-email-workflow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leemunroe","download_url":"https://codeload.github.com/leemunroe/grunt-email-workflow/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248741202,"owners_count":21154255,"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":["css","email","grunt","litmus","mailgun","responsive","template","transactional-emails"],"created_at":"2024-07-30T18:01:23.712Z","updated_at":"2025-12-17T09:19:30.478Z","avatar_url":"https://github.com/leemunroe.png","language":"SCSS","funding_links":[],"categories":["CSS","SCSS","Frontend","Workflows","Templates"],"sub_categories":["HTML email","Misc"],"readme":"# Grunt Email Design Workflow\nby [github.com/leemunroe](https://github.com/leemunroe/grunt-email-workflow)\n\n## Changelog \n\n### v0.2.0 - 24/01/2024\n\n* update packages and dependencies for current node versions: nvm not needed\n* remove obsolete tasks and packages\n\n## Purpose\n\nDesigning and testing emails is a pain. HTML tables, inline CSS, various devices and clients to test, and varying support for the latest web standards.\n\nThis Grunt task helps simplify things.\n\n1. Compiles your SCSS to CSS\n2. Builds your HTML email templates\n3. Inlines your CSS\n\n## Requirements\n\nYou may already have these installed on your system. If not, you'll have to install them.\n\n* Node.js - [Install Node.js](https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager)\n* Grunt-cli and Grunt (`npm install grunt-cli -g`)\n\n## Getting started\n\nIf you haven't used [Grunt](http://gruntjs.com/) before check out Chris Coyier's post on [getting started with Grunt](http://24ways.org/2013/grunt-is-not-weird-and-hard/).\n\n#### 1. Setup\n\nClone this repo, cd to the directory, run `npm install` to install the necessary packages.\n\n```sh\ncd grunt-email-workflow\nnpm install\n```\n\nThe very first installation may take a while. Please wait patiently until completion.\n\n#### 2. Run Grunt\n\nRun `grunt build` and check out your `/dist` folder to see your compiled and inlined email templates.\nRun `grunt serve`, a new live-reload browser tab will open. Happy coding :)\n\n#### 3. Create secrets.json\n\nIf you're using [Mailgun](https://www.mailgun.com/) and/or [Amazon S3](https://aws.amazon.com/s3/) create a `secrets.json` file in your project root as outlined below under \"[Sensitive Information](#sensitive-information)\".\n\nIf you don't use or need these services **it's ok to skip this step**.\n\n### Sensitive information\n\nWe encourage you __not__ to store sensitive data in your git repository. If you must, please look into [git-encrypt](https://github.com/shadowhand/git-encrypt) or some other method of encrypting your configuration secrets.\n\n1. Create a file `secrets.json` in your project root.\n2. Paste the following sample code in `secrets.json` and enter the appropriate credentials for the services you want to connect with.\n\n```json\n{\n  \"mailgun\": {\n    \"api_key\": \"YOUR MG PRIVATE API KEY\",\n    \"domain\": \"YOURDOMAIN.COM\",\n    \"sender\": \"E.G. POSTMASTER@YOURDOMAIN.COM\",\n    \"recipient\": \"WHO YOU WANT TO SEND THE EMAIL TO\"\n  },\n  \"s3\": {\n    \"key\": \"AMAZON S3 KEY\",\n    \"secret\": \"AMAZON S3 SECRET\",\n    \"region\": \"AMAZON S3 REGION\",\n    \"bucketname\": \"AMAZON S3 BUCKET NAME\",\n    \"bucketdir\": \"AMAZON S3 BUCKET SUBDIRECTORY (optional)\",\n    \"bucketuri\": \"AMAZON S3 PATH (ex: https://s3.amazonaws.com/)\"\n  }\n}\n```\n\nAfter this you should be good to go. Run `grunt build` and your email templates should appear automagically in a `/dist` folder.\n\n## How it works\n\n### CSS\n\nThis project uses [SCSS](http://sass-lang.com/). You don't need to touch the .css files, these are compiled automatically.\n\nFor changes to CSS, modify the `.scss` files.\n\nMedia queries and responsive styles are in a separate style sheet so that they don't get inlined. Note that only a few clients support media queries e.g. iOS Mail app.\n\n### Email templates and content\n\nHandlebars and Assemble are used for templating.\n\n`/layouts` contains the standard header/footer HTML wrapper markup. You most likely will only need one layout template, but you can have as many as you like.\n\n`/emails` is where your email content will go. To start you off I've included example transactional emails based on my [simple HTML email template](https://github.com/leemunroe/html-email-template).\n\n`/data` contains _optional_ .yml or .json data files that can be used in your templates. It's a good way to store commonly used strings and variables. See `/data/default.yml` and `/partials/follow_lee.hbs` for an example.\n\n`/partials` contains _optional_ .hbs files that can be thought of like includes. To use a partial, for example `/partials/follow_lee.hbs` you would use the following code in your emails template:\n\n```hbs\n{{\u003e follow_lee }}\n```\n\n`/partials/components` contains _optional_ .hbs files that can help generate your markup. Each component will typically have a corresponding Sass file in `src/css/sass/\u003ccomponent_name\u003e.scss`. To use a component, for example `/partials/components/button.hbs` you would use the following code in your emails template. _(note: You can use single -or- double quotes for attributes)_\n\n```hbs\n{{\u003e button type=\"primary\" align=\"center\" url=\"LINK GOES HERE\" title=\"ANCHOR TEXT GOES HERE\" }}\n```\n\n### Generate your email templates\n\nIn terminal, run `grunt build`. This will:\n\n* Compile your SCSS to CSS\n* Generate your email layout and content\n* Inline your CSS\n\nSee the output HTML in the `dist` folder. Open them and preview it the browser.\n\nAlternatively run `grunt serve`. This will check for any changes you make to your .scss and .hbs templates, automatically run the tasks, and serve you a preview in the browser on [http://localhost:4000](http://localhost:4000). Saves you having to run grunt every time you make a change.\n\n### Browser-based previews\n\nIn terminal, run `grunt serve`.\n\n* This will run the default tasks `grunt` + the `watch` task will be initiated\n* A preview UI will automagically open on [http://localhost:4000](http://localhost:4000) and you can review your templates\n* Go about your business editing templates and see your template changes live-reload\n* __NOTE:__ The express server stops working when the `watch` task is not running\n\n\u003cimg width=\"1437\" alt=\"image\" src=\"https://github.com/leemunroe/grunt-email-workflow/assets/15963/22c749be-05f6-4dea-8076-af1376dd6a17\"\u003e\n\n\n### Sample email templates\n\nI've added a few templates here to help you get started.\n\n* [Simple transactional email template](http://leemunroe.github.io/grunt-email-workflow/dist/transaction.html)\n* [Branded email via CDN](http://leemunroe.github.io/grunt-email-workflow/dist/branded.html)\n* [Email with components](http://leemunroe.github.io/grunt-email-workflow/dist/components.html)\n\n### More resources\n\n* For more transactional email templates check out [HTML Email templates](https://htmlemail.io)\n* [Things I've learned about sending email](http://www.leemunroe.com/sending-email-designers-developers/)\n* [Things I've learned about building email templates](http://www.leemunroe.com/building-html-email/)\n* [Things I've learned about responsive email](https://www.leemunroe.com/responsive-email-design/)\n* Prefer Gulp? Daryll Doyle has created a [Gulp email creator](https://github.com/darylldoyle/Gulp-Email-Creator)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleemunroe%2Fgrunt-email-workflow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleemunroe%2Fgrunt-email-workflow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleemunroe%2Fgrunt-email-workflow/lists"}