Я использую premailer-rails3 gem, который тянет стили inline для 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
Вот несколько вещей, которые вы не можете сделать с электронной почтой:
- Включить раздел со стилями. Apple Mail.app поддерживает его, но Gmail и Hotmail этого не делают, поэтому нет-нет. Hotmail будет поддерживать раздел стиля в теле, но Gmail до сих пор этого не делает.
- Ссылка на внешнюю таблицу стилей. Не многие клиенты электронной почты поддерживают это, лучше всего просто забыть об этом.
- Фоновое изображение/Фоновая позиция. Gmail также является виновником этого.
- Очистите ваши поплавки. Gmail снова.
- Margin. Да, серьезно, Hotmail игнорирует поля. В принципе, любое позиционирование CSS вообще не работает.
- Font-нибудь. Скорее всего, Eudora проигнорирует все, что вы пытаетесь объявить с помощью шрифтов.
Источник: http://css-tricks.com/using-css-in-html-emails-the-real-story/
В Mailchimp есть шаблоны для электронной почты, которые вы можете использовать - здесь
Еще несколько ресурсов, которые помогут вам
Вы можете использовать этот https://github.com/advancedrei/BootstrapForEmail для b-привязки вашей электронной почты.
Я потратил некоторое время на изучение шаблонов электронной почты html, лучшим решением, которое я нашел, было использование http://htmlemailboilerplate.com/. С тех пор я создал 3 довольно сложных шаблона, и они хорошо работали в разных почтовых клиентах.
Привет Брайан Армстронг, посетите эту ссылку.
В этом блоге рассказывается, как интегрировать Rails с Bootstrap меньше (с использованием предварительных рельсов).
Если вы используете bootstrap sass, вы можете сделать то же самое:
начните с импорта некоторых файлов Bootstrap sass в файл 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, упомянутый выше, для обработки стиля в inline css, скомпилирования встроенных стилей только для того, что используется в этом конкретном шаблоне электронной почты. Например, для premailer ваш ruby файл может выглядеть примерно так, чтобы скомпилировать электронную почту в встроенный стиль.
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 Email? Это кажется действительно хорошим и совместимым с начальной загрузкой 4.