Inky и Foundation for Emails от компании Zurb. И еще гем Premailer.
Мир знает Zurb, прежде всего, по фреймворку Zurb Foundation for Sites. Это конкурент Twitter Bootstrap. В подобных фреймворках 95% кода - это набор компонентов, по мнению авторов достаточный для комфортной верстки сайтов. И лишь 5% кода (а то и меньше) - это полезные хаки, исправляющие ошибки браузеров и устройств при выводе верстки.
В письмах ситуация обратная - почтовые клиенты в отличие от браузеров, крайне консервативны и развиваются медленно. И чтобы заверстать письмо, нормально открывающееся в современных почтовых клиентах - нужно верстать таблицами, использовать только инлайновые стили, отказаться от шрифтов, отказаться от абсолютного позиционирования элементов, отказаться от подавляющего количества CSS3-свойств.
И здесь на выручку приходят решения Zurb и Premailer.
Foundation for Emails - это набор из 10 тщательно стилизованных компонентов для верстки писем. Сетка, кнопки, панели, абзацы, заголовки.
Inky - темплейт язык. Вместо верстки таблицами - можно верстать блоками inky. Для примера - код на inky:
Button
Этот же код на html:
Button
Premailer - гем, с помощью которого не нужно писать стили инлайново в тегах. Можно писать их в CSS-файлах, а Premailer сам при сборке писем сделает стили инлайновыми. Приятный бонус - Premailer составит еще и приятную текстовую версию письма.
В Ruby on Rails экосистеме эти гемы можно установить по инструкции: http://foundation.zurb.com/emails/docs/gem-guide.html
P.S. А еще в Rails есть полезные гемы letter_opener mailer_previews (который входит в состав Rails 4.1 и выше). Пользуйтесь 🚀.
Мир знает Zurb, прежде всего, по фреймворку Zurb Foundation for Sites. Это конкурент Twitter Bootstrap. В подобных фреймворках 95% кода - это набор компонентов, по мнению авторов достаточный для комфортной верстки сайтов. И лишь 5% кода (а то и меньше) - это полезные хаки, исправляющие ошибки браузеров и устройств при выводе верстки.
В письмах ситуация обратная - почтовые клиенты в отличие от браузеров, крайне консервативны и развиваются медленно. И чтобы заверстать письмо, нормально открывающееся в современных почтовых клиентах - нужно верстать таблицами, использовать только инлайновые стили, отказаться от шрифтов, отказаться от абсолютного позиционирования элементов, отказаться от подавляющего количества CSS3-свойств.
И здесь на выручку приходят решения Zurb и Premailer.
Foundation for Emails - это набор из 10 тщательно стилизованных компонентов для верстки писем. Сетка, кнопки, панели, абзацы, заголовки.
Inky - темплейт язык. Вместо верстки таблицами - можно верстать блоками inky. Для примера - код на inky:
Button
Этот же код на html:
Button
Premailer - гем, с помощью которого не нужно писать стили инлайново в тегах. Можно писать их в CSS-файлах, а Premailer сам при сборке писем сделает стили инлайновыми. Приятный бонус - Premailer составит еще и приятную текстовую версию письма.
В Ruby on Rails экосистеме эти гемы можно установить по инструкции: http://foundation.zurb.com/emails/docs/gem-guide.html
P.S. А еще в Rails есть полезные гемы letter_opener mailer_previews (который входит в состав Rails 4.1 и выше). Пользуйтесь 🚀.