Update docs

This commit is contained in:
Dan Mindru 2018-09-03 21:56:50 +02:00
parent 207737f437
commit bae078590a
2 changed files with 26 additions and 48 deletions

View File

@ -1,7 +1,7 @@
# Responsive HTML email signature(s) # Responsive HTML email signature(s)
[![npm](https://img.shields.io/npm/v/responsive-html-email-signature.svg)](https://www.npmjs.com/package/responsive-html-email-signature) [![npm](https://img.shields.io/npm/v/responsive-html-email-signature.svg)](https://www.npmjs.com/package/responsive-html-email-signature)
[![license](https://img.shields.io/github/license/fadeit/responsive-html-email-signature.svg)](/LICENSE) [![license](https://img.shields.io/github/license/danmindru/responsive-html-email-signature.svg)](/LICENSE)
[![Issue Stats](https://img.shields.io/issuestats/p/github/fadeit/responsive-html-email-signature.svg)](https://github.com/fadeit/responsive-html-email-signature/pulls) [![Issue Stats](https://img.shields.io/issuestats/p/github/danmindru/responsive-html-email-signature.svg)](https://github.com/danmindru/responsive-html-email-signature/pulls)
### Let's punch email clients in the stomach 👊 ### Let's punch email clients in the stomach 👊
When you need some basic responsive email signatures that work on mobile.<br/> When you need some basic responsive email signatures that work on mobile.<br/>
@ -17,8 +17,8 @@ Here are some examples:
![responsive emails-02](https://cloud.githubusercontent.com/assets/1515742/10591901/139c4954-76b9-11e5-80f7-5b0ccaf5af81.png) ![responsive emails-02](https://cloud.githubusercontent.com/assets/1515742/10591901/139c4954-76b9-11e5-80f7-5b0ccaf5af81.png)
## Getting started ## Getting started
- Clone repo `git clone https://github.com/fadeit/responsive-html-email-signature.git` - Clone repo `git clone https://github.com/danmindru/responsive-html-email-signature.git`
- Run `yarn` or `npm install` - Run `npm install`
- Run `gulp` to generate templates from configuration (one time) - Run `gulp` to generate templates from configuration (one time)
### Customizing templates ### Customizing templates
@ -31,8 +31,6 @@ Here are some examples:
## Motivation ## Motivation
Writing HTML emails & email signatures sucks. Let's make it easier. We can't fix all email clients, but we can surely make our lives easier with some automation. <br/> Writing HTML emails & email signatures sucks. Let's make it easier. We can't fix all email clients, but we can surely make our lives easier with some automation. <br/>
> See a fairly comprehensive rant on the subject (and not only) [in this article](https://fadeit.dk/blog/post/html-emails-and-email-signatures-how-hard-can-it-be).
## What does this pile of code do ## What does this pile of code do
- [x] generates email templates from your config - [x] generates email templates from your config
@ -52,11 +50,11 @@ Writing HTML emails & email signatures sucks. Let's make it easier. We can't fix
## Docs ## Docs
### Installing ### Installing
```bash ```bash
$ yarn # or npm install $ npm install
$ gulp # By default, HTML & CSS files in './src' will be watched for changes $ gulp # By default, HTML & CSS files in './src' will be watched for changes
``` ```
> Note: it's built using node v7.x, so please make sure your node version is up to date. Version 6+ should be fine. > Note: it's built using node v8.x, so please make sure your node.js version is up to date. Version 6+ should be fine.
### Configuring ### Configuring
To make a basic email from existing templates, you only have to edit the `conf.json` file in each template. To make a basic email from existing templates, you only have to edit the `conf.json` file in each template.
@ -154,7 +152,7 @@ You are of course encouraged to change the default structure for your use case.
## Overview of the build process ## Overview of the build process
The diagram below shows what happens to your email templates. The diagram below shows what happens to your email templates.
Each folder in 'src' is considered a `template group`. A template file will be generated for each of the configuration objects you add have in the template group -> `conf.js`. Each folder in 'src' is considered a `template group`. A template file will be generated for each of the configuration objects you add have in the template group -> `conf.js`.
![Responsive HTML email template/signatures diagram](https://fadeit.dk/posts/html-emails-and-email-signatures-how-hard-can-it-be/html-responsive-email-template-build-diagram.png) ![Responsive HTML email template/signatures diagram](https://user-images.githubusercontent.com/1515742/45000195-35268300-afc3-11e8-82b4-7507430c48a0.png)
## CSS Support ## CSS Support
@ -233,11 +231,3 @@ Unfortnately, Outlook 2010 client dosen't support HTML file import features for
> **NB**: base 64 will not be shown on Outlook 2010 client. So, I recommend to use external url if you want to use images. > **NB**: base 64 will not be shown on Outlook 2010 client. So, I recommend to use external url if you want to use images.
------------------------------
<br/>
<a href="http:fadeit.dk"><img src="https://fadeit.dk/src/assets/img/brand/fadeit_logo_full.svg" alt="The fadeit logo" style="width:200px;"/></a><br/><br/>
#### About fadeit
We build awesome software, web and mobile applications.
See more at [fadeit.dk](https://fadeit.dk)

View File

@ -16,9 +16,6 @@
## 만들게된 동기 (Motivation) ## 만들게된 동기 (Motivation)
이메일용 html은 일반적인 HTML과 달리 모든 코드를 in-line CSS로 만들어야 합니다. 그래서 이메일 템플릿이랑 서명을 만들기가 굉장히 어렵습니다. "이런 HTML 템플릿과 서명을 편하게 만들어보자!" 라는 생각에서 이 템플릿을 만들었습니다. 물론 모든 이메일 클라이언트의 이슈를 전부 다 고칠 수는 없지만, 이 템플릿을 활용해서 조금 더 쉽고 깔끔한 반응형 이메일을 만들어서 받는 사람 보내는 사람 모두가 만족하게 만들 수 있습니다! 이메일용 html은 일반적인 HTML과 달리 모든 코드를 in-line CSS로 만들어야 합니다. 그래서 이메일 템플릿이랑 서명을 만들기가 굉장히 어렵습니다. "이런 HTML 템플릿과 서명을 편하게 만들어보자!" 라는 생각에서 이 템플릿을 만들었습니다. 물론 모든 이메일 클라이언트의 이슈를 전부 다 고칠 수는 없지만, 이 템플릿을 활용해서 조금 더 쉽고 깔끔한 반응형 이메일을 만들어서 받는 사람 보내는 사람 모두가 만족하게 만들 수 있습니다!
이 [블로그 포스팅](http://fadeit.dk/blog/post/html-emails-and-email-signatures-how-hard-can-it-be)에서 fadeit 의 더 많은 이애기를 들어보세요.
## 이 템플릿에서 무엇을 할 수 있나? (What does it do?) ## 이 템플릿에서 무엇을 할 수 있나? (What does it do?)
- [x] config-based template generation - [x] config-based template generation
- [x] allows generating multiple templates (for your colleagues too!) - [x] allows generating multiple templates (for your colleagues too!)
@ -38,7 +35,7 @@ $ npm install
$ gulp $ gulp
``` ```
`src/fadeit/` 를 확인해보시면 멋진 2개의 이메일 템플릿 샘플이 있습니다. 폴더를 통째로 다른 이름으로 복사/붙여넣기 하시고 그 안에 있는 `src/fadeit/conf.js` 파일을 입맛대로 바꿔보세요. 다음으로는 `gulp`를 실행해서 여러분 만의 이메일 템플릿을 빌드하세요. gulp 의 task가 동작하면서 기본 html CSS 파일을 확인하고 새로운 html 파일을 `/dist`에 저장합니다. `src/dark/` 를 확인해보시면 멋진 2개의 이메일 템플릿 샘플이 있습니다. 폴더를 통째로 다른 이름으로 복사/붙여넣기 하시고 그 안에 있는 `src/dark/conf.js` 파일을 입맛대로 바꿔보세요. 다음으로는 `gulp`를 실행해서 여러분 만의 이메일 템플릿을 빌드하세요. gulp 의 task가 동작하면서 기본 html CSS 파일을 확인하고 새로운 html 파일을 `/dist`에 저장합니다.
## 살펴보기 (Overview) ## 살펴보기 (Overview)
아래 순서도는 여러분이 만든 템플릿이 어떻게 빌드가 되는지를 보여줍니다. 아래 순서도는 여러분이 만든 템플릿이 어떻게 빌드가 되는지를 보여줍니다.
@ -131,12 +128,3 @@ start Signatures
- 새 서명을 만들고 아래 박스에 Ctrl + V 로 파일을 붙여넣기 하세요. - 새 서명을 만들고 아래 박스에 Ctrl + V 로 파일을 붙여넣기 하세요.
> base 64로 만든 이메일 파일은 잘 작동하지 않을 수 있습니다. 외부 링크를 활용하시기를 권장합니다. > base 64로 만든 이메일 파일은 잘 작동하지 않을 수 있습니다. 외부 링크를 활용하시기를 권장합니다.
===================
<br/>
<a href="http:fadeit.dk"><img src="http://fadeit.dk/src/assets/img/brand/fadeit_logo_full.svg" alt="The fadeit logo" style="width:200px;"/></a><br/><br/>
#### About fadeit
We build awesome software, web and mobile applications.
See more at [fadeit.dk](http://fadeit.dk)