{"id":15754709,"url":"https://github.com/tylerapfledderer/shopping-email-invoice","last_synced_at":"2025-03-31T08:13:20.999Z","repository":{"id":104172170,"uuid":"443453655","full_name":"TylerAPfledderer/shopping-email-invoice","owner":"TylerAPfledderer","description":"Design-to-code Wayfair Order Invoice Email","archived":false,"fork":false,"pushed_at":"2022-01-07T21:15:36.000Z","size":1140,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-02-06T12:27:47.352Z","etag":null,"topics":["css","email","html","mjml"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TylerAPfledderer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2022-01-01T01:47:07.000Z","updated_at":"2023-03-08T19:34:06.000Z","dependencies_parsed_at":"2023-06-19T10:50:44.819Z","dependency_job_id":null,"html_url":"https://github.com/TylerAPfledderer/shopping-email-invoice","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/TylerAPfledderer%2Fshopping-email-invoice","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TylerAPfledderer%2Fshopping-email-invoice/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TylerAPfledderer%2Fshopping-email-invoice/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TylerAPfledderer%2Fshopping-email-invoice/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TylerAPfledderer","download_url":"https://codeload.github.com/TylerAPfledderer/shopping-email-invoice/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246436382,"owners_count":20776995,"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","html","mjml"],"created_at":"2024-10-04T08:04:28.593Z","updated_at":"2025-03-31T08:13:20.982Z","avatar_url":"https://github.com/TylerAPfledderer.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Wayfair Product Order Invoice Email\n\n![Preview Screenshot of the Project](screenshot.png)\nDesign-to-code responsive html email using a design from the site [UI Design Daily](https://www.uidesigndaily.com).\n\n---\n\nThis project uses the [MJML](https://mjml.io) pre-processing markup language.\n\n## Observations\n\nThis is the second project covering an email, and the first to explore the use of the `MJML` pre-processing markup.\n\nBased on the provided markup, the images with pricing under \"Discover More Products\" were not given as a single image, so I had to recreating the masking to export all the layers in each group (including the grey rounded border) as a single image as email clients are not too consistent with handling background images with an off-positioned small piece of text, and most marketing emails with pricing usually provide images that include the price instead of layering.\n\nThis design is also given a desktop layout, so with the power of `MJML`, I was able to ensure it became responsive for any device, and was not concerned with needing more control of vanill HTML markup. Some sections didn't need to go from two columns to one (i.e the Details of the products purchased), so the `mj-group` component came in handy.\n\n_This email was able to be tested with Gmail in Firefox, Gmail for Android, Outlook for Windows_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftylerapfledderer%2Fshopping-email-invoice","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftylerapfledderer%2Fshopping-email-invoice","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftylerapfledderer%2Fshopping-email-invoice/lists"}