Update documentation

This commit is contained in:
Dan Mindru 2019-09-03 11:13:33 +02:00
parent 2970388579
commit f8687ca6d9
1 changed files with 23 additions and 18 deletions

View File

@ -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.