{"id":16235824,"url":"https://github.com/lukethacoder/gulp-email-template-builder","last_synced_at":"2025-04-08T08:25:03.109Z","repository":{"id":103652623,"uuid":"298715076","full_name":"lukethacoder/gulp-email-template-builder","owner":"lukethacoder","description":"🏭 A small html templating engine built to make building email templates more enjoyable.","archived":false,"fork":false,"pushed_at":"2020-09-26T02:03:52.000Z","size":83,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-14T05:25:37.620Z","etag":null,"topics":["email-template","email-template-builder","gulp","posthtml"],"latest_commit_sha":null,"homepage":"","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/lukethacoder.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":"2020-09-26T01:38:04.000Z","updated_at":"2025-01-28T11:27:12.000Z","dependencies_parsed_at":"2023-04-27T17:31:27.897Z","dependency_job_id":null,"html_url":"https://github.com/lukethacoder/gulp-email-template-builder","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukethacoder%2Fgulp-email-template-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukethacoder%2Fgulp-email-template-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukethacoder%2Fgulp-email-template-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukethacoder%2Fgulp-email-template-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lukethacoder","download_url":"https://codeload.github.com/lukethacoder/gulp-email-template-builder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247802599,"owners_count":20998615,"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":["email-template","email-template-builder","gulp","posthtml"],"created_at":"2024-10-10T13:27:43.020Z","updated_at":"2025-04-08T08:25:03.097Z","avatar_url":"https://github.com/lukethacoder.png","language":"HTML","readme":"# 🏭 Gulp Email Template Builder\n\nA small html templating engine built to make building email templates more enjoyable.\n\nThe purpose of this small engine is to \"componentise\" html blocks and allow you to build reusable HTML components to be used by a suite of email templates.\n\nUnder to hood we're using [Gulp](https://gulpjs.com/), [PostHTML](https://posthtml.org/) (with [posthtml-include](https://github.com/posthtml/posthtml-include)) and [BrowserSync](https://browsersync.io/).\n\n\u003e Any css added to `style.css` will be pulled inline when compiled\n\n## 🔥 Features\n\n- HTML Components\n- BrowserSync/Hot Reload\n- CSS Inlining\n\n## 🚀 Getting started\n\n```bash\nyarn\n# or npm i\n\nyarn dev\n# or npm run dev\n```\n\n\u003e NOTE: make sure you have the [Gulp cli](https://gulpjs.com/) installed.\n\n\n## 🦕 Example\n\nIncluded in the src folder is an example setup. All `blocks` are in a separate folder and are being referenced by the `index.html` file.\n\n```html\n\u003ctable width=\"650\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" class=\"mobile-shell\"\u003e\n  \u003ctr\u003e\n    \u003ctd class=\"td\" style=\"width: 650px; min-width: 650px; font-size: 0pt; line-height: 0pt; padding: 0; margin: 0; font-weight: normal\"\u003e\n      \u003c!-- The include markup is where the magic happens --\u003e\n      \u003cinclude src=\"blocks/header.html\"\u003e\u003c/include\u003e\n      \u003cinclude src=\"blocks/feature-one.html\"\u003e\u003c/include\u003e\n      \u003c!-- include more blocks here --\u003e\n      \u003cinclude src=\"blocks/footer.html\"\u003e\u003c/include\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n```\n\n### Pass Props to Blocks\n\nTo pass props use the `locals` props on the `\u003cinclude/\u003e`, then on the child, use `{{ VARIABLE_NAME }}`.\n\n```html\n\u003c!-- Parent Component --\u003e\n\u003ctable width=\"650\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" class=\"mobile-shell\"\u003e\n  \u003ctr\u003e\n    \u003ctd class=\"td\" style=\"width: 650px; min-width: 650px; font-size: 0pt; line-height: 0pt; padding: 0; margin: 0; font-weight: normal\"\u003e\n      \u003c!-- The include markup is where the magic happens --\u003e\n      \u003cinclude src=\"blocks/header.html\"\u003e\u003c/include\u003e\n      \u003cinclude\n        src=\"blocks/feature-one.html\"\n        locals='{ \"primaryColor\": \"#1e52bd\", \"secondaryColor\": \"#e85711\"}'\n      \u003e\u003c/include\u003e\n      \u003c!-- include more blocks here --\u003e\n      \u003cinclude src=\"blocks/footer.html\"\u003e\u003c/include\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- Child Component --\u003e\n\u003ctable width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"\u003e\n  \u003ctr\u003e\n    \u003ctd style=\"color:{{ primaryColor }};\"\u003e\n      \u003cmultiline\u003ePrimary Color Goes Here\u003c/multiline\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd style=\"color:{{ secondaryColor }};\"\u003e\n      \u003cmultiline\u003eSecondary Color Goes Here\u003c/multiline\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n```\n\n## 📝 License\n\nLicensed under the [MIT License](./LICENSE).","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukethacoder%2Fgulp-email-template-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flukethacoder%2Fgulp-email-template-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukethacoder%2Fgulp-email-template-builder/lists"}