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)
[![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)
[![Issue Stats](https://img.shields.io/issuestats/p/github/fadeit/responsive-html-email-signature.svg)](https://github.com/fadeit/responsive-html-email-signature/pulls)
[![license](https://img.shields.io/github/license/danmindru/responsive-html-email-signature.svg)](/LICENSE)
[![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 👊
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)
## Getting started
- Clone repo `git clone https://github.com/fadeit/responsive-html-email-signature.git`
- Run `yarn` or `npm install`
- Clone repo `git clone https://github.com/danmindru/responsive-html-email-signature.git`
- Run `npm install`
- Run `gulp` to generate templates from configuration (one time)
### Customizing templates
@ -31,8 +31,6 @@ Here are some examples:
## 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/>
> 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
- [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
### Installing
```bash
$ yarn # or npm install
$ npm install
$ 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
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
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`.
![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
@ -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.
------------------------------
<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)
이메일용 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?)
- [x] config-based template generation
- [x] allows generating multiple templates (for your colleagues too!)
@ -38,7 +35,7 @@ $ npm install
$ 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)
아래 순서도는 여러분이 만든 템플릿이 어떻게 빌드가 되는지를 보여줍니다.
@ -131,12 +128,3 @@ start Signatures
- 새 서명을 만들고 아래 박스에 Ctrl + V 로 파일을 붙여넣기 하세요.
> 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)