Я використовую 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
Ось кілька речей, які ви не можете робити з електронною поштою:
- Включіть розділ зі стилями . 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 менше (використовуючи rajma 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 на вибраній основі, щоб втягнути ваш стилі bootstrap (або будь-який інший) в електронні листи, якщо це буде потрібно.
Спочатку створіть новий батьківський файл 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. Щоб це виправити, ви можете вкласти стилі bootstrap у батьківський клас або інший селектор, щоб викликати стилі таблиці bootstrap лише за потреби.
Таким чином, ви можете гнучко навчатись лише тоді, коли це потрібно. Ви побачите, що я використовую, http://zurb.com/що є чудовою адаптивною бібліотекою електронної пошти для використання. Дивитися такожhttp://zurb.com/ink/
Нарешті, використовуйте попередній засіб, як https://github.com/fphilipe/premailer-rails3згадано вище, для обробки стилю у вбудований 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? Здається, це дуже приємно і сумісно з bootstrap 4.