ampier email framework

email framework, который предоставляет возможность быстро и удобно верстать адаптивные кроссплатформенные AMP и html-письма посредством специальной xml-подобной разметки TJML (TJ marked language)

Позволяет оптимизировать работу над версткой емейлов

  • Автоматически формирует HTML и AMP письмо из tjml-кода
  • Ускорение html-верстки в 1,5 раза (по сравнению с обычной email-html-версткой)
  • Снижение порога входа для верстальщиков и фронтендеров
  • Корректная адаптация писем на мобильных устройствах в том числе без медиа-запросов
  • Корректное отображение в Outlook (2003-2020), а аткже в устаревших почтовых клиентах, например Lotus mail

Интерфейс фреймворка имеет ряд вспомогательных инстрементов

  • Тестирование отображение письма в темной теме
  • Инструмент сжатия кода
  • Тестирование мобильной адаптации
  • Инструмент pixelPerfect
  • Информирование о размере отрендеренного html файла
  • Возможность в 1 клик сделать скриншот получившегося письма

TJML

TJML написан на фреймворке vue и каждый специальный тег является компонентом vue. Для формирования письма обязательно подключение нашего javascript-файла. Перед отправкой письма, нужно скачать его отрендеренную версию (HTML или AMP) - при скачивании, каждый компонент будет преобразован в соответствующий обычный html код.

Подключение

Сразу после тега <body> добавьте javascript код:

<script type="text/javascript">
var s=document.createElement("script"),l=document.createElement("link"),d=new Date;s.setAttribute("src","https://dev.ampier.io/tjml/app.js?ver="+d.getTime()),l.setAttribute("type","text/css"),l.setAttribute("rel","stylesheet"),l.setAttribute("href","https://dev.ampier.io/tjml/app.css?ver="+d.getTime()),document.head.appendChild(l),document.body.appendChild(s); 
</script>

Общая структура письма

Необходимо придерживаться следующей структуры документа: Между <m-body> и </m-body> вы можете вставить произвольный tjml или html код. Обратите внимание, что использование обычного html кода не позволит сформировать AMP версию письма.

<div id="app">
<tj-ui>
    <m-body>
        <!-- some tjml code -->
    </m-body>
</tj-ui>
</div>

Теги и атрибуты

О всех доступных тегах (компонентах) и атрибутах читайте в документации