Update documentation
This commit is contained in:
parent
2970388579
commit
f8687ca6d9
41
README.md
41
README.md
|
|
@ -19,11 +19,10 @@ Here are some examples:
|
||||||
## Getting started
|
## Getting started
|
||||||
- Clone repo `git clone https://github.com/danmindru/responsive-html-email-signature.git`
|
- Clone repo `git clone https://github.com/danmindru/responsive-html-email-signature.git`
|
||||||
- Run `npm install`
|
- Run `npm install`
|
||||||
- Run `npm start` to generate templates from configuration (one time)
|
- Run `npm start` to generate templates from configuration. This will continue to watch your files and re-make the template until you exit.
|
||||||
|
|
||||||
### Customizing templates
|
### Customizing templates
|
||||||
- Edit files in */templates*
|
- Edit files in */templates*
|
||||||
- Run `npm start` to watch templates and re-generate when changed
|
|
||||||
- Open files from `./dist` in your fav browser to check them out
|
- Open files from `./dist` in your fav browser to check them out
|
||||||
|
|
||||||
> When you're done, check out [how to add them to your email client of choice](#usage-with-different-email-clients) if in doubt.
|
> When you're done, check out [how to add them to your email client of choice](#usage-with-different-email-clients) if in doubt.
|
||||||
|
|
@ -44,18 +43,17 @@ Writing HTML emails & email signatures sucks. Let's make it easier. We can't fix
|
||||||
- [x] supports LESS / SASS / PostCSS
|
- [x] supports LESS / SASS / PostCSS
|
||||||
- [x] autoprefixer, so you don't have to worry about your `-moz-`s or `-webkit-`s
|
- [x] autoprefixer, so you don't have to worry about your `-moz-`s or `-webkit-`s
|
||||||
|
|
||||||
**Some mail clients don't support them, so an external URL might be a good idea. Also, some clients might complain about the size, so keep an eye out.*
|
**Some mail clients might have [hard limits](https://support.google.com/a/answer/176652?hl=en) regarding the email size, so don't include large images if possible. If you need to, use a URL instead and host the image somewhere else.*
|
||||||
|
|
||||||
|
|
||||||
## Docs
|
## Docs
|
||||||
### Installing
|
### Installing
|
||||||
```bash
|
```bash
|
||||||
$ npm install
|
$ npm install
|
||||||
$ npm start # or `npm run once` to only generate templates without watching
|
$ npm start # By default, templates will be created in `./dist` and HTML & CSS files in './templates' will be watched for changes.
|
||||||
# By default, HTML & CSS files in './templates' will be watched for changes
|
|
||||||
```
|
```
|
||||||
|
|
||||||
> Note: works well with node v10+. Earlier versions might also work.
|
> Note: works well with node v10+. Earlier and later versions might also work.
|
||||||
|
|
||||||
### 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.
|
||||||
|
|
@ -76,7 +74,7 @@ For example, the dark template accepts the following:
|
||||||
```
|
```
|
||||||
|
|
||||||
### Generating multiple emails from the same config (for your colleagues too!)
|
### Generating multiple emails from the same config (for your colleagues too!)
|
||||||
Use an array instead of object in `conf.json`, having multiple configs like the one above:
|
To generate multiple templates, use an array instead of an object in `conf.json`, like so:
|
||||||
```json
|
```json
|
||||||
[
|
[
|
||||||
{...conf1},
|
{...conf1},
|
||||||
|
|
@ -92,7 +90,16 @@ Add any variable to the configuration file and use it in HTML like so:
|
||||||
<p><!-- @echo yourCustomVariable --></p>
|
<p><!-- @echo yourCustomVariable --></p>
|
||||||
```
|
```
|
||||||
|
|
||||||
> NB: config variables accept HTML.
|
Where the configuration contains:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
yourCustomVariable: "Custom!"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
> NB: config variables also accept HTML. That's useful for including links.
|
||||||
|
|
||||||
|
|
||||||
### Adding CSS & pre-processing
|
### Adding CSS & pre-processing
|
||||||
Any number of CSS, SASS or LESS files in a template directory & they will be automatically processed & inlined into the files outputed in `./dist`.
|
Any number of CSS, SASS or LESS files in a template directory & they will be automatically processed & inlined into the files outputed in `./dist`.
|
||||||
|
|
@ -100,26 +107,26 @@ Any number of CSS, SASS or LESS files in a template directory & they will be aut
|
||||||
|
|
||||||
### Multiple emails in the same template
|
### Multiple emails in the same template
|
||||||
Templates can contain multiple HTML files from which to build emails. For example, the dark template has `signature.html` and `signature-reply.html`, which is a simpler version.
|
Templates can contain multiple HTML files from which to build emails. For example, the dark template has `signature.html` and `signature-reply.html`, which is a simpler version.
|
||||||
|
|
||||||
Each HTML file will be treated as an email template, except for `*.inc.html`. See below ⬇️
|
Each HTML file will be treated as an email template, except for `*.inc.html`. See below ⬇️
|
||||||
|
|
||||||
|
|
||||||
### Partials (*.inc.html)
|
### Using partials (*.inc.html)
|
||||||
If you indeed have multiple emails in the same templates, you can be sure some of the HTML repeats.
|
By naming files with `*.inc.html`, they become partials. Partials will not be treated as templates (ignored), but they can be included in any HTML template using a `@include` HTML comment.
|
||||||
|
|
||||||
Luckily, partials can be used for common parts (i.e. headers, footers).
|
|
||||||
|
|
||||||
Partials *will not* be treated as an email template, but ignored when built. They can however be included in other HTML files, like so:
|
|
||||||
```html
|
```html
|
||||||
<section>
|
<section>
|
||||||
<!-- @include footer.inc.html -->
|
<!-- @include footer.inc.html -->
|
||||||
</section
|
</section
|
||||||
```
|
```
|
||||||
|
|
||||||
|
Partials are useful if you have bits of HTML that repeat, like headers, footers, etc.
|
||||||
|
|
||||||
|
|
||||||
## Template structure (examples)
|
## Template structure (examples)
|
||||||
|
There are no rules regarding how to structure templates, but it's a good idea to create directories for a template group. <br/>
|
||||||
There are 2 examples of template structures, one for the `light` email template and one for the `dark` one.
|
There are 2 examples of template structures, one for the `light` email template and one for the `dark` one.
|
||||||
|
|
||||||
Here's how the dark one looks:
|
Here's how the dark one is structured:
|
||||||
```bash
|
```bash
|
||||||
./templates
|
./templates
|
||||||
├── dark
|
├── dark
|
||||||
|
|
@ -133,7 +140,7 @@ Here's how the dark one looks:
|
||||||
├── signature-reply.html # Simplified signature (loads head)
|
├── signature-reply.html # Simplified signature (loads head)
|
||||||
```
|
```
|
||||||
|
|
||||||
Here's how the light one looks:
|
Here's how the light one is structured:
|
||||||
```bash
|
```bash
|
||||||
./templates
|
./templates
|
||||||
├── light
|
├── light
|
||||||
|
|
@ -148,8 +155,6 @@ Here's how the light one looks:
|
||||||
├── signature-reply.html # Simplified signature (loads head)
|
├── signature-reply.html # Simplified signature (loads head)
|
||||||
```
|
```
|
||||||
|
|
||||||
Files are included via [gulp-preprocess](https://www.npmjs.com/package/gulp-preprocess).
|
|
||||||
|
|
||||||
There's one convention you have to keep in mind: `all files that you wish to include should follow the *.inc.html format`. The gulp task ignores `*.inc.html` files, but will try to process & create email templates from all `.html` files.
|
There's one convention you have to keep in mind: `all files that you wish to include should follow the *.inc.html format`. The gulp task ignores `*.inc.html` files, but will try to process & create email templates from all `.html` files.
|
||||||
|
|
||||||
You are of course encouraged to change the default structure for your use case.
|
You are of course encouraged to change the default structure for your use case.
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue