mjmlio / mjml Goto Github PK

try following code:

<mj-body>
  <mj-section>
    <mj-column>
      <mj-image src="https://fr.mailjet.com/wp-content/uploads/2015/09/personnalisation.png"></mj-image>
      <mj-divider border-color="#F45E43"></mj-divider>
      <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World test test test test test test test test test test test test test test test test</mj-text>
    </mj-column>
    <mj-column>
      <mj-image src="https://fr.mailjet.com/wp-content/uploads/2015/09/personnalisation.png"></mj-image>
      <mj-divider border-color="#F45E43"></mj-divider>
      <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World test test test test test test test test test test test test test test test test</mj-text>
    </mj-column>
  </mj-section>
</mj-body>

Would be nice to allow font-family in , as otherwise we cannot have the same font on all the document

After installing MJML globally via npm, I get the following error message when running any command in the cli:

$ mjml -r input.mjml
ReferenceError: engine is not defined
at /usr/local/lib/node_modules/mjml/lib/cli.js:86:12

I do not get any sort of error messages while installing. I also tried running the installer with sudo and the cli commands with sudo and both situations reproduced the error above.

Hi,

I am building up a newsletter frame, but I am having some issues with the custom components.

I want to create a simple title component to start with. But it doesn't seem to work.

I execute
mjml --init-component title
This creates a .js file name Title. Until this point everything works as expected.

From this point if I put a <mj-title> component in my template I expect it to be valid and compiled. But instead I get
Error: [MJMLError] UnknownMJMLElement: Could not find element for : mj-title at MJMLError.Error (native) at new MJMLError (/usr/local/lib/node_modules/mjml/lib/Error.js:24:85) at /usr/local/lib/node_modules/mjml/lib/components/decorators/MJMLElement.js:193:21
I can't seem to figure out how the new component get's registered with the basic one's.

Thanks

Bulletproof buttons using the same principle as https://buttons.cm/

Because I want :

But on outlook 2010 I got :

Pulsar:mjml-demo andrea$ mjml --watch index.mjml -o index.html

