web-dev-qa-db-ja.com

Twitter BootstrapでHTMLメールを受け取った人はいますか？

HTMLメールのスタイルをインラインで取得するpremailer-Rails3 gemを使用しています。Twitterブートストラップで動作させようとしています。

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

一部のスタイルは正しく入っているように見えますが、すべてではありません。 Twitter Bootstrap css（変更されているかどうかに関係なく）をhtml電子メールに変換するニースの実例があるのか​​と思います。

ありがとう！

htmltwitter-bootstraphtml-email
87
Brian Armstrong

「メールでBootstrapの文体的なプレゼンテーションを使用できますか？」できますが、私はまだそれをやった人を知りません。ただし、テーブル内のすべてを再コーディングする必要があります。

機能を使用する場合は、メールの表示場所によって異なります。ユーザーのかなりの割合がOutlook、Gmail、Yahoo、またはHotmailを使用している場合（通常、これらは合計でメールクライアントの約75％を占める）、Bootstrapの優れた機能の多くは使用できません。 AndroidのMac Mail、iOS Mail、GmailはCSSのレンダリングがはるかに優れているため、主にモバイルデバイスをターゲットにしている場合、それほど悪くはありません。

  • JavaScript-完全に立ち入り禁止。試してみると、おそらく地獄に直接メールを送信します（スパムフォルダー）これは、必要に応じて結果のCSSスタイルを使用できることは明らかですが、LESSも範囲外であることを意味します。
  • インラインCSSは、他のどのタイプのCSSよりも使用する方がはるかに安全です（埋め込みは可能ですが、リンクは明確にノーです）。メディアクエリが可能であるため、ある種のレスポンシブデザインを作成できます。ただし、動作しないCSS属性の長いリストがあります-基本的に、ボックスモデルは電子メールクライアントではほとんどサポートされていません。すべてをテーブルで構成する必要があります。
  • font-face-外部画像のみを使用できます。他のすべての外部リソース（CSSファイル、フォント）は除外されます。
  • グリフとスプライト-Outlook 2007の背景画像（VML）の奇妙な実装のため、背景の繰り返しまたは位置を使用できません。
  • 疑似セレクターは使用できません-例:hover、:active状態は個別にスタイル設定できません

そこに areloadsofanswerson SO、および上の他の多くのリンクインターネット全般。

78
Dan Blows

この古いスレッドを復活させたことをおaび申し上げますが、メールスタイリング用に特別に作成されたCSSフレームワークのような非常に近いBootstrapがあることを皆さんに知らせたかっただけです。ここにリンクがあります： http：// zurb.com/ink/

それが誰かを助けることを願っています。

Ninja edit：以降、Foundation for Emailsに名前が変更され、新しいリンクは https：//foundation.zurb。 com/emails.html

41
adamj

メールでできないことは次のとおりです。

  • スタイルを含むセクションを含める。 Apple Mail.appはこれをサポートしていますが、GmailとHotmailはサポートしていないため、ノーです。 Hotmailは本文のスタイルセクションをサポートしますが、Gmailはまだサポートしていません。
  • 外部スタイルシートへのリンク。多くの電子メールクライアントはこれをサポートしていません。忘れてください。
  • Background-image/Background-position。Gmailもこの問題の犯人です。
  • フロートをクリアします。再びGmail。
  • マージン。はい、真剣に、Hotmailはマージンを無視します。基本的に、CSSのポジショニングはまったく機能しません。
  • Font-anything。 Eudoraは、フォントで宣言しようとするものをすべて無視する可能性があります。

ソース： http://css-tricks.com/using-css-in-html-emails-the-real-story/

Mailchimpには、使用できるメールテンプレートがあります- here

あなたを助けるべきいくつかのリソース

16
Elvis D'Souza

これを使用できます https://github.com/advancedrei/BootstrapForEmail メールをb-strappingします。

10
Viktorminator

こんにちは、ブライアンアームストロング、 このリンク をご覧ください。

このブログでは、RailsとBootstrapless（premailerを使用）を統合する方法を説明します-レール）。

bootstrap sassを使用している場合、同じことができます。

まず、いくつかのBootstrap sassファイルを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" %>を追加します

1
Shurui Yang

最近、HTMLメールテンプレートの構築にしばらく時間を費やしました。私が見つけた最良の解決策は、これを使用することでした http://htmlemailboilerplate.com/ 。それ以来、私は3つの非常に複雑なテンプレートを作成し、さまざまな電子メールクライアントでうまく機能しました。

1
MattyHarris

ここでの秘Theは、ブートストラップ全体を含めたくないということです。問題は、電子メールクライアントがメディアクエリを無視し、！importantステートメントが多いすべての印刷スタイルを処理することです。

代わりに、必要な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';
0
gabeodess

Bootstrap Email？ これは本当にすてきで、bootstrap 4と互換性があるようです。

0
Lingasamy Sakthivel

私が思いついた最善のアプローチは、必要に応じてbootstrap（またはその他の）スタイルを電子メールに取り込むために、選択されたベースでSassインポートを使用することです。

最初に、メールスタイルに合わせてemail.scssのような新しい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で適切に参照およびネストされた選択されたbootstrapスタイルのみが含まれます。

たとえば、特定のbootstrapスタイルは、Zurbのレスポンシブテーブルスタイルと競合します。これを修正するには、親クラスまたは他のセレクタ内にブートストラップのスタイルをネストして、必要な場合にのみブートストラップのテーブルスタイルを呼び出すことができます。

これにより、必要なときにのみクラスをプルできる柔軟性が得られます。 http://zurb.com/を使用していることがわかります。これは、使用するのに優れた応答性の高いメールライブラリです。 http://zurb.com/ink/も参照してください

最後に、上記のhttps://github.com/fphilipe/premailer-Rails3などのプリメーラーを使用してスタイルをインラインcssに処理し、特定の電子メールテンプレートで使用されているものだけにインラインスタイルをコンパイルします。たとえば、プリメーラーの場合、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、および製品に組み込まれている自動応答および毎日のメールで、柔軟なメールテンプレートフレームワークを見つけるのに苦労しています。

0
Ryan Walton