Я использую premailer-rails3гем, который извлекает встроенные стили для HTML-писем, и я пытаюсь заставить его работать с загрузкой Twitter.
https://github.com/fphilipe/premailer-rails3
Похоже, что некоторые стили подходят правильно, но не все. Мне интересно, есть ли у кого-нибудь хороший рабочий пример получения своего Twitter Bootstrap css (измененного или нет) в электронное письмо в формате html.
Благодарность!
Ответы:
Если вы имеете в виду «Могу ли я использовать стилистическое представление Bootstrap в электронном письме?» тогда вы можете, хотя я еще не знаю никого, кто это делал. Однако вам нужно будет перекодировать все в таблицах.
Если вам нужна функциональность, это зависит от того, где просматриваются ваши электронные письма. Если значительная часть ваших пользователей использует Outlook, Gmail, Yahoo или Hotmail (а они обычно составляют около 75% почтовых клиентов), тогда большая часть возможностей Bootstrap невозможна. Mac Mail, iOS Mail и Gmail на Android намного лучше обрабатывают CSS, поэтому, если вы ориентируетесь в основном на мобильные устройства, это не так уж плохо.
font-face- вы можете использовать только внешние изображения. Все остальные внешние ресурсы (файлы CSS, шрифты) исключены.:hover, :activeсостояния не могут быть стилизованы отдельноТам являются грузы из ответов на SO, а также множество других ссылок в Интернете в целом.
Я прошу прощения за реставрацию этого старого потока, но я просто хотел сообщить всем, что есть очень близкий Bootstrap, такой как CSS-фреймворк, специально созданный для стилизации электронной почты, вот ссылка: http://zurb.com/ink/
Надеюсь, это кому-то поможет.
Редактирование ниндзя: с тех пор он был переименован в, Foundation for Emailsи новая ссылка: https://foundation.zurb.com/emails.html
Тихое, но смертоносное редактирование: новая ссылка https://get.foundation/emails.html
Вот несколько вещей, которые нельзя делать с электронной почтой:
- Включите раздел со стилями . Apple Mail.app поддерживает его, а Gmail и Hotmail - нет, так что это недопустимо. Hotmail будет поддерживать раздел стилей в теле, а Gmail - нет.
- Ссылка на внешнюю таблицу стилей. Не многие почтовые клиенты поддерживают это, лучше просто забыть об этом.
- Фоновое изображение / Фоновое положение. Gmail также является виновником этого.
- Очистите поплавки . Снова Gmail.
- Маржа . Ага, серьезно, Hotmail игнорирует поля. По сути, никакое позиционирование CSS не работает.
- Шрифт-ничего . Скорее всего, Eudora проигнорирует все, что вы пытаетесь объявить с помощью шрифтов.
Источник: http://css-tricks.com/using-css-in-html-emails-the-real-story/
У Mailchimp есть шаблоны писем, которые вы можете использовать - здесь
Еще несколько ресурсов, которые должны вам помочь
font-sizeдает вам большую гибкость при очень небольших затратах.
Вы можете использовать https://github.com/advancedrei/BootstrapForEmail для b-привязки своей электронной почты.
Недавно я потратил некоторое время на создание HTML-шаблонов электронной почты. Лучшим решением, которое я нашел, было использование http://htmlemailboilerplate.com/ . С тех пор я создал 3 довольно сложных шаблона, и они хорошо работают в различных почтовых клиентах.
Привет, Брайан Армстронг ， посетите эту ссылку .
В этом блоге рассказывается, как меньше интегрировать Rails с Bootstrap (используя premailer-rails).
Если вы используете bootstrap sass, вы можете сделать то же самое:
начните с импорта некоторых файлов sass Bootstrap в email.css.scss
@import "bootstrap-sprockets";
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/buttons";
@import "bootstrap/alerts";
@import 'bootstrap/normalize';
@import 'bootstrap/tables';
@import 'bootstrap/progress-bars';
а затем в <head>разделе просмотра добавьте
<%= stylesheet_link_tag "email" %>
Лучший подход, который я придумал, - это использовать импорт Sass на выбранной основе, чтобы при необходимости добавлять ваши стили начальной загрузки (или любые другие) в электронные письма.
Сначала создайте новый родительский файл scss, похожий email.scssна ваш стиль электронной почты. Это могло выглядеть так:
// Core variables and mixins
@import "css/main/ezdia-variables";
@import "css/bootstrap/mixins";
@import "css/main/ezdia-mixins";
// Import base classes
@import "css/bootstrap/scaffolding";
@import "css/bootstrap/type";
@import "css/bootstrap/buttons";
@import "css/bootstrap/alerts";
// nest conflicting bootstrap styles
.bootstrap-style {
//use single quotes for nested imports
@import 'css/bootstrap/normalize';
@import 'css/bootstrap/tables';
}
@import "css/main/main";
// Main email classes
@import "css/email/zurb";
@import "css/email/main";
Затем в своих шаблонах электронной почты указывайте только свой скомпилированный файл email.css, который содержит только выбранные стили начальной загрузки, на которые ссылаются и правильно вложены в ваш email.scss.
Например, некоторые стили начальной загрузки будут конфликтовать со стилем адаптивной таблицы Zurb. Чтобы исправить это, вы можете вложить стили начальной загрузки в родительский класс или другой селектор, чтобы вызывать стили таблицы начальной загрузки только при необходимости.
Таким образом, у вас есть возможность использовать классы только при необходимости. Вы увидите, что я использую http://zurb.com/отличную адаптивную библиотеку электронной почты. Смотрите такжеhttp://zurb.com/ink/
Наконец, используйте предварительную рассылку, подобную https://github.com/fphilipe/premailer-rails3упомянутой выше, для преобразования стиля во встроенный CSS, компилируя встроенные стили только для того, что используется в этом конкретном шаблоне электронной почты. Например, для premailer ваш рубиновый файл может выглядеть примерно так, чтобы скомпилировать электронное письмо во встроенном стиле.
require 'rubygems' # optional for Ruby 1.9 or above.
require 'premailer'
premailer = Premailer.new('http://www.yourdomain.com/TestSnap/view/emailTemplates/DeliveryReport.jsp', :warn_level => Premailer::Warnings::SAFE)
# Write the HTML output
File.open("delivery_report.html", "w") do |fout|
fout.puts premailer.to_inline_css
end
# Write the plain-text output
File.open("output.txt", "w") do |fout|
fout.puts premailer.to_plain_text
end
# Output any CSS warnings
premailer.warnings.each do |w|
puts "#{w[:message]} (#{w[:level]}) may not render properly in #{w[:clients]}"
end
Надеюсь это поможет! Я изо всех сил пытался найти гибкую структуру шаблонов электронной почты для Pardot, Salesforce и встроенных в наш продукт автоответчиков и ежедневных электронных писем.
Уловка здесь в том, что вы не хотите включать весь бутстрап. Проблема в том, что почтовые клиенты будут игнорировать медиа-запросы и обрабатывать все стили печати, в которых есть много важных утверждений.
Вместо этого вам нужно включить только определенные части начальной загрузки, которые вам нужны. Мой файл email.css.scss выглядит так:
@import "bootstrap-sprockets";
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/buttons";
@import "bootstrap/alerts";
@import 'bootstrap/normalize';
@import 'bootstrap/tables';
А как насчет электронной почты Bootstrap? Это кажется действительно хорошим и совместимым с bootstrap 4.