program story

트위터 부트 스트랩으로 작업하는 HTML 이메일을받은 사람이 있습니까?

inputbox 2020. 9. 12. 09:58
반응형

트위터 부트 스트랩으로 작업하는 HTML 이메일을받은 사람이 있습니까?

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 렌더링에 훨씬 더 뛰어나므로 대부분의 모바일 장치를 대상으로하는 경우 그렇게 나쁘지 않습니다.

  • JavaScript-완전히 제한이 없습니다. 시도하면 곧바로 이메일 지옥 (스팸 폴더라고도 함)으로 이동할 수 있습니다. 이는 원하는 경우 결과 CSS 스타일을 분명히 사용할 수 있지만 LESS도 범위를 벗어남을 의미합니다.
  • 인라인 CSS는 다른 유형의 CSS보다 사용하기에 훨씬 안전합니다 (임베디드 가능, 링크는 확실하지 않음). 미디어 쿼리가 가능하므로 일종의 반응 형 디자인을 가질 수 있습니다. 그러나 작동하지 않는 CSS 속성의 긴 목록이 있습니다. 기본적으로 상자 모델은 이메일 클라이언트에서 대부분 지원되지 않습니다. 모든 것을 테이블로 구성해야합니다.
  • font-face-외부 이미지 만 사용할 수 있습니다. 다른 모든 외부 리소스 (CSS 파일, 글꼴)는 제외됩니다.
  • 글리프 및 스프라이트-Outlook 2007의 이상한 배경 이미지 (VML) 구현으로 인해 배경 반복 또는 위치를 사용할 수 없습니다.
  • 의사 선택기가 불가능합니다 - 예를 들어 :hover, :active상태는 개별적으로 스타일 수 없습니다

이 있는 부하 의 대답 에 SO, 큰에서 인터넷에 다른 링크가 많이.

이 오래된 스레드를 복구 한 것에 대해 사과 드리지만, 이메일 스타일링을 위해 특별히 만들어진 CSS 프레임 워크와 같은 매우 가까운 부트 스트랩이 있다는 것을 모두에게 알리고 싶었습니다. 링크는 다음과 같습니다. http://zurb.com/ink/

누군가에게 도움이되기를 바랍니다.

Ninja 편집 : 이후로 이름이 변경되었으며 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에는 사용할 수있는 이메일 템플릿이 있습니다- 여기

도움이 될 몇 가지 추가 리소스

이 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에서 올바르게 참조되고 중첩 된 선택된 부트 스트랩 스타일 만 포함됩니다.

For example, certain bootstrap styles will conflict with Zurb's responsive table style. To fix that, you can nest bootstrap's styles within a parent class or other selector in order to call bootstrap's table styles only when needed.

This way, you have the flexibility to pull in classes only when needed. You'll see that I use http://zurb.com/ which is a great responsive email library to use. See also http://zurb.com/ink/

Lastly, use a premailer like https://github.com/fphilipe/premailer-rails3 mentioned above to process the style into inline css, compiling inline styles to only what is used in that particular email template. For instance, for premailer, your ruby file could look something like this to compile an email into inline style.

    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! Been struggling to find a flexible email templating framework across Pardot, Salesforce, and our product's built-in auto-response and daily emails.

The trick here is that you don't want to include the whole bootstrap. The issue is that email clients will ignore the media queries and process all the print styles which have a lot of !important statements.

Instead, you need to only include the specific parts of bootstrap that you need. My email.css.scss file looks like this:

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

What about Bootstrap Email? This seems to really nice and compatible with bootstrap 4.

참고URL : https://stackoverflow.com/questions/9732580/has-anyone-gotten-html-emails-working-with-twitter-bootstrap

반응형

'program story' 카테고리의 다른 글

Android 카메라 방향을 올바르게 설정하는 방법은 무엇입니까?  (0) 2020.09.12
Scala의 "new"키워드  (0) 2020.09.12
JNDI의 목적은 무엇입니까  (0) 2020.09.12
Python에서 핫 인코딩을 어떻게 할 수 있습니까?  (0) 2020.09.11
Swift 3.0으로 컴파일 된 모듈은 Swift 3.0.1에서 가져올 수 없습니다.  (0) 2020.09.11

'program story'의 다른글

  • 현재글트위터 부트 스트랩으로 작업하는 HTML 이메일을받은 사람이 있습니까?

관련글

댓글

티스토리툴바