Style/font defaults

[mjmlio]

Style/font defaults

[arnaudbreton]

Hi here,

Thanks much for opening the discussion. Sounds a bit similar to #14, right?

Joining your idea of a config file. We're thinking is to implement a pre-processing phase where we would read styles defined globally (in a mj-style tag for instance) and inline them on the elements where they should apply.

A short example is more illustrating our idea here:

<mj-body>
    <mj-head>
      <mj-style>
        .foobar {
          font-family: Arial;
        }
      </mj-style>
    </mj-head>
    <mj-section>
      <mj-column>
        <mj-text class="foobar">Hello world</mj-text>
        <mj-text class="foobar">Hello world 2</mj-text>
      </mj-column> 
    </mj-section>
</mj-body>

would result in

<mj-body>
    <mj-head>
      <mj-style>
        .foobar {
          font-family: Arial;
        }
      </mj-style>
    </mj-head>
    <mj-section>
      <mj-column>
        <mj-text class="foobar" font-family="Arial">Hello world</mj-text>
        <mj-text class="foobar" font-family="Arial">Hello world</mj-text>
      </mj-column> 
    </mj-section>
</mj-body>

This avoids to repeat the font-family styling property for each componant with class foobar in my example, without changing the way components deals with attributes.
In a future release, we will also add attributes validation to provide you with warnings when not supported css properties end up inlined on a tag which doesn't support it.

What do you think? Would this work in your case?

[patrickfweston]

I'm running into the same problem @BrettJay . There doesn't look to be support for that yet. The defaults are set in the different components' files: https://github.com/mjmlio/mjml/blob/master/src/components/Text.js#L12

I'm going to dig in the source for this some more (I just started using it a few hours ago) to see if there isn't some way to extend the default and override the values. It'd be nice to have a config file (possibly a json file or something) to set a lot of these things.

Another option I'm considering is creating some sort of gulp task runner to do a find and replace corresponding to a config file. That's more hacky, but something I could get done sooner.

I'd love to contribute if someone could point me in the right direction.

[patrickfweston]

@arnaudbreton : It's quite similar to #14 . I haven't used Radium in the past, but I'll definitely look into it. I like the idea of an mj-head section as it'd contain everything in one file. I know that Foundation for email has a CSS inliner which does something similar to this. However, the styles in this instance are applied to the mjml elements, not the HTML elements.

What's the accepted practice with regard to putting other typography elements inside mj-text? Would something like the following be an acceptable practice:

<mj-text><h1>Hello world</h1></mj-text>

If it is acceptable, it would be nice to inject styles on the h1 elements from the mj-head as well. On the contrary, you could easily create an h1 class that you apply to the mj-text element.

Another thought is that it'd be nice to change all mj-* elements to a new default. This would be helpful in cases like #41. You could probably just use the mj-* element in mj-style like a normal CSS element selector.

[Chrisedmo]

Yeah I'd like to know how we can change the ubuntu font, and use our own google hosted font? Like Lato etc? Be good if you could override like:

@default({
    font: 'Lato'
    font-src: 'http://url.com/etc/'

[klombomb]

Great Idea! Any chance this will make it to a release anytime soon?

[arnaudbreton]

Hi everyone,

I'm closing this issue since we came up with implementations to be discussed for the cases described here:

• #79 for global attribute definition
• #80 to use custom fonts

Let's move the discussions there!
Thanks for your contribution to MJML, highly appreciated!