Skip to content
Writing email templates is now so much fun.
HTML JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs/__files__
src
.babelrc
.gitignore
README.md
gulpfile.babel.js
package-lock.json
package.json

README.md

Cahouète

Writing email templates is now so much fun.

Based on:

To correctly understand this framework, you should first know mjml and nunjucks.

The idea behind this framework is that even if mjml is an amazing one, it doesn't have macro/components feature and doesn't give you a structure for your files.

Install

Download the version wanted and:

$ npm install

Usage

Development

$ npm run start

Distribution

$ npm run build

Docs

Architecture

src/
├── components // where your components (or macro) are placed
│   └── Generic
│       ├── index.css
│       └── index.njk
├── fonts
│   └── open-sans.njk
├── layouts
│   ├── default.css
│   └── default.mjml.njk
├── pages // each folder is a page
│   └── Sample
│       ├── index.css
│       └── index.mjml.njk
└── styles // common styles
    └── attributes.njk

Results are done in /dist and temporary files for debug (nunjucks compiled result in mjml templates) are in __build__.

Components

If you want to make a component:

  • create a folder into /components
  • create two files called index(.mjml).njk and index.css // .mjml here is needed only to explain your component will also have mjml components, not only html
  • add default index.njk code: two functions (style and render)
{% macro style() %}
{% include "./index.css" %}
{% endmacro %}

{% macro
  render(
    prop=""
  )
%}
{{ prop }}
{% endmacro %}
  • Be sure to add it into the layout:

at the top of your layout:

{% import componentsDir + "/:Component:/index.njk" as :Component: %}

and in <mj-head>:

<mj-head>
  {{ Component.style() }}
</mj-head>

Styles

Styles are in *.css and code should be wrapped by:

<mj-style inline="inline">
</mj-style>

to be understood by mjml.

Default styles for mjml components are in styles/attributes.njk.

You can’t perform that action at this time.