Sto usando il premailer-rails3 gemma che inserisce gli stili in linea per le e-mail html e sto cercando di farlo funzionare con il bootstrap di Twitter.
https://github.com/fphilipe/premailer-rails3
Sembra che alcuni stili entrino correttamente, ma non tutti. Mi chiedo se qualcuno abbia un bell'esempio funzionante di come ottenere il proprio css Bootstrap Twitter (modificato o meno) in un'e-mail html.
Grazie!
Risposte:
Se intendi "Posso usare la presentazione stilistica di Bootstrap in un'email?" allora puoi, anche se non conosco nessuno che l'abbia ancora fatto. Tuttavia, dovrai ricodificare tutto nelle tabelle.
Se stai cercando la funzionalità, dipende da dove vengono visualizzate le tue email. Se una percentuale significativa dei tuoi utenti è su Outlook, Gmail, Yahoo o Hotmail (e questi in genere si sommano fino a circa il 75% dei client di posta elettronica), non è possibile sfruttare gran parte della bontà di Bootstrap. Mac Mail, iOS Mail e Gmail su Android sono molto più bravi nel rendering CSS, quindi se ti rivolgi principalmente ai dispositivi mobili non è poi così male.
font-face- puoi usare solo immagini esterne. Tutte le altre risorse esterne (file CSS, caratteri) sono escluse.:hover, gli :activestati non possono essere stilizzati separatamenteCi sono un sacco di risposte su SO e molti altri collegamenti su Internet in generale.
Mi scuso per aver ripristinato questo vecchio thread, ma volevo solo far sapere a tutti che esiste un Bootstrap molto vicino come il framework CSS creato appositamente per lo stile delle email, ecco il link: http://zurb.com/ink/
Spero che aiuti qualcuno.
Modifica Ninja: da allora è stato rinominato Foundation for Emailse il nuovo collegamento è: https://foundation.zurb.com/emails.html
Ecco alcune cose che non puoi fare con la posta elettronica:
- Includi una sezione con gli stili . Apple Mail.app lo supporta, ma Gmail e Hotmail no, quindi è un no-no. Hotmail supporterà una sezione di stile nel corpo, ma Gmail ancora no.
- Collegamento a un foglio di stile esterno. Non molti client di posta lo supportano, meglio dimenticarlo.
- Background-image / Background-position. Gmail è anche il colpevole di questo.
- Cancella i tuoi galleggianti . Di nuovo Gmail.
- Margine . Sì, seriamente, Hotmail ignora i margini. Fondamentalmente qualsiasi posizionamento CSS non funziona.
- Carattere qualsiasi cosa . È probabile che Eudora ignorerà qualsiasi cosa tu provi a dichiarare con i caratteri.
Fonte: http://css-tricks.com/using-css-in-html-emails-the-real-story/
Mailchimp ha modelli di email che puoi utilizzare - qui
Alcune risorse in più che dovrebbero aiutarti
font-sizeti offre una maggiore flessibilità a un costo minimo.
Puoi usare questo https://github.com/advancedrei/BootstrapForEmail per b-strapping la tua email.
Recentemente ho passato un po 'di tempo a creare modelli di email html, la migliore soluzione che ho trovato è stata quella di utilizzare questo http://htmlemailboilerplate.com/ . Da allora ho creato 3 modelli piuttosto complessi e hanno funzionato bene nei vari client di posta elettronica.
Ciao Brian Armstrong, visita questo link .
Questo blog ti spiega come integrare Rails con Bootstrap less (usando premailer-rails).
Se stai usando bootstrap sass, potresti fare lo stesso:
inizia importando alcuni file Bootstrap sass in 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';e poi nella tua <head>sezione di visualizzazione aggiungi
<%= stylesheet_link_tag "email" %>
L'approccio migliore che ho trovato è utilizzare le importazioni Sass su una base selezionata per inserire i tuoi stili di bootstrap (o qualsiasi altro) nelle e-mail come potrebbe essere necessario.
Innanzitutto, crea un nuovo file principale scss simile email.scssal tuo stile di posta elettronica. Questo potrebbe assomigliare a questo:
// 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";Quindi, nei tuoi modelli di email, fai riferimento solo al tuo file email.css compilato, che contiene solo gli stili di bootstrap selezionati referenziati e nidificati correttamente nel tuo email.scss.
Ad esempio, alcuni stili di bootstrap entreranno in conflitto con lo stile di tabella reattivo di Zurb. Per risolvere questo problema, puoi annidare gli stili di bootstrap all'interno di una classe genitore o di un altro selettore per chiamare gli stili di tabella di bootstrap solo quando necessario.
In questo modo, hai la flessibilità di inserire le lezioni solo quando necessario. Vedrai che uso http://zurb.com/che è un'ottima libreria di posta elettronica reattiva da utilizzare. Guarda anchehttp://zurb.com/ink/
Infine, usa un premailer come https://github.com/fphilipe/premailer-rails3menzionato sopra per elaborare lo stile in CSS inline, compilando gli stili inline solo per ciò che viene utilizzato in quel particolare modello di email. Ad esempio, per il premailer, il tuo file ruby potrebbe assomigliare a questo per compilare un'e-mail in stile inline.
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]}"
endSpero che questo ti aiuti! Ho faticato a trovare un framework flessibile per la creazione di modelli di posta elettronica in Pardot, Salesforce e nella risposta automatica e nelle e-mail giornaliere integrate del nostro prodotto.
Il trucco qui è che non vuoi includere l'intero bootstrap. Il problema è che i client di posta elettronica ignoreranno le media query ed elaboreranno tutti gli stili di stampa che hanno molte! Importanti dichiarazioni.
Invece, devi includere solo le parti specifiche di bootstrap di cui hai bisogno. Il mio file email.css.scss ha questo aspetto:
@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';E l'e -mail Bootstrap? Questo sembra davvero carino e compatibile con bootstrap 4.