Quelqu'un a-t-il déjà reçu des courriels HTML avec Twitter Bootstrap?
J'utilise le premailer-Rails3 gem qui tire les styles en ligne pour les emails HTML, et j'essaie de le faire fonctionner avec Twitter Bootstrap.
https://github.com/fphilipe/premailer-Rails
Il semble que certains styles entrent correctement, mais pas tous. Je me demande si quelqu'un a un bon exemple de travail consistant à obtenir son Twitter Bootstrap css (modifié ou non) dans un courrier électronique html.
Merci!
Si vous voulez dire "Puis-je utiliser la présentation stylistique de Bootstrap dans un courrier électronique?"), Alors vous pouvez le faire, même si je ne connais personne qui l'ait déjà fait. Vous devrez tout recoder dans les tableaux cependant.
Si vous recherchez la fonctionnalité, cela dépend de l'endroit où vos courriels sont affichés. Si une proportion importante de vos utilisateurs se trouve sur Outlook, Gmail, Yahoo ou Hotmail (et qu’ils totalisent généralement environ 75% des clients de messagerie), une grande partie des avantages de Bootstrap n’est pas possible. Mac Mail, iOS Mail et Gmail sur Android sont beaucoup plus performants en rendu CSS, donc si vous ciblez principalement des appareils mobiles, ce n'est pas si grave.
- JavaScript - complètement hors limites. Si vous essayez, vous irez probablement directement au courrier électronique (dossier de courrier indésirable a.k.a.). Cela signifie que LESS est également hors limites, bien que vous puissiez évidemment utiliser les styles CSS résultants si vous le souhaitez.
- CSS en ligne est beaucoup plus sûr à utiliser que tout autre type de CSS (incorporé est possible, lié est un non définitif). Les requêtes de médias sont possibles, vous pouvez donc avoir une sorte de conception réactive. Cependant, il existe une longue liste d'attributs CSS qui ne fonctionnent pas - essentiellement, le modèle de boîte est en grande partie non pris en charge dans les clients de messagerie. Vous devez tout structurer avec des tables.
font-face- vous ne pouvez utiliser que des images externes. Toutes les autres ressources externes (fichiers CSS, polices) sont exclues.- glyphes et sprites - en raison de l'implémentation étrange des images de fond (VML) dans Outlook 2007, vous ne pouvez pas utiliser la répétition de fond ni la position.
- les pseudo-sélecteurs ne sont pas possibles - par ex.
:hover,:activeles états ne peuvent pas être stylés séparément
Il y a sontchargesofréponseson SO, et plein d'autres liens sur le Internet en général.
Je m'excuse d’avoir rétabli ce vieux fil de discussion, mais je voulais simplement que tout le monde sache qu’il existe un très proche Bootstrap comme un framework CSS spécifiquement créé pour le style des emails, voici le lien: http : //zurb.com/ink/
J'espère que ça aide quelqu'un.
Ninja edit: Il a depuis été renommé en Foundation for Emails et le nouveau lien est: https://foundation.zurb.com/emails.html
Voici quelques choses que vous ne pouvez pas faire avec le courrier électronique:
- Inclut une section avec des styles . Apple Mail.app le prend en charge, mais pas Gmail ni Hotmail; il s'agit donc d'un no-no. Hotmail prend en charge une section de style dans le corps, mais Gmail ne le fait toujours pas.
- Lien vers une feuille de style externe. Peu de clients de messagerie électronique le prennent en charge, il est préférable de l’oublier.
- Background-image/Background-position. Gmail est également le coupable de ce problème.
- Effacez vos flotteurs . Gmail à nouveau.
- Marge . Oui, sérieusement, Hotmail ignore les marges. En gros, tout positionnement CSS ne fonctionne pas.
- Font-n'importe quoi . Il est fort probable qu'Eudora ignore tout ce que vous essayez de déclarer avec les polices.
Source: http://css-tricks.com/using-css-in-html-emails-the-real-story/
Mailchimp a des modèles de courrier électronique que vous pouvez utiliser - here
Quelques ressources supplémentaires qui devraient vous aider
Vous pouvez utiliser ceci https://github.com/advancedrei/BootstrapForEmail pour b-strapping de votre courrier électronique.
Bonjour Brian Armstrong visitez ce lien .
Ce blog vous explique comment intégrer Rails à Bootstrap moins (avec premailer -Des rails).
Si vous utilisez bootstrap sass, vous pouvez faire la même chose:
commencez par importer des fichiers Bootstrap sass dans e-mail.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';
et ensuite à votre avis <head> section ajouter <%= stylesheet_link_tag "email" %>
J'ai récemment passé un peu de temps à chercher dans la création de modèles d'e-mails html. La meilleure solution que j'ai trouvée consistait à utiliser ceci http://htmlemailboilerplate.com/ . Depuis, j'ai construit 3 modèles assez complexes et ils ont bien fonctionné dans les différents clients de messagerie.
Le truc ici est que vous ne voulez pas inclure tout le bootstrap. Le problème est que les clients de messagerie ignorent les requêtes multimédia et traitent tous les styles d'impression comportant de nombreuses déclarations importantes.
Au lieu de cela, vous devez uniquement inclure les parties spécifiques de bootstrap dont vous avez besoin. Mon fichier email.css.scss ressemble à ceci:
@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';
Qu'en est-il de Email Bootstrap? Cela semble vraiment sympa et compatible avec bootstrap 4.
La meilleure approche que j'ai proposée consiste à utiliser les importations Sass sur une base sélectionnée pour extraire vos styles bootstrap (ou tout autre)) dans les courriers électroniques selon les besoins.
Tout d’abord, créez un nouveau fichier parent scss de type email.scss pour votre style de messagerie. Cela pourrait ressembler à ceci:
// 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";
Ensuite, dans vos modèles de courrier électronique, faites uniquement référence à votre fichier email.css compilé, qui ne contient que les styles sélectionnés bootstrap) référencés et imbriqués correctement dans votre email.scss.
Par exemple, certains styles bootstrap seront en conflit avec le style de tableau réactif de Zurb. Pour résoudre ce problème, vous pouvez imbriquer les styles de bootstrap dans une classe parent ou dans un autre sélecteur afin d'appeler les styles de tableau de bootstrap uniquement lorsque cela est nécessaire.
De cette façon, vous avez la possibilité d’inscrire les cours en cas de besoin. Vous verrez que j'utilise http://zurb.com/ qui est une excellente bibliothèque de messagerie réactive à utiliser. Voir également http://zurb.com/ink/
Enfin, utilisez un premailer comme https://github.com/fphilipe/premailer-Rails3 mentionné ci-dessus pour traiter le style en css en ligne, en compilant les styles en ligne uniquement à ce qui est utilisé dans ce modèle de courrier électronique particulier. Par exemple, pour premailer, votre fichier Ruby pourrait ressembler à cela pour compiler un courrier électronique dans un style incorporé.
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
J'espère que cela t'aides! Vous avez eu du mal à trouver un framework de modèles de messagerie flexible à travers Pardot, Salesforce, ainsi que la réponse automatique et les emails quotidiens intégrés de notre produit.