cahouete

⚠️ THIS REPOSITORY IS NOT MAINTAINED ANYMORE ⚠️

Cahouète

Writing email templates is now so much fun.

Based on:

• mjml
• nunjucks
• gulp

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.