premailer-rails3html 이메일을 위해 스타일을 인라인으로 가져 오는 gem을 사용 하고 있으며 Twitter 부트 스트랩과 함께 작동하도록 노력하고 있습니다.
https://github.com/fphilipe/premailer-rails3
일부 스타일이 올바르게 입력 된 것 같지만 모두가 아닙니다. 나는 누군가가 자신의 Twitter Bootstrap CSS (수정 여부)를 html 이메일로 가져 오는 멋진 작업 예를 가지고 있는지 궁금합니다.
감사!
답변:
"이메일에서 Bootstrap의 스타일 표현을 사용할 수 있습니까?"를 의미하는 경우 아직 그 일을 한 사람은 아무도 모르지만 당신은 할 수 있습니다. 하지만 테이블의 모든 것을 다시 코딩해야합니다.
기능을 사용하는 경우 이메일을 보는 위치에 따라 다릅니다. 상당한 비율의 사용자가 Outlook, Gmail, Yahoo 또는 Hotmail (일반적으로 이메일 클라이언트의 약 75 %를 추가 함)을 사용하는 경우 Bootstrap의 장점을 많이 사용할 수 없습니다. Android의 Mac Mail, iOS Mail 및 Gmail은 CSS 렌더링에 훨씬 더 뛰어나므로 대부분 모바일 장치를 대상으로하는 경우 그렇게 나쁘지 않습니다.
font-face-외부 이미지 만 사용할 수 있습니다. 다른 모든 외부 리소스 (CSS 파일, 글꼴)는 제외됩니다.:hover, :active상태는 개별적으로 스타일 수 없습니다이 오래된 스레드를 복구 한 것에 대해 사과드립니다. 이메일 스타일링을 위해 특별히 만들어진 CSS 프레임 워크와 같은 매우 가까운 부트 스트랩이 있다는 것을 모두에게 알리고 싶었습니다. 링크는 다음과 같습니다. http://zurb.com/ink/
누군가에게 도움이되기를 바랍니다.
닌자 편집 : 이후로 이름이 변경되었으며 Foundation for Emails새 링크는 다음과 같습니다. https://foundation.zurb.com/emails.html
다음은 이메일로 할 수없는 몇 가지 작업입니다.
- 스타일이있는 섹션 포함 . Apple Mail.app에서 지원하지만 Gmail과 Hotmail은 지원하지 않으므로 아니요. Hotmail은 본문의 스타일 섹션을 지원하지만 Gmail은 여전히 지원하지 않습니다.
- 외부 스타일 시트에 연결합니다.이를 지원하는 이메일 클라이언트는 많지 않으며 잊어 버리는 것이 가장 좋습니다.
- 배경 이미지 / 배경 위치.Gmail도이 문제의 범인입니다.
- 수레를 치우십시오 . 다시 Gmail.
- 여백 . 네, 진지하게 Hotmail은 여백을 무시합니다. 기본적으로 CSS 포지셔닝은 전혀 작동하지 않습니다.
- Font-anything . Eudora는 글꼴로 선언하려는 모든 것을 무시할 가능성이 있습니다.
출처 : http://css-tricks.com/using-css-in-html-emails-the-real-story/
Mailchimp에는 사용할 수있는 이메일 템플릿이 있습니다- 여기
도움이 될 몇 가지 추가 리소스
font-size적은 비용으로 더 큰 유연성을 제공합니다.
이 https://github.com/advancedrei/BootstrapForEmail 을 사용 하여 이메일을 b- 스트랩 할 수 있습니다 .
최근에 html 이메일 템플릿을 작성하는 데 시간을 보냈는데 가장 좋은 해결책은 http://htmlemailboilerplate.com/ 을 사용하는 것이 었습니다 . 나는 그 이후로 3 개의 매우 복잡한 템플릿을 구축했으며 다양한 이메일 클라이언트에서 잘 작동했습니다.
안녕하세요 Brian Armstrong 님, 이 링크를 방문하십시오 .
이 블로그는 Rails 를 Bootstrap 과 통합하는 방법을 알려줍니다. less (premailer-rails 사용) .
부트 스트랩 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" %>
내가 생각 해낸 가장 좋은 방법은 필요한 경우 부트 스트랩 (또는 기타) 스타일을 이메일로 가져 오기 위해 선택한 기준으로 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에서 올바르게 참조되고 중첩 된 선택된 부트 스트랩 스타일 만 포함됩니다.
예를 들어 특정 부트 스트랩 스타일은 Zurb의 반응 형 테이블 스타일과 충돌합니다. 이를 수정하려면 필요한 경우에만 부트 스트랩의 테이블 스타일을 호출하기 위해 부트 스트랩의 스타일을 상위 클래스 또는 다른 선택기에 중첩 할 수 있습니다.
이렇게하면 필요할 때만 클래스를 가져올 수있는 유연성이 있습니다. 사용할 http://zurb.com/수있는 훌륭한 반응 형 이메일 라이브러리를 사용하는 것을 볼 수 있습니다. 또한보십시오http://zurb.com/ink/
마지막으로, https://github.com/fphilipe/premailer-rails3위에서 언급 한 것과 같은 프리 메일러를 사용 하여 스타일을 인라인 CSS로 처리하고 인라인 스타일을 특정 이메일 템플릿에서 사용되는 것만으로 컴파일합니다. 예를 들어, 프리 메일러의 경우 루비 파일은 이메일을 인라인 스타일로 컴파일하기 위해 다음과 같이 보일 수 있습니다.
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 및 당사 제품에 내장 된 자동 응답 및 일일 이메일 전반에 걸쳐 유연한 이메일 템플릿 프레임 워크를 찾는 데 어려움을 겪었습니다.
여기서 트릭은 전체 부트 스트랩을 포함하지 않으려는 것입니다. 문제는 이메일 클라이언트가 미디어 쿼리를 무시하고! important 문장이 많은 모든 인쇄 스타일을 처리한다는 것입니다.
대신 필요한 부트 스트랩의 특정 부분 만 포함하면됩니다. 내 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';무엇에 대해 부트 스트랩 이메일? 이것은 정말 멋지고 부트 스트랩 4와 호환되는 것 같습니다.