premailer-rails3Html e-postaları için satır içi stilleri çeken mücevher kullanıyorum ve Twitter önyükleme ile çalışmasını sağlamaya çalışıyorum.
https://github.com/fphilipe/premailer-rails3
Görünüşe göre bazı tarzlar doğru geliyor ama hepsi değil. Herkesin Twitter Bootstrap css'lerini (değiştirilmiş veya değiştirilmemiş) html e-postasına alma konusunda güzel bir örnek olup olmadığını merak ediyorum.
Teşekkürler!
Yanıtlar:
"Bir e-postada Bootstrap'in stilistik sunumunu kullanabilir miyim?" o zaman yapabilirsiniz, ancak henüz bunu yapan kimseyi tanımıyorum. Yine de tablolardaki her şeyi yeniden kodlamanız gerekecek.
İşlevselliğin peşindeyseniz, e-postalarınızın nerede görüntülendiğine bağlıdır. Kullanıcılarınızın önemli bir kısmı Outlook, Gmail, Yahoo veya Hotmail kullanıyorsa (ve bunlar genellikle e-posta istemcilerinin yaklaşık% 75'ini oluştururlarsa), Bootstrap'in pek çok faydası mümkün değildir. Android'de Mac Mail, iOS Mail ve Gmail, CSS oluşturmada çok daha iyidir, bu nedenle çoğunlukla mobil cihazları hedefliyorsanız, o kadar da kötü değil.
font-face- yalnızca harici resimleri kullanabilirsiniz. Diğer tüm harici kaynaklar (CSS dosyaları, yazı tipleri) hariçtir.:hover, :activedurumlar ayrı ayrı biçimlendirilemezOrada olan yükler arasında cevapları üzerinde SO, ve genel olarak internette diğer bağlantıların çok.
Bu eski diziyi yeniden kurduğum için özür dilerim, ancak herkesin e-posta stili için özel olarak oluşturulmuş CSS çerçevesi gibi çok yakın bir Bootstrap olduğunu bilmesini istedim, işte bağlantı: http://zurb.com/ink/
Umarım birine yardımcı olur.
Ninja düzenlemesi: O zamandan beri olarak yeniden adlandırıldı Foundation for Emailsve yeni bağlantı: https://foundation.zurb.com/emails.html
Sessiz ama ölümcül düzenleme: Yeni bağlantı https://get.foundation/emails.html
İşte e-postayla yapamayacağınız birkaç şey:
- Stiller içeren bir bölüm ekleyin . Apple Mail.app bunu destekliyor, ancak Gmail ve Hotmail desteklemiyor, bu yüzden hayır-hayır. Hotmail, gövde içinde bir stil bölümünü destekleyecek, ancak Gmail yine de desteklemiyor.
- Harici bir stil sayfasına bağlantı. Pek çok e-posta istemcisi bunu desteklemiyor, en iyisi unutmak.
- Arka plan görüntüsü / Arka plan konumu. Gmail aynı zamanda bunun suçlusu.
- Şamandıralarınızı temizleyin . Tekrar Gmail.
- Marj . Evet, cidden, Hotmail kenar boşluklarını görmezden geliyor. Temelde herhangi bir CSS konumlandırması hiç çalışmıyor.
- Yazı tipi her şey . Muhtemelen Eudora yazı tipleriyle bildirmeye çalıştığınız her şeyi görmezden gelecektir.
Kaynak: http://css-tricks.com/using-css-in-html-emails-the-real-story/
Mailchimp, kullanabileceğiniz e-posta şablonlarına sahiptir - burada
Size yardımcı olacak birkaç kaynak daha
font-sizesize çok düşük bir maliyetle daha fazla esneklik sağlar.
E-postanızı b-çemberlemek için bu https://github.com/advancedrei/BootstrapForEmail'i kullanabilirsiniz .
Son zamanlarda html e-posta şablonları oluşturmak için biraz zaman harcadım, bulduğum en iyi çözüm bu http://htmlemailboilerplate.com/ kullanmaktı . O zamandan beri oldukça karmaşık 3 şablon oluşturdum ve çeşitli e-posta istemcilerinde iyi çalıştılar.
Merhaba Brian Armstrong ，bu bağlantıyı ziyaret edin .
Bu blog nasıl entegre anlatır Rails ile Bootstrap az (premailer-raylar kullanarak).
Bootstrap sass kullanıyorsanız, aynısını yapabilirsiniz:
bazı Bootstrap sass dosyalarını email.css.scss'e aktararak başlayın
@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';
ve sonra görünüm <head>bölümünüze ekleyin
<%= stylesheet_link_tag "email" %>
Bulduğum en iyi yaklaşım, önyükleme (veya başka herhangi bir) stillerinizi ihtiyaç duyulabilecek şekilde e-postalara çekmek için Sass içe aktarımlarını belirli bir temelde kullanmaktır.
İlk olarak, email.scsse-posta stilinize benzer bir şekilde yeni bir scss ana dosyası oluşturun . Bu şöyle görünebilir:
// 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";
Ardından, e-posta şablonlarınızda, yalnızca e-posta.scss'de uygun şekilde referans verilen ve iç içe geçmiş seçili önyükleme stillerini içeren derlenmiş e-posta.css dosyasına bakın.
Örneğin, belirli önyükleme stilleri Zurb'un duyarlı tablo stiliyle çakışacaktır. Bunu düzeltmek için, bootstrap'in tablo stillerini yalnızca gerektiğinde çağırmak için bootstrap stillerini bir üst sınıf veya başka bir seçici içine yerleştirebilirsiniz.
Bu şekilde, yalnızca ihtiyaç duyulduğunda ders alma esnekliğine sahip olursunuz. Kullanmak http://zurb.com/için harika bir yanıt veren e-posta kitaplığı olanı kullandığımı göreceksiniz . Ayrıca bakınızhttp://zurb.com/ink/
Son olarak, https://github.com/fphilipe/premailer-rails3stili satır içi css olarak işlemek, satır içi stilleri yalnızca belirli e-posta şablonunda kullanılanlara göre derlemek için yukarıda bahsedildiği gibi bir ön-posta yazıcısı kullanın . Örneğin, premailer için, ruby dosyanız bir e-postayı satır içi stilde derlemek için böyle bir şeye benzeyebilir.
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
Bu yardımcı olur umarım! Pardot, Salesforce ve ürünümüzün yerleşik otomatik yanıt ve günlük e-postalarında esnek bir e-posta şablonlama çerçevesi bulmakta zorlandık.
Buradaki hile, tüm önyüklemeyi dahil etmek istememenizdir. Sorun, e-posta istemcilerinin medya sorgularını görmezden gelmesi ve çok sayıda önemli ifadeye sahip tüm baskı stillerini işlemesidir.
Bunun yerine, yalnızca ihtiyacınız olan belirli önyükleme parçalarını eklemeniz gerekir. Email.css.scss dosyam şöyle görünüyor:
@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 E-postası ne olacak ? Bu gerçekten güzel ve bootstrap 4 ile uyumlu görünüyor.