Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/voidlabs/htmml
A markup language extending HTML to enable templating specifically designed for email (supports conditional comments)
https://github.com/voidlabs/htmml
Last synced: about 4 hours ago
JSON representation
A markup language extending HTML to enable templating specifically designed for email (supports conditional comments)
- Host: GitHub
- URL: https://github.com/voidlabs/htmml
- Owner: voidlabs
- License: mit
- Created: 2018-02-28T12:10:57.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-05-18T14:40:01.000Z (over 2 years ago)
- Last Synced: 2024-11-16T07:36:56.782Z (3 days ago)
- Language: JavaScript
- Size: 19.5 KB
- Stars: 5
- Watchers: 5
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# HTMML template language for HTML email
HTMML is a very simple template language we use to make it easier to write mosaico master templates. Given the master template language uses a lot of inline styles, you end up writing a lot of repeating HTML code.
HTMML processing does this:
- Looks for `````` tags, run the selector as a CSS/jQuery selector to find matching tags in the HTML and add the other attributes to those tags.
```
hello
```
will be translated to
```
hello
```
It's like CSS inlining, but applied to HTML elements and HTML attributes!
- `````` the template-def tag contains template definitions and will be removed once template have been processed.
- `````` the template tag defines a new template that will be applied whenever the given tag is found in the html. Each `````` tag contains zero, one or more `````` tags and one `````` tag. The `````` tags define attributes supported by the template. Their ```selector=""``` attributes define which tags inside the `````` section will be altered when this attribute is declared for this template. The rest of the `````` attributes will be added to the matched tags. A special ```{{attributename}}``` is available in the attributes defined to use the value of the attribute from the template caller.
An example, when this template is defined
```
{{replacedcontent}}
```
The following code
```
some content
```
will be translated to
```
some content
```
- Custom tags (and their templates) can be nested as long as ```{{replacedcontent}}``` is used in their `````` definition.
- Not every `````` attribute is handled in the same way
- ```style``` or ```addStyle``` attributes will ADD the defined style to the style declaration of the matched tag, instead of replacing it.
- ```class``` attribute will ADD new classes to the classes defined in the matched tag, instead of replacing it.
- ```addAttributeName``` and ```addAttributeValue``` are special attributes that can be used to add dynamically defined attributes to the matched tags.
- A `````` tag is available and will simply repeat the content according to the arguments. Any html attribute found in the repeater will be read, splitted by comma (```,```) and will be available as a ```{{variable}}``` in the content of the repeater, so:
```
{{var2}}
```
will be translated to
```
10
20
30
```
- Last thing: HTMML does someting tricky in order to deal with your conditional comments contents. Outlook conditional comments are often needed in email HTML code and this makes you write HTML code in special HTML comments. Being comments it is not really considered HTML by anyone but Outlook. But we want to do our HTMML stuff also on conditional comments contents, so HTMML will "unescape" them to bring them to HTML, then apply its own template rules/logic, and then bring back them to comments. The tags found inside comments will be prefixed by "CC-" before being extracted and they never create nesting, so:
```
my content
```
Will be temporarily translated to
```
my content
```
The def rules will be applied on this new "template" and then a reverse process is applied to bring back them to their original "conditional comment" form.
So the `````` won't be applied, because in the "replaced" form the p is not INSIDE the cc-table because conditional comments do not create nesting levels.
So, given that template and this tag:
```
```
the result of HTMML translation will be
```
my content
```
You see the style have been applied to the table, even if it was in a comment.
### Done
The "HTMML" specification is complete. They are 200 lines of code and this matched my templating needs better than existing HTML template language.
### HTMML users
We developed HTMML in order to improve maintenance of our [Mosaico Versafix-1 master template](https://github.com/voidlabs/versafix-template)