mmm-lang

mizmoz.com / mmm-lang

The markup language for creating emails and pages in Mizmoz.

This is an early version and is likely to be subject to significant changes to the API - you've be warned!

Features

• mmm markup rendering to HTML for email and HTML for web
• Components for creating layouts (Row, Column, Divider)

Components

Row

Block level row element which is a container for any number of Column components.

<!-- Simple single column layout -->
<mmm-row>
  <mmm-column>
    <p>Hello world!</p>
  </mmm-column>
</mmm-row>

attribute	description	default value [options]
background-color	row background color	#ffffff
center-on-mobile	center the content on mobile	true
content-width	row width	600px
full-width	is the row 100% iof the page	false
padding	column padding	0px
spacing	position of column spacing	none [none, inside, outside, both]
spacing-color	column spacing color
spacing-width	column spacing width	0px

Column

Inline block element representing a column. Must be a child of Row.

By default the Row will calculate the column widths and pass them at render time.

<!-- Two column layout, each with 50% width -->
<mmm-row>
  <mmm-column>
    <p>Hello world!</p>
  </mmm-column>
  <mmm-column>
    <p>Hello world!</p>
  </mmm-column>
</mmm-row>

attribute	description	default value [options]
background-color	background color	row background color
center-on-mobile	center the content on mobile	true
padding	column padding	0px
width	column width	100%

The width can either be empty, in which case width = row width / number of columns

Fractions can also be used like width="1/4"

Box

Block level container which helps to recreate the browser box model

<!-- Text with consistent padding and margins -->
<mmm-box padding="12px">
  <p>Hello world!</p>
  <p>Hello world!</p>
</mmm-box>

attribute	description	default value [options]
align	box alignment	initial
background-color	background color
border-radius	box border radius	0
margin	box margin	0px
padding	padding padding	0px
width	width	auto
height	height	auto

Button

Block level button

<mmm-button background-color="blue" color="#ffffff" text="Click Here!" />

attribute	description	default value [options]
align	button alignment	center
background-color	background color	#5db734
border-radius	box border radius	3px
box-shadow	button drop shadow	none [none, subtle, dark, css box-shadow: ...
color	button color	#ffffff
font-family	font family for the button	inherit
font-size	font size	14px
margin	margin	0px
padding	padding	12px
width	width	auto
text	button label	Click me
url	url
width	button width	auto

Divider

Block level divider which can be used as a horzontal rule or more often just as a spacer to achieve pixel perfect padding.

<mmm-divider color="blue" height="24px" />

attribute	description	default value [options]
color	divider color	#ffffff
margin	margin	0px
height	divider height	100%
width	divider width	100%

Image

Block level image element. All images are fluid by default with the width

<mmm-image
  src="https://www.mizmoz.com/img/logo.png"
  url="https://www.mizmoz.com"
  alt="Mizmoz logo"
/>

attribute	description	default value [options]
align	image alignment	center
alt	image alt tag
padding	column padding	0px
src	url to the image
url	url to link to
height	max height	100%
width	max width	100%

Roadmap & Development

Phase 1

• MMM parser
• Rendering engine (the basic renderer)
• Email HTML engine (for creating email HTML output)
• Website HTML engine

Template Engine

• Row container element for Column
• Column component
• Box container to recreate the browser box model consistently
• Divider used to create spacing between elements

Rendering Order

• Parse mmm > mmm-head > mmm-merge to make Merge tags available to the rest of the template
• Parse and resolve all merge tags leaving in place any that don't resolve. This is so user.* & live.* tags aren't replaced
• Render mmm > mmm-body > * components
• Render mmm > mmm-head > * components
• Inline CSS rules

Email Gotchas

• p tags should be replaced with tables with all styles applied to the td element (Outlook 07,10,12)
• replace margin with Margin

<mmm>
  <mmm-head>
    <mmm-title>Welcome to my website</mmm-title>
    <mmm-send-date>2016-12-24 00:00:00</mmm-send-date>
    <mmm-merge name="user.firstname" value="Ian" />
    <mmm-merge name="user.email" value="[e-mail]" />
    <mmm-merge name="styles" json='{fontFamily:"Source Sans Pro",spacing:12,primaryColor:"black",padding:"12px"}' />
    <mmm-merge name="styles.fontWeight" value="12" />
  </mmm-head>
  <mmm-body>
    <mmm-row width="100%" content-width="600px">
      <mmm-column
          width="1/3"
          padding="{{styles.padding}}"
      >
        Menu
      </mmm-column>
      <mmm-column
          width="2/3"
      >
        Welcome {{user.firstname}} to this email!
      </mmm-column>
    </mmm-row>
    <mmm-row>
      <mmm-column>
        <ul mmm-repeatable="names">
          <li>{{name}}</li>
        </ul>
      </mmm-column>
    </mmm-row>
  </mmm-body>
</mmm>