Writing email templates is now so much fun.
Switch branches/tags
Nothing to show
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

Peanut

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.