Ampier Framework

Емейл-фреймворк, в котором вы сможете создавать
адаптивные HTML и AMP-письма. Просто.
Адаптивно
Фреймворк по-умолчанию формирует адаптивную верстку письма
Быстро
Время верстки с Ampier Framework сокращается в 2 раза
Просто
Ampier Framework снижает порог вхождения в емейл-верстку
Качественно
письма отлично отображаются как в Outlook и Yandex, так и в современных почтовых клиентах
ampier framework MJML zurb for email

Сравнение с другими фреймворками

Ampier
Framework
MJML Foundation
for Email
Поддержка AMP + - -
Поддержка медиа-запросов + + +
Работа без медиа-запросов + - -
Корректное отображение в Outlook(включая Outlook 120 dpi) + + -
Онлайн playground + + -
Не нужен сборщик + Зависит от IDE -
Тестирование темной темы + - -
Инструмент Pixel perfect + - -
Бесплатно для использования + + +

Подключение

1. Добавьте скрипт инициализации в HTML файл
<script type="text/javascript">var s=document.createElement("script"), l=document.createElement("link"), d=new Date;s.setAttribute("src", "https://ampier.ru/tjml/app.js?ver="+d.getTime()), l.setAttribute("type","text/css"), l.setAttribute("rel","stylesheet"), l.setAttribute("href", "https://ampier.ru/tjml/app.css?ver="+d.getTime()), document.head.appendChild(l), document.body.appendChild(s);</script>
2. Вставьте заготовку пустого письма между <body> и </body>
<div id="app">
  <tj-ui>
    <m-body>
      <!-- email code -->
    </m-body>
  </tj-ui>
</div>
3. Используйте TJML и HTML теги между <m-body> и </m-body>
<m-text>
   If you don’t want to receive emails from us in the future, click to unsubscribe.<a href="#" target="_blank" style="color:#cc0000"> ampier.ru </a>
</m-text>
Или скачайте стартовый пакет с функцией автозавершения для WebStorm и phpStrorm