/Users/andrea/.npm-packages/lib/node_modules/mjml/lib/cli.js:42
return new Promise(function (resolve, reject) {
^
ReferenceError: Promise is not defined
at /Users/andrea/.npm-packages/lib/node_modules/mjml/lib/cli.js:42:16
at render (/Users/andrea/.npm-packages/lib/node_modules/mjml/lib/cli.js:85:3)
at FSWatcher. (/Users/andrea/.npm-packages/lib/node_modules/mjml/lib/cli.js:101:12)
at FSWatcher.EventEmitter.emit (events.js:98:17)
at FSEvent.FSWatcher._handle.onchange (fs.js:1039:12)

In order to make perfect pill-shaped buttons, the height should be either explicit, or the border-radius shoud allow % units.

New features added in 1.1 are not visible on the website's documentation (namely, mj-column's background-color, certainly others)

<mj-body> 
  <mj-section>
    <mj-column >
      <mj-divider border-color="#F45E43"></mj-divider>
      <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh lorem, fermentum sit amet leo sed, consectetur egestas ligula. </mj-text>
    </mj-column>
  </mj-section>
  <mj-section>
    <mj-column >
      <mj-divider border-color="#F45E43"></mj-divider>
      <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hoj</mj-text>
    </mj-column>
  </mj-section>
</mj-body>

vs

<mj-body>
  <mj-section>
    <mj-column >
      <mj-divider border-color="#F45E43"></mj-divider>
      <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh lorem, fermentum sit amet leo sed, consectetur egestas ligula. </mj-text>
    </mj-column>
    <mj-column >
      <mj-divider border-color="#F45E43"></mj-divider>
      <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hoj</mj-text>
    </mj-column>
  </mj-section>
  <mj-section>
    <mj-column >
      <mj-divider border-color="#F45E43"></mj-divider>
      <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hoj</mj-text>
    </mj-column>
    <mj-column >
      <mj-divider border-color="#F45E43"></mj-divider>
      <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh lorem, fermentum sit amet leo sed, consectetur egestas ligula.</mj-text>
    </mj-column>
  </mj-section>
</mj-body>

Removing the redundant <mj-column > </mj-column > in the first example results in aligned text but there is no reason why a single column should behave different from multi column.
Adding width=100% to the column has the desired effect. This should be the default for a single column.

MJML to reproduce :

<mj-body>
  <mj-section background-color="#F45E43" padding-top="0" padding-bottom="0" padding-left="0" padding-right="0">
    <mj-column width="300">
      <mj-image padding-top="0" padding-bottom="0" padding-left="0" padding-right="0" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Clouds_edited.jpg"></mj-image>
    </mj-column>
    <mj-column width="300">
      <mj-text font-size="22" color="white" font-family="helvetica">
        Greatness of layout
      </mj-text>
      <mj-text color="white" font-family="helvetica">
        Simple layout with 10 line of MJML
      </mj-text>
    </mj-column>
  </mj-section>
</mj-body>

Expected Result:

Outlook 2007/2010/2013 result:

Really liking the look of mjml so far.

One immediate question I have though is, with the most basic MJML template I can make, there's certain styles cascading which I haven't specified, such as the font stack for components seeming being set to Ubuntu first.

I may be missing something fundamental — is there a way to reset certain stylistic aspects common to the whole mjml file, so I don't have to specify font-family as Helvetica on every <mjml-text> component in a file?

For font sizes, paddings and such of standard components, add a column default that give the default value of the attribute

try following code and look at the image size:

<mj-body>
  <mj-section>
    <mj-column width="20%">
      <mj-image src="/assets/img/logo-small.png"></mj-image>
      <mj-divider border-color="#F45E43"></mj-divider>
      <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>
    </mj-column>
     <mj-column width="60%">
      <mj-image src="/assets/img/logo-small.png"></mj-image>
      <mj-divider border-color="#F45E43"></mj-divider>
      <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World2</mj-text>
    </mj-column>
  </mj-section>
</mj-body>

Try <mj-column width="400"> to see the image blow up

Default in section is set to "top center" why is not working with background-position="X Y" ? Like that.

background: 'url(${mjAttribute('background-url')}) ${mjAttribute('background-position')} / ${mjAttribute('background-size') || ''} ${mjAttribute('background-repeat') || ''}'

The section element has padding-left, padding-right etc but no padding which makes it slightly annoying having to set the padding on all 4 sides.

It would be cool to be able to assign different widths for elements for different breakpoints.

For example if I have three columns on desktop but I want them to be three 1 columns on mobile.

Maybe with m-width and t-width attributes that compile to media queries?

outlook?
gmail?
ios?
etc...

thanks!

Hey just saw this project, looks like a great start and I'm planning on trying it out later. Noticed in the MJML-tags you use inline styles. Was wondering if you considered something like Radium to keep it cleaner.

Hope to contribute/use this soon!

We'd like to integrate MJML with EJS. It seems more efficient to generate HTML from MJML only once and then let EJS put in any dynamic text - rather than generating HTML from MJML for every single email.

I thought that using mj-raw component should let us embed EJS code - but it doesn't get rendered properly, i.e.:
<mj-raw><% if (undefined) {} %></mj-raw>
renders as

<!--[if mso]>
                <table border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;"><tr><td>
                <![endif]--><% if="" (undefined)="" {}="" %=""></%><!--[if mso]>
                </td></tr></table>
                <![endif]-->

Two issues here:

1. The input renders corrupted (using < > etc. doesn't help)
2. It is wrapped in the 'mso' table - maybe this could be optional?

  entities seem to get stripped and replaced with a space when rendering html.

If I wrap it in <mj-raw>, the space disappears entirely.

Why this margins are completely different? (Why content exceeds those margins?)

Hi,

I can't set a padding on <mj-column>

If i got 3 columns of 33%, the only way to put a padding between columns is to apply this padding on each children of this column.

What I do (trying to apply a padding on whole col):

<mj-body background-color="grey">

  <mj-section>

    <mj-column width="33%" padding="50px">
      <mj-text align="left" color="#EEE" font-family="roboto" align="center">test title lorem ipsum dolor lorem ipsum dolor</mj-text>
      <mj-text align="left" color="#EEE" font-family="roboto" align="center">lorem ipsum dolor sit amet consectetur lorem ipsum </mj-text>
    </mj-column>

    <mj-column width="33%" padding="50px">
      <mj-text align="left" color="#EEE" font-family="roboto" align="center">test title lorem ipsum dolor lorem ipsum dolor</mj-text>
      <mj-text align="left" color="#EEE" font-family="roboto" align="center">lorem ipsum dolor sit amet consectetur lorem ipsum </mj-text>
    </mj-column>

    <mj-column width="33%" padding="50px">
      <mj-text align="left" color="#EEE" font-family="roboto" align="center">test title lorem ipsum dolor lorem ipsum dolor</mj-text>
      <mj-text align="left" color="#EEE" font-family="roboto" align="center">lorem ipsum dolor sit amet consectetur lorem ipsum </mj-text>
    </mj-column>

  </mj-section>
</mj-body>

What I get with padding on <mj-column>:

What I get width padding on each children of <mj-column> (each <mj-text>):

Padding on <mj-column> is not supported? or it's the default padding of <mj-text>?

If i put padding-left & padding-right at 0px on each <mj-text>, I can see again less padding:

So I think putting default padding is not a good idea.
If we set a padding on a component with no padding on his children, we've to apply it, what do u think about this approach?

Thank

Doesn't seem to be anything on linking to different styles or how to change any head values in the documentation?

https://mjml.io/try-it-live/kili

I changed http://placehold.it/250x150 to http://placehold.it/600x400. The image does not scale to device width in Mobile View. I expect it to scale to fit without horizontal scroll.

I am getting this error. Something to do with React.

Warning: React.renderToStaticMarkup is deprecated. Please use ReactDOMServer.renderToStaticMarkup from require('react-dom/server') instead.
Invariant Violation: renderToStaticMarkup(): You must pass a valid ReactElement.
at invariant (/usr/local/lib/node_modules/mjml/node_modules/fbjs/lib/invariant.js:39:15)
at Object.renderToStaticMarkup (/usr/local/lib/node_modules/mjml/node_modules/react/lib/ReactServerRendering.js:59:83)
at Object.newFn as renderToStaticMarkup
at MJMLElement.mjContent (/usr/local/lib/node_modules/mjml/lib/components/decorators/MJMLElement.js:102:96)
at Text.render (/usr/local/lib/node_modules/mjml/lib/components/Text.js:85:44)
at ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (/usr/local/lib/node_modules/mjml/node_modules/react/lib/ReactCompositeComponent.js:587:34)
at ReactCompositeComponentMixin._renderValidatedComponent (/usr/local/lib/node_modules/mjml/node_modules/react/lib/ReactCompositeComponent.js:607:32)
at wrapper as _renderValidatedComponent
at ReactCompositeComponentMixin.mountComponent (/usr/local/lib/node_modules/mjml/node_modules/react/lib/ReactCompositeComponent.js:220:30)

at wrapper [as mountComponent] (/usr/local/lib/node_modules/mjml/node_modules/react/lib/ReactPerf.js:66:21)

When doing a parse error, the debug does not tell which line from the mjml file is concerned :

➜  mjmltest  mjml -r test.mjml
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <td>. See Section > td > MJMLElement > MJMLColumnElement > tr.

Hello,

The --watch option seems to crash after some saves on my mjml file.

> mjml --watch test.mjml --output test.html

produces:

Error: [MJMLError] EmptyMJMLError: Null element found in mjmlElementParser at MJMLError.Error (native)
at new MJMLError (C:[...]\AppData\Roaming\npm\node_modules\mjml\lib\Error.js:24:85)
at Object.mjmlElementParser (C:[...]\AppData\Roaming\npm\node_modules\mjml\lib\documentParser.js:24:13)
at documentParser (C:[...]\AppData\Roaming\npm\node_modules\mjml\lib\documentParser.js:65:22)
at mjml2html (C:[...]\AppData\Roaming\npm\node_modules\mjml\lib\mjml2html.js:49:52)
at C:[...]\AppData\Roaming\npm\node_modules\mjml\lib\cli.js:88:12

No problem with:
> mjml -r test.mjml --output test.html

I'm using Node v4.3.0, NPM v2.14.12 & MJML v1.0.3

Thank you

Error: ENOENT: no such file or directory, access 'C:\Users\NAME\Desktop\Reponsive'
    at Error (native)

When attempting to compile my .mjml file Node throws this error. Any idea why this could be happening?

Great tool btw 😄

Is this rendering correctly?

Hi,

By default, Mailchimp can't support @import webfont directly in a <style> tag :

It works by doing <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> instead.

Default compiling from mjml need that the html files must be edited to be Mailchimp compatible :(

Filed: https://youtrack.jetbrains.com/issue/IDEA-151641

I looked through the documentation and could not find a component for a link.

would you just put it inside the component?

would it be RAW?

I basically want a simple

<a href="google.com" target="_blank"> google </a>

In my Litmus testing I found that in:

Polymail
Outlook Web App

The columns that were meant to be 50% width were stacking as 100% columns.

When I'm using a with a background-url and a repeat rule, the rendered CSS is broken.

source :

<mj-section 
  background-repeat="repeat-x" 
  background-url="http://www.synbioz.com/images/articles/background_bleu.gif">

styles rendered :

width:100%;
font-size:0px;
background:url(http://www.synbioz.com/images/articles/background_bleu.gif) top center / repeat-x;

See the "/" caraxtere has nothing to do here and break the rule .

(with Chrome 48.0.2564.97 (64-bit), on Mac OsX El Capitan)

As seen on your site template :

  <!-- Side image -->
  <mj-section background-color="white">
    <mj-column>
        <mj-image width="200" src="https://designspell.files.wordpress.com/2012/01/sciolino-paris-bw.jpg"></mj-image>
    </mj-column>
    <mj-column>
        <mj-text font-style="italic"
                 font-size="20"
                 font-family="Helvetica Neue"
                 color="#626262">
            Find amazing places
        </mj-text>
        <mj-text color="#525252">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus.</mj-text>
    </mj-column>
  </mj-section>

Does not render well in gmail :

Work in that case (small texts in columns) :

<mj-section>
    <mj-column>
        <mj-text align="center">
          foo
        </mj-text>
    </mj-column>
    <mj-column>
        <mj-text align="center">
          bar
        </mj-text>
    </mj-column>
</mj-section>

but not with more text :

<mj-section>
    <mj-column>
        <mj-text align="center">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </mj-text>
    </mj-column>
    <mj-column>
        <mj-text align="center">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </mj-text>
    </mj-column>
</mj-section>

Although it might not be your intention, any email sent out will 'phone home' to one of your servers. Please allow a base-url attribute for mj-social tags and include the icons in this repo.

Would be fine if we will have possibility to set order of links. By now, all links are rendered in default order.

Maybe something like order parameter?

<mj-social order="google|facebook|pinterest" />

I'm using server-side react to render emails and I was wondering if there was an easy way to use the mjml components as standard react components.
Basically, can I do this:

React.createClass({
  render() {
    return (
      <MjBody>
        // mj-sections go here....
      </MjBody
    );
  }
});

There's a way to edit the padding left and right with mjml? 25px by default had broked my design :/
This is a future release? 👍

When using the template generated by the command mjml --init-component product, it generates this:

import {
  elements,
  registerElement,
  MJMLColumnElement
} from 'mjml'

...

@MJMLColumnElement({
  tagName: 'mj-product',
  content: ' ',

  /*
   * These are your default css attributes
   */
  attributes: {
    'color': '#424242',
    'font-family': 'Helvetica',
    'margin-top': '10px'
  }
})
class Product extends Component {
...
}

When I do babel-node Product.js, I have this error:

var Product = (_dec = (0, _mjml.MJMLColumnElement)({
                                                  ^
TypeError: (0 , _mjml.MJMLColumnElement) is not a function

The only way I got it to work was to change

import {
  elements,
  registerElement,
  MJMLColumnElement
} from 'mjml'

to this

import {
  elements,
  registerElement
} from 'mjml'

var MJMLColumnElement = require('mjml').MJMLColumnElement.default

I believe this has something to do with the babel decorator plugin and es6 imports, I tried with transform-decorators-legacy and transform-decorators, same result.

What are your thoughts on this? Thanks

Code:

<mj-body>
  <mj-section>
    <mj-column >
      <mj-divider border-color="#F45E43"></mj-divider>
      <mj-text font-size="20px" color="#F45E43" font-family="helvetica">World</mj-text>
    </mj-column>
    <mj-column >
      <mj-divider border-color="#F45E43"></mj-divider>
      <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello</mj-text>
    </mj-column>
    <mj-column >
      <mj-divider border-color="#F45E43"></mj-divider>
      <mj-text font-size="20px" color="#F45E43" font-family="helvetica">H</mj-text>
    </mj-column>
    <mj-column >
      <mj-divider border-color="#F45E43"></mj-divider>
      <mj-text font-size="20px" color="#F45E43" font-family="helvetica">W2</mj-text>
    </mj-column>
     <mj-column >
      <mj-divider border-color="#F45E43"></mj-divider>
      <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello crazy World2</mj-text>
    </mj-column>
  </mj-section>
</mj-body>

Remove 1 column and all is ok. If 4 columns is the limit it should be documented.

When using the mj-image tag, the responsive sizing isn't working on iOS devices. Example litmus screenshot below:

Add possibility to add a background-color on Column (or MJMLColumnElement ?)

I am using the template generated by mjml --init-component product. When I try to render a MJMLElement (default generated render method), I have an error. Here is the render method:

render() {

    const css = this.getStyles(),
          content = 'Hello World!'

    return (
      <MjText style={ css }>
        { content }
      </MjText>
    )
  }

The error is when running the command DEBUG="mjml-engine/mjml2html" babel-node app.js

  mjml-engine/mjml2html Start parsing content +0ms
  mjml-engine/mjml2html Content parsed. +8ms
  mjml-engine/mjml2html Start rendering +1ms
  mjml-engine/mjml2html Create root React element +0ms
  mjml-engine/mjml2html Render to static markup +0ms
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <td>. See MJMLColumnElement > td > Product > MJMLElement > MJMLColumnElement > tr.
Warning: React.renderToStaticMarkup is deprecated. Please use ReactDOMServer.renderToStaticMarkup from require('react-dom/server') instead.
/Users/c2249657/WebstormProjects/responsive-email-desssipi/node_modules/fbjs/lib/invariant.js:46
    throw error;
    ^

Invariant Violation: renderToStaticMarkup(): You must pass a valid ReactElement.
    at invariant (/Users/c2249657/WebstormProjects/responsive-email-desssipi/node_modules/fbjs/lib/invariant.js:39:15)
    at Object.renderToStaticMarkup (/Users/c2249657/WebstormProjects/responsive-email-desssipi/node_modules/react/lib/ReactServerRendering.js:59:83)
    at Object.newFn [as renderToStaticMarkup] (/Users/c2249657/WebstormProjects/responsive-email-desssipi/node_modules/react/lib/deprecated.js:38:17)
    at MJMLElement.mjContent (/Users/c2249657/WebstormProjects/responsive-email-desssipi/node_modules/mjml/lib/components/decorators/MJMLElement.js:102:96)
    at Text.render (/Users/c2249657/WebstormProjects/responsive-email-desssipi/node_modules/mjml/lib/components/Text.js:85:44)
    at [object Object].ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (/Users/c2249657/WebstormProjects/responsive-email-desssipi/node_modules/react/lib/ReactCompositeComponent.js:587:34)
    at [object Object].ReactCompositeComponentMixin._renderValidatedComponent (/Users/c2249657/WebstormProjects/responsive-email-desssipi/node_modules/react/lib/ReactCompositeComponent.js:607:32)
    at [object Object].wrapper [as _renderValidatedComponent] (/Users/c2249657/WebstormProjects/responsive-email-desssipi/node_modules/react/lib/ReactPerf.js:66:21)
    at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/c2249657/WebstormProjects/responsive-email-desssipi/node_modules/react/lib/ReactCompositeComponent.js:220:30)
    at [object Object].wrapper [as mountComponent] (/Users/c2249657/WebstormProjects/responsive-email-desssipi/node_modules/react/lib/ReactPerf.js:66:21)

Here is my app.js:

import Product from './Product'
import mjml from 'mjml'

/*
  Compile an mjml string
*/
const htmlOutput = mjml.mjml2html(`<mj-body>
  <mj-section>
    <mj-column>
      <mj-product></mj-product>
    </mj-column>
  </mj-section>
</mj-body>
`)

/*
  Print the responsive HTML generated
*/
console.log(htmlOutput);

However, when I render simple html like this:

render() {
    return (
      <span>test</span>
    )
  }

It is working fine. I cannot see why I cannot render MJMLElements like MjText but I can render simple html :/

Thanks

DylanMBPr-2:/ dylanet$ mjml -r input.mjml
TypeError: undefined is not a function
at /usr/local/lib/node_modules/mjml/lib/cli.js:71:23
at /usr/local/lib/node_modules/mjml/lib/cli.js:43:17
at /usr/local/lib/node_modules/mjml/lib/cli.js:42:12
at Object.render (/usr/local/lib/node_modules/mjml/lib/cli.js:85:3)
at main (/usr/local/lib/node_modules/mjml/lib/mjml:35:28)
at Object. (/usr/local/lib/node_modules/mjml/lib/mjml:52:3)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
DylanMBPr-2:/ dylanet$

I've seen this being mentioned on Hacker News, but I'm wondering when it will be ready ;-) I'm about to layout some templates that need this functionality. Thanks!

Hello,

Mandrill and Mailchimp support Handlebars template syntax, could we imagine a command like mjml -r template.mjml -o template.html --syntax=handlebars or mjml -r template.mjml -o template.html --syntax=mailchimp ?

Example:

Links:

• http://handlebarsjs.com/
• http://blog.mandrill.com/handlebars-for-templates-and-dynamic-content.html

Thank u, Mjml is great!

Hi I was wondering if there is any solution to modify the default width of the email. Because for now it's 600px wide but I want a 550px wide email.

Hi guyz,

I got a problem with <mj-divider>.

I want a separator (a kind of border in fact) with no spaces or margin around.

Even if I set a margin & padding at 0px on <mj-divider> and on <mj-section>, the generated HTML code is wrapped inside a <p> with 13px margin: 13px 0;

What i do:

<mj-body>

  <mj-section background-color="grey">
    <mj-column>
      <mj-image width="100" src="/assets/img/logo-small.png"></mj-image>
    </mj-column>
  </mj-section>

  <mj-section margin-top="0px" margin-bottom="0" padding-top="0px" padding-left="0px" padding-bottom="0px" padding-right="0px">
    <mj-divider border-color="#F45E43" padding-top="0px" padding-left="0px" padding-bottom="0px" padding-right="0px"></mj-divider>
  </mj-section>

</mj-body>

What I expected:

What I get:

Maybe I miss something but i didn't see any CSS reset.

In general, I understand that the tool was initially designed to facilitate the building of newsletter but I regret that we don't get a reset mode.Override each padding of each component is a bit tedious.
What do you think about that?

Thanks

Hi,

IMO current "social component" servers for sharing, therefore it should be renamed to "social share".

Then there should be new "social follow" component with links to channels like Twitter, Youtube, Website, Pinterest, Instagram, etc....

Would be happy to contribute with "social follow" component.