{"id":13693352,"url":"https://github.com/Logicify/mautic-theme-skeleton","last_synced_at":"2025-05-02T21:31:55.130Z","repository":{"id":68103562,"uuid":"158459327","full_name":"Logicify/mautic-theme-skeleton","owner":"Logicify","description":"A skeleton for the Mautic theme with configured SCSS compiler, css inliner and html minifier","archived":false,"fork":false,"pushed_at":"2019-02-08T16:17:08.000Z","size":239,"stargazers_count":29,"open_issues_count":1,"forks_count":12,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-31T12:36:40.736Z","etag":null,"topics":["boilerplate","css-inlining","email","heml","mautic","mautic-theme","skeleton"],"latest_commit_sha":null,"homepage":"https://logicify.com/?utm_source=github\u0026utm_campaign=mautic-theme-skeleton\u0026utm_medium=opensource","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/Logicify.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":"2018-11-20T22:28:22.000Z","updated_at":"2024-10-29T01:18:26.000Z","dependencies_parsed_at":"2023-04-08T03:54:57.398Z","dependency_job_id":null,"html_url":"https://github.com/Logicify/mautic-theme-skeleton","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Logicify%2Fmautic-theme-skeleton","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Logicify%2Fmautic-theme-skeleton/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Logicify%2Fmautic-theme-skeleton/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Logicify%2Fmautic-theme-skeleton/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Logicify","download_url":"https://codeload.github.com/Logicify/mautic-theme-skeleton/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252108912,"owners_count":21696157,"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":["boilerplate","css-inlining","email","heml","mautic","mautic-theme","skeleton"],"created_at":"2024-08-02T17:01:08.753Z","updated_at":"2025-05-02T21:31:55.123Z","avatar_url":"https://github.com/Logicify.png","language":"JavaScript","funding_links":[],"categories":["Themes"],"sub_categories":[],"readme":"# Mautic Theme Skeleton\n\nA skeleton for the Mautic theme with configured SCSS compiler, css inliner and html minifier.\n\nThis repository might be used as good start for configuring theme development process as well as a tool for building \nmore complicated pieces of emails (something which is hard to develop in Mautic's content editor).\n\nIt incorporates a bunch of standard tools like (pre-processor, css compressor, css inliner, etc) into building pipeline\nwhich makes email layouting less painful (just a bit though ;)).\n\nCurrently it supports \u003cu\u003ee-mail themes only\u003c/u\u003e.\n\nYou might also want to check [Advanced Templates Bundle](https://github.com/Logicify/mautic-advanced-templates-bundle) which greately extends e-mail building capabilities.\n\n## Features\n\n* **SCSS compiler** - you can use powerful [SCSS syntax](https://sass-lang.com/) and mixins\n* **HEML** - a tool for building responsive emails. It also does a great job on embedding CSS\\SCSS into html so you can \n  keep styles in separate files and forget about copy-and-paste approach. Check out [official site](https://heml.io/) for\n  more information about HEML features and syntax. \n* **Minifier** - does compression of the resulting html files to optimize final email size.\n* Allows to compile ready to upload Mautic theme. You can simply upload `zip` file via web interface.\n* Allows to work on email content\\snippets which are not a part of your theme leveraging all power of heml and scss. \n* Designed to support generation of multiple themes basing on the same source code base.\n* Easy deployment for development purposes. Compiled theme could be automatically copied to corresponding mautic \n  folder so you can check result immediately.\n* Automatic rebuild (watch) - no need to run compilation after each change. Script monitors changes to the source \n  code and re-compiles automatically.\n\n## Requirements \n\nThe only requirement for the workstation is installed NodeJS. If you haven't it yet consult with \n[official site](https://nodejs.org/en/) on installation instructions.\n\nIt is also assumed you already have an instance of [Mautic](https://www.mautic.org/) configured and deployed either locally (preferred) or on \nsome remote machine.\n\n## Getting ready to work\n\n1. Download or fork/clone this repository\n1. Open terminal and navigate to the project directory.\n  **NOTE**: Keep project's folder **outside** of your Mautic folder.\n1. Run `npm install` to download all dependencies \n1. **Optional** Open `package.json` and set property `mautic.mauticBasePath` to point location of the root of your Mautic \n  installation. This might be a relative path as well as absolute. You may skip this step, however automatic deployment\n   and automatic rebuild features will not work in this case. \n1. You may also want to familiarize yourself with Mautic themes building basics. Check out [this official guide](https://www.mautic.org/building-a-theme-step-by-step/).\n\n## Usage\n\nPlease note, this repository doesn't contain any ready to use theme. It is just a bootstrap project (skeleton) for \nbuilding your own. We will check a few typical usage scenarios. \n\nPlease complete all steps from the **Getting ready to work** section prior starting any further activities described \nbelow. \n\n### Creating own email template\n\n1. Edit section `mautic.themes` of the `package.json` file:\n    * Set `name` to something without spaces and special characters. It will be used to name files and folders. \n    * Update `verboseName`. This is what you will see in the list of available themes in Moutic.    \n2. Edit file `src/config.json` file:\n    * Leave `name` empty\n    * Update `author` and `authorUrl` fields\n3. Feel you free to update files under `src/assets` and `src/heml` folders.\n4. Build your theme with `npm run package`. Output should appear under `build/themes` directory.\n\n### Building code snippets\n\nIf you liked this toolchain during theme creating you might be interested if it is possible to use the same for \ndesigning emails content which is not a part of the theme itself. \n\nYes, it is possible with `compile` command:\n\n1. Create a file for your code snippet under `src/emails` folder.\n    **NOTE**: Make sure to use `.heml` as an extension. E.g. `welcome-email.heml`\n2. Put your heml here, include css in needed.\n3. Run `npm run compile -- --email FILE_NAME_WITHOUT_EXTENSION`. E.g. `npm run compile -- --email welcome-email`\n    **NOTE**: Notice no file extension here.\n4. Find your compiled snipet under `build/emails`. You can just copy the code and paste it in the Moutic's editor.    \n\n### Maintaining multiple themes\n\nIn terms of Mautic theme provides just one single email template. However it is highly likely you need a couple of \nlayouts with similar but slightly different look and feel. In that case you will need to create a few themes.\n\nThe problem here is obvious - if you copy this repository a few times you will need to support multiple code bases \nand also common part (e.g. styles, colors) will be cloned as well so you will need to incorporate changes\\fixes in \ncouple of places. \n\nIn order to avoid this mess this tool allows you to build multiple Mautic themes from the unite code base. In this \nexample we will create 2 themes: `my-theme-1` and `my-theme-2`:\n\n1. Edit section `mautic.themes` of the `package.json` file:\n  ```json\n  \"themes\": [\n    {\n      \"name\": \"my-theme-1\",\n      \"verboseName\": \"My Theme 1\",\n      \"emailTemplateFile\": \"email.my-theme-1.heml.twig\"\n    },\n    {\n      \"name\": \"my-theme-2\",\n      \"verboseName\": \"My Theme 2\",\n      \"emailTemplateFile\": \"email.my-theme-2.heml.twig\"\n    }\n  ]\n  ```\n  **IMPORTANT**: Name of the file should be in the format \"email.**your-theme**.heml.twig\" you are allowed to \nchange bold part only. It is very important to follow this convention!\n2. Copy `src/heml/email.deafult.heml.twig` two times to create `email.my-theme-1.heml.twig` and `email.my-theme-2\n  .heml.twig`\n3. Make content of those files slightly different to make sure we will compile 2 separate themes.\n4. Run `npm run package` to compile both. You should get 2 zip files under `built\\themes`.\n\n### All CLI features (available commands)\n\n| Command     | Description                              | Example                                  |\n| ----------- | ---------------------------------------- | ---------------------------------------- |\n| **build**   | Compiles all theme sources and writes result under `build\\themes`. \u003cbr /\u003eEach theme will be in the separate folder. | `npm run build`                          |\n| **package** | Compiles build and prepares ZIP archive (supported by Mautic) for each theme. | `npm run package`                        |\n| **deploy**  | Builds themes and copies them to local Mautic directory.\u003cbr /\u003eThis requires setting `mautic.mauticBasePath` to be set in `package.json`. | `npm run deploy`                         |\n| **watch**   | Does automatic deploy each time you save any source code. Might be useful during development. | `npm run watch`                          |\n| **compile** | Compiles one single code snippet. Requires `--email` argument. See section [Building code snippets](#building-code-snippets) for details.\u003cbr /\u003eAlso please notice **extra** `--` in this command. | `npm run compile -- --email welcome-email` |\n\n## Credits\n\nDmitry Berezovsky, Logicify ([http://logicify.com/](https://logicify.com/?utm_source=github\u0026utm_campaign=mautic-theme-skeleton\u0026utm_medium=opensource))\n\n## License\n\nThis repository is licensed under MIT. This means you are free to use it even in commercial projects.\n\nPlease also keep in mind, the MIT license clearly explains that there is no warranty for this free software. \nPlease see the included [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLogicify%2Fmautic-theme-skeleton","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLogicify%2Fmautic-theme-skeleton","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLogicify%2Fmautic-theme-skeleton/lists"}