Quelqu'un a-t-il reçu des e-mails HTML fonctionnant avec Twitter Bootstrap?

J'utilise le premailer-rails3gem qui extrait les styles en ligne pour les e-mails html, et j'essaie de le faire fonctionner avec le bootstrap de Twitter.

https://github.com/fphilipe/premailer-rails3

Il semble que certains styles entrent correctement, mais pas tous. Je me demande si quelqu'un a un bel exemple de travail pour obtenir son css Twitter Bootstrap (modifié ou non) dans un e-mail html.

Merci!

Si vous voulez dire "Puis-je utiliser la présentation stylistique de Bootstrap dans un e-mail?" alors vous pouvez, bien que je ne connaisse personne qui l'ait encore fait. Vous devrez cependant tout recoder dans les tableaux.

Si vous recherchez la fonctionnalité, cela dépend de l'endroit où vos e-mails sont consultés. Si une proportion significative de vos utilisateurs utilise Outlook, Gmail, Yahoo ou Hotmail (et cela représente généralement environ 75% des clients de messagerie), alors les bienfaits de Bootstrap ne sont pas possibles. Mac Mail, iOS Mail et Gmail sur Android sont bien meilleurs pour le rendu CSS, donc si vous ciblez principalement les appareils mobiles, ce n'est pas si mal.

• JavaScript - complètement hors limites. Si vous essayez, vous irez probablement directement à l'enfer des e-mails (alias dossier spam). Cela signifie que LESS est également hors limites, bien que vous puissiez évidemment utiliser les styles CSS résultants si vous le souhaitez.
• Le CSS en ligne est beaucoup plus sûr à utiliser que tout autre type de CSS (intégré est possible, lié est un non définitif). Les requêtes multimé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 n'est en grande partie pas pris en charge dans les clients de messagerie. Vous devez tout structurer avec des tableaux.
• font-face- vous ne pouvez utiliser que des images externes. Toutes les autres ressources externes (fichiers CSS, polices) sont exclues.
• glyphes et sprites - à cause de l'implémentation étrange d'Outlook 2007 des images d'arrière-plan (VML), vous ne pouvez pas utiliser background-repeat ou position.
• les pseudo-sélecteurs ne sont pas possibles - par exemple :hover, les :activeétats ne peuvent pas être stylisés séparément

Il y a beaucoup de réponses sur SO, et beaucoup d'autres liens sur Internet en général.

• http://www.email-standards.org/
• http://htmlemailboilerplate.com/
• http://www.campaignmonitor.com/css/

Je m'excuse d'avoir ressuscité ce vieux fil de discussion, mais je voulais juste que tout le monde sache qu'il existe un cadre Bootstrap très proche comme CSS spécialement créé pour le style des e-mails, voici le lien: http://zurb.com/ink/

J'espère que ça aide quelqu'un.

Ninja edit: Il a depuis été renommé Foundation for Emailset le nouveau lien est: https://foundation.zurb.com/emails.html

Voici quelques choses que vous ne pouvez pas faire avec le courrier électronique:

• Incluez une section avec des styles . Apple Mail.app le prend en charge, mais pas Gmail et Hotmail, c'est donc un non-non. Hotmail prendra 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 prennent en charge cela, mieux vaut simplement l'oublier.
• Image d'arrière-plan / Position d'arrière-plan. Gmail est également le coupable de celui-ci.
• Nettoyez vos flotteurs . Gmail à nouveau.
• Marge . Oui, sérieusement, Hotmail ignore les marges. Fondamentalement, aucun positionnement CSS ne fonctionne du tout.
• Police-n'importe quoi . Il y a de fortes chances 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 propose des modèles d'e-mails que vous pouvez utiliser - ici

Quelques ressources supplémentaires qui devraient vous aider

• Meilleures pratiques pour la mise en forme des e-mails HTML
• Styliser le HTML dans les e-mails
• Style de messagerie HTML pour Gmail

Vous pouvez utiliser ce https://github.com/advancedrei/BootstrapForEmail pour b-strapping votre e-mail.

J'ai récemment passé du temps à chercher à créer des modèles d'e-mails html, la meilleure solution que j'ai trouvée était d'utiliser ce http://htmlemailboilerplate.com/ . Depuis, j'ai construit 3 modèles assez complexes et ils ont bien fonctionné dans les différents clients de messagerie.

Salut Brian Armstrong, visitez ce lien .

Ce blog vous explique comment intégrer Rails avec Bootstrap less (en utilisant des rails premailer).

Si vous utilisez bootstrap sass, vous pouvez faire de même:

commencez par importer des fichiers Bootstrap sass dans 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';

puis dans votre <head>section vue , ajoutez <%= stylesheet_link_tag "email" %>

La meilleure approche que j'ai proposée est d'utiliser les importations Sass sur une base sélectionnée pour extraire vos styles de bootstrap (ou tout autre) dans les e-mails si nécessaire.

Tout d'abord, créez un nouveau fichier parent scss, quelque chose comme email.scsspour votre style d'e-mail. 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, ne faites référence qu'à votre fichier email.css compilé, qui ne contient que les styles d'amorçage sélectionnés référencés et correctement imbriqués dans votre email.scss.

Par exemple, certains styles de bootstrap entreront en conflit avec le style de table responsive de Zurb. Pour résoudre ce problème, vous pouvez imbriquer les styles de bootstrap dans une classe parente ou un autre sélecteur afin d'appeler les styles de table de bootstrap uniquement lorsque cela est nécessaire.

De cette façon, vous avez la possibilité de tirer des classes uniquement lorsque cela est nécessaire. Vous verrez que j'utilise http://zurb.com/ce qui est une excellente bibliothèque de messagerie réactive à utiliser. Voir égalementhttp://zurb.com/ink/

Enfin, utilisez un pré-envoi comme https://github.com/fphilipe/premailer-rails3mentionné ci-dessus pour traiter le style en css en ligne, en compilant les styles en ligne uniquement avec ce qui est utilisé dans ce modèle de courrier électronique particulier. Par exemple, pour le pré-envoi, votre fichier ruby ​​pourrait ressembler à ceci pour compiler un e-mail dans un style en ligne.

    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! J'ai eu du mal à trouver un cadre de création de modèles d'e-mails flexible dans Pardot, Salesforce et la réponse automatique intégrée et les e-mails quotidiens de notre produit.

L'astuce 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édias et traitent tous les styles d'impression qui contiennent 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 des e-mails Bootstrap? Cela semble vraiment sympa et compatible avec bootstrap 4.