Estoy usando la premailer-rails3gema que extrae estilos en línea para correos electrónicos html, y estoy tratando de que funcione con Twitter bootstrap.
https://github.com/fphilipe/premailer-rails3
Parece que algunos estilos vienen correctamente, pero no todos. Me pregunto si alguien tiene un buen ejemplo práctico de cómo obtener su css de Twitter Bootstrap (modificado o no) en un correo electrónico html.
¡Gracias!
Respuestas:
Si te refieres a "¿Puedo usar la presentación estilística de Bootstrap en un correo electrónico?" entonces puedes, aunque no conozco a nadie que lo haya hecho todavía. Sin embargo, necesitará recodificar todo en las tablas.
Si busca la funcionalidad, depende de dónde se vean sus correos electrónicos. Si una proporción significativa de sus usuarios está en Outlook, Gmail, Yahoo o Hotmail (y estos generalmente suman alrededor del 75% de los clientes de correo electrónico), muchas de las bondades de Bootstrap no son posibles. Mac Mail, iOS Mail y Gmail en Android son mucho mejores para renderizar CSS, por lo que si se dirige principalmente a dispositivos móviles, no es tan malo.
font-face- solo puede utilizar imágenes externas. Se excluyen todos los demás recursos externos (archivos CSS, fuentes).:hover, los :activeestados no se pueden diseñar por separadoNo son cargas de respuestas sobre SO, y un montón de otros enlaces en Internet en general.
Me disculpo por resucitar este viejo hilo, pero solo quería que todos sepan que hay un Bootstrap muy cercano como un marco CSS creado específicamente para el estilo de correo electrónico, aquí está el enlace: http://zurb.com/ink/
Espero que ayude a alguien.
Edición Ninja: desde entonces se le ha cambiado el nombre Foundation for Emailsy el nuevo enlace es: https://foundation.zurb.com/emails.html
Aquí hay algunas cosas que no puede hacer con el correo electrónico:
- Incluya una sección con estilos . Apple Mail.app lo admite, pero Gmail y Hotmail no, por lo que es un no-no. Hotmail admitirá una sección de estilo en el cuerpo, pero Gmail aún no lo hace.
- Enlace a una hoja de estilo externa. No muchos clientes de correo electrónico admiten esto, lo mejor es simplemente olvidarlo.
- Imagen de fondo / Posición de fondo. Gmail también es el culpable de este.
- Limpia tus flotadores . Gmail de nuevo.
- Margen . Sí, en serio, Hotmail ignora los márgenes. Básicamente, cualquier posicionamiento CSS no funciona.
- Font-cualquier cosa . Es probable que Eudora ignore todo lo que intente declarar con fuentes.
Fuente: http://css-tricks.com/using-css-in-html-emails-the-real-story/
Mailchimp tiene plantillas de correo electrónico que puedes usar, aquí
Algunos recursos más que deberían ayudarlo
font-sizete brinda una mayor flexibilidad a muy bajo costo.
Puede usar este https://github.com/advancedrei/BootstrapForEmail para ajustar su correo electrónico.
Recientemente, pasé un tiempo investigando la creación de plantillas de correo electrónico html, la mejor solución que encontré fue usar este http://htmlemailboilerplate.com/ . Desde entonces, he creado 3 plantillas bastante complejas y han funcionado bien en varios clientes de correo electrónico.
Hola Brian Armstrong, visite este enlace .
Este blog le dice cómo integrar Rails con Bootstrap menos (usando premailer-rails).
Si está usando bootstrap sass, podría hacer lo mismo:
comience importando algunos archivos Bootstrap sass en 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';y luego en su <head>sección de vista agregue
<%= stylesheet_link_tag "email" %>
El mejor enfoque que se me ha ocurrido es utilizar las importaciones de Sass en una base seleccionada para incorporar sus estilos de arranque (o cualquier otro) en los correos electrónicos según sea necesario.
Primero, cree un nuevo archivo principal de scss similar email.scssa su estilo de correo electrónico. Esto podría verse así:
// 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";Luego, en sus plantillas de correo electrónico, solo haga referencia a su archivo compilado email.css, que solo contiene los estilos de arranque seleccionados referenciados y anidados correctamente en su email.scss.
Por ejemplo, ciertos estilos de bootstrap entrarán en conflicto con el estilo de tabla receptiva de Zurb. Para solucionarlo, puede anidar los estilos de bootstrap dentro de una clase principal u otro selector para llamar a los estilos de tabla de bootstrap solo cuando sea necesario.
De esta manera, tiene la flexibilidad de incorporar clases solo cuando sea necesario. Verás que utilizo, http://zurb.com/que es una gran biblioteca de correo electrónico receptiva para usar. Ver tambiénhttp://zurb.com/ink/
Por último, use un premailer como el https://github.com/fphilipe/premailer-rails3mencionado anteriormente para procesar el estilo en CSS en línea, compilando estilos en línea solo para lo que se usa en esa plantilla de correo electrónico en particular. Por ejemplo, para el premailer, su archivo ruby podría verse así para compilar un correo electrónico en estilo en línea.
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 esto ayude! He estado luchando por encontrar un marco de trabajo de plantillas de correo electrónico flexible en Pardot, Salesforce y la respuesta automática integrada de nuestro producto y los correos electrónicos diarios.
El truco aquí es que no desea incluir todo el bootstrap. El problema es que los clientes de correo electrónico ignorarán las consultas de los medios y procesarán todos los estilos de impresión que tienen muchas declaraciones importantes.
En su lugar, solo debe incluir las partes específicas de bootstrap que necesita. Mi archivo email.css.scss se ve así:
@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é pasa con Bootstrap Email? Esto parece realmente agradable y compatible con bootstrap 4.