Alguém recebeu e-mails em HTML com o Twitter Bootstrap?

Estou usando o premailer-rails3gem que puxa estilos embutidos para emails html, e estou tentando fazê-lo funcionar com o bootstrap do Twitter.

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

Parece que alguns estilos vêm corretamente, mas nem todos eles. Estou me perguntando se alguém tem um bom exemplo de trabalho de como obter seu css do Twitter Bootstrap (modificado ou não) em um e-mail html.

Obrigado!

Se você quer dizer "Posso usar a apresentação estilística do Bootstrap em um e-mail?" então você pode, embora eu não conheça ninguém que tenha feito isso ainda. Você precisará recodificar tudo nas tabelas.

Se você está atrás de funcionalidade, depende de onde seus e-mails são visualizados. Se uma proporção significativa de seus usuários usa Outlook, Gmail, Yahoo ou Hotmail (e esses normalmente somam cerca de 75% dos clientes de e-mail), muitas das vantagens do Bootstrap não são possíveis. Mac Mail, iOS Mail e Gmail no Android são muito melhores em renderizar CSS, então se você está direcionando principalmente para dispositivos móveis, não é tão ruim.

• JavaScript - completamente fora dos limites. Se você tentar, provavelmente irá direto para o inferno de e-mail (também conhecido como pasta de spam). Isso significa que LESS também está fora dos limites, embora você possa obviamente usar os estilos CSS resultantes, se desejar.
• CSS inline é muito mais seguro de usar do que qualquer outro tipo de CSS (incorporado é possível, link é um não definitivo). Consultas de mídia são possíveis, então você pode ter algum tipo de design responsivo. No entanto, há uma longa lista de atributos CSS que não funcionam - essencialmente, o modelo de caixa não tem suporte em clientes de e-mail. Você precisa estruturar tudo com tabelas.
• font-face- você só pode usar imagens externas. Todos os outros recursos externos (arquivos CSS, fontes) são excluídos.
• glifos e sprites - por causa da implementação estranha de imagens de fundo (VML) do Outlook 2007, você não pode usar repetição ou posição de fundo.
• pseudo-seletores não são possíveis - por exemplo :hover, os :activeestados não podem ser estilizados separadamente

Não são cargas de respostas sobre SO, e muitos outros links na internet em geral.

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

Peço desculpas por ressuscitar este tópico antigo, mas eu só queria que todos soubessem que existe um Bootstrap bem próximo, como o framework CSS, criado especificamente para estilo de e-mail. Aqui está o link: http://zurb.com/ink/

Espero que ajude alguém.

Edição ninja: desde então, foi renomeado para Foundation for Emailse o novo link é: https://foundation.zurb.com/emails.html

Aqui estão algumas coisas que você não pode fazer com e-mail:

• Inclui uma seção com estilos . O Apple Mail.app oferece suporte, mas o Gmail e o Hotmail não, por isso é proibido. O Hotmail oferece suporte a uma seção de estilo no corpo, mas o Gmail ainda não.
• Link para uma folha de estilo externa. Não são muitos os clientes de e-mail que suportam isso, é melhor simplesmente esquecer.
• Imagem de fundo / Posição de fundo. O Gmail também é o culpado por isso.
• Limpe seus flutuadores . Gmail novamente.
• Margin . Sim, sério, o Hotmail ignora as margens. Basicamente, qualquer posicionamento CSS não funciona.
• Font-any . Provavelmente, o Eudora irá ignorar qualquer coisa que você tentar declarar com as fontes.

Fonte: http://css-tricks.com/using-css-in-html-emails-the-real-story/

Mailchimp tem modelos de e-mail que você pode usar - aqui

Mais alguns recursos que devem ajudá-lo

• Melhores práticas para estilizar e-mails em HTML
• Estilo html no e-mail
• Estilo de e-mail HTML para Gmail

Você pode usar este https://github.com/advancedrei/BootstrapForEmail para b-strapping seu e-mail.

Recentemente, passei algum tempo procurando construir modelos de email html, a melhor solução que encontrei foi usar este http://htmlemailboilerplate.com/ . Desde então, construí 3 modelos bastante complexos e eles funcionaram bem em vários clientes de email.

Olá, Brian Armstrong, visite este link .

Este blog explica como integrar Rails com Bootstrap less (usando premailer-rails).

Se você está usando bootstrap sass, pode fazer o mesmo:

comece importando alguns arquivos sass do Bootstrap para 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, em seguida, na <head>seção de visualização , adicione <%= stylesheet_link_tag "email" %>

A melhor abordagem que eu propus é usar as importações do Sass em uma base selecionada para puxar seus estilos de bootstrap (ou qualquer outro) para e-mails conforme necessário.

Primeiro, crie um novo arquivo pai scss semelhante email.scssao seu estilo de e-mail. Pode ser assim:

    // 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";

Em seguida, em seus modelos de email, referencie apenas o arquivo email.css compilado, que contém apenas os estilos de bootstrap selecionados referenciados e aninhados corretamente em seu email.scss.

Por exemplo, certos estilos de bootstrap entrarão em conflito com o estilo de tabela responsiva do Zurb. Para corrigir isso, você pode aninhar os estilos do bootstrap em uma classe pai ou outro seletor para chamar os estilos de tabela do bootstrap somente quando necessário.

Dessa forma, você tem a flexibilidade de obter classes apenas quando necessário. Você verá que eu uso, http://zurb.com/que é uma ótima biblioteca de e-mail responsiva para usar. Veja tambémhttp://zurb.com/ink/

Por último, use um pré-mailer como https://github.com/fphilipe/premailer-rails3mencionado acima para processar o estilo em css embutido, compilando estilos embutidos apenas para o que é usado naquele modelo de email específico. Por exemplo, para o pré-mailer, seu arquivo ruby ​​pode ser parecido com este para compilar um e-mail no estilo embutido.

    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

Espero que isto ajude! Tenho lutado para encontrar uma estrutura de modelagem de e-mail flexível no Pardot, Salesforce e na resposta automática e nos e-mails diários integrados do nosso produto.

O truque aqui é que você não deseja incluir todo o bootstrap. O problema é que os clientes de e-mail ignorarão as consultas da mídia e processarão todos os estilos de impressão que contêm muitas declarações importantes.

Em vez disso, você precisa incluir apenas as partes específicas do bootstrap de que precisa. Meu arquivo email.css.scss tem a seguinte aparência:

@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 sobre o Bootstrap Email? Isso parece muito bom e compatível com o bootstrap 4.