This html email coding template is used to create html email templates using some cool technologies.

Setup

Prerequisities

• Git
• Nodejs
• Jdk 8+

Download

• Clone this repository.
• Delete git metadata to obtain pure local sources: rm -rf .git

Install

• Run node command npm install

Structure and Technology

Structure

• src/parts - html parts e.g. header.html, footer.html
  
• src/scss - scss parts
  
• src/templates - html or ftl templates

Technology

This tool using external libraries:

• gulp
• gulp-file-include
• gulp-sass
• juice
• freemarker
• browser-sync
• and other cool libraries #see package.json

Usage

npm run build

This take templates form src/templates and process:

• html parts including
• scss processing
• inlining css
• output is in _dist directory

---

npm run build-freemarker

Same as npm run build plus:

• freemarker processing

---

npm start

Same as npm run build but runs develop server with livereload

---

npm run start-freemarker

Same as npm run build-freemarker but runs develop server with livereload

Working with templates

Html email renders are different. You must use some special non-standard process

Using table layout

• use table layout due to different html email renders

Using css inlining

• your styles will be inlined. See juice

Using outlook specific styles

p.MsoNormal { margin: 0px; }

Using outlook if

<!--[if gte mso 9]>

this content will be shown in outlook only in outlook

<![endif]-->

or you can use tags

<outlook-only-start/>

this content will be shown in outlook only in outlook

<outlook-only-end/>

Using outlook hide

<![if !mso]>

this content will be hide in outlook

<![if !mso]>

or you can use tags

<outlook-hide-start/>

this content will be hide in outlook

<outlook-hide-end/>