Кто-нибудь получил HTML-письма, работающие с Twitter Bootstrap?

Я прошу прощения за восстановление этой старой темы, но я просто хотел, чтобы все знали, что есть очень близкий Bootstrap, такой как CSS framework, специально созданный для стилизации электронной почты, вот ссылка:http://zurb.com/ink/

надеюсь, что это поможет кому-то.

Ninja edit: С тех пор он был переименован в Foundation for Emails и новая ссылка:https://foundation.zurb.com/emails.html

вот несколько вещей, которые вы не можете делать с электронной почтой:

• включить раздел со стилями. Apple Mail.приложение поддерживает его, но Gmail и Hotmail этого не делают, так что это нет-нет. На Hotmail будет поддерживать раздел стиля в теле, но Gmail по-прежнему не делает.
• ссылка на внешнюю таблицу стилей. не многие почтовые клиенты поддерживают это, лучше просто забыть об этом.
• фон-изображение / Фон-положение. Gmail также является виновником на этом.
• очистить поплавки. Снова Gmail.
• рентабельность. Да, серьезно, Hotmail игнорирует поля. В принципе любое позиционирование CSS вообще не работает.
• шрифт-ничего. Скорее всего, Eudora будет игнорировать все, что вы пытаетесь объявить со шрифтами.

источник: http://css-tricks.com/using-css-in-html-emails-the-real-story/

Mailchimp имеет шаблоны электронной почты, которые вы можете использовать -здесь

еще несколько ресурсов, которые должны помочь вам

• рекомендации по стилизации HTML-писем
• стиль html в электронной почте
• стиль HTML электронной почты для Gmail

вы можете использовать это https://github.com/advancedrei/BootstrapForEmail для b-обвязки вашей электронной почты.

недавно я потратил некоторое время на создание шаблонов электронной почты html, лучшим решением, которое я нашел, было использовать это http://htmlemailboilerplate.com/. с тех пор я построил 3 довольно сложных шаблона, и они хорошо работали в различных почтовых клиентах.

Привет Брайан Армстронг, посетите этой ссылке.

этот блог рассказывает вам, как интегрировать рейлинги С Bootstrap меньше (используя premailer-rails).

Если вы используете bootstrap sass, вы можете сделать то же самое:

начните с импорта некоторых загрузочных файлов sass в электронную почту.стиль CSS.СКС

@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';

а потом на ваш взгляд добавить <%= stylesheet_link_tag "email" %>

лучший подход, который я придумал, - это использовать импорт Sass на выбранной основе, чтобы вытащить ваши стили bootstrap (или любые другие) в электронные письма, которые могут потребоваться.

во-первых, создайте новый родительский файл scss что-то вроде email.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";

затем в шаблонах электронной почты, только ссылаться на скомпилированную электронную почту.css-файл, который содержит только выбранные стили начальной загрузки, на которые ссылаются и которые правильно вложены в ваш электронная почта.СКС.

например, некоторые стили начальной загрузки будут конфликтовать с адаптивным стилем таблицы Zurb. Чтобы исправить это, вы можете вложить стили bootstrap в родительский класс или другой селектор, чтобы вызывать стили таблиц bootstrap только при необходимости.

таким образом, у вас есть гибкость, чтобы тянуть в классы только при необходимости. Вы увидите, что я использую http://zurb.com/ который является большой отзывчивый библиотека электронной почты для использования. Смотрите также http://zurb.com/ink/

наконец, используйте предварительный отправитель, например https://github.com/fphilipe/premailer-rails3 упомянутый выше, чтобы обработать стиль в встроенный css, компиляция встроенных стилей только для того, что используется в этом конкретном шаблоне электронной почты. Например, для premailer ваш файл 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 и встроенных автоматических ответах и ежедневных электронных письмах нашего продукта.

трюк здесь заключается в том, что вы не хотите включать весь bootstrap. Проблема в том, что почтовые клиенты будут игнорировать медиа-запросы и обрабатывать все стили печати, которые имеют много !важное заявление.

вместо этого вам нужно включить только определенные части bootstrap, которые вам нужны. Моя электронная почта.стиль 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';