El mejor enfoque se me ha ocurrido con las importaciones es el uso de Sass sobre una base seleccionada para tirar en su bootstrap (o cualquier otro) estilos en correos electrónicos según sea necesario.
En primer lugar, cree un nuevo archivo padre scss algo así como email.scss para su estilo de correo electrónico. Esto podría tener este aspecto:
// 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, única referencia a su archivo email.css compilado, que sólo contiene los estilos de arranque seleccionados referenciados y anidados correctamente en su email.scss.
Por ejemplo, ciertos estilos de arranque van a entrar en conflicto con el estilo de mesa sensible 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 forma, tiene la flexibilidad de obtener clases solo cuando sea necesario. Verás que utilizo http://zurb.com/ que es una gran biblioteca de correo electrónico receptiva para usar. Véase también http://zurb.com/ink/
Por último, utilice un premailer como https://github.com/fphilipe/premailer-rails3 mencionado anteriormente para procesar el estilo en css en línea, compilando estilos en línea solo para lo que se utiliza en esa plantilla de correo electrónico en particular. Por ejemplo, para el premailer, su archivo ruby podría tener un aspecto similar a este 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
Hope this helps! Hemos estado luchando por encontrar un marco flexible de plantillas de correo electrónico en Pardot, Salesforce, y la respuesta automática integrada de nuestro producto y correos electrónicos diarios.
Los clientes de correo electrónico son muy difíciles de diseñar. Con todo el CSS complejo de bootstrap, no creo que funcione. Será mejor que te despojes de lo que puedas y uses tablas y estilos en línea para llegar al estilo que quieras, o cerrar. –
Tengo el mismo problema. Creo que lo que terminaré haciendo es hacer el correo electrónico, tomar una captura de pantalla de cómo el CSS lo hace ver sin texto, y luego en el HTML usando la imagen de captura de pantalla junto con el texto. Es una solución desagradable, pero debería hacer el trabajo. – gsingh2011
@ gsingh2011 Solo recuerde que todas las Outlook y Gmail (y probablemente otras) no muestran imágenes antes del permiso del usuario. Significa que muchos de sus suscriptores verán un marcador de posición en lugar de una imagen como primera impresión. – gshilin