0.0.1 • Published 3 years ago

@radval/stencil v0.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

Dependencies GitHub Issues Contributions welcome License

Why?

Coding responsive HTML that works on all email clients is daunting and time consuming. stencil helps you create beautiful emails in just a couple of lines of code.

Install

npm install @radval/stencil
//or
yarn add @radval/stencil

Usage

const Stencil = require('@radval/stencil')


const stencil = new Stencil('transactional')
const html = stencil.render({
    heading: 'Welcome, Jane! 🎉',
    message: 'We’ve heard you like emails!',
})

Each stencil email has the same structure: header, body, footer. The header has a logo, heading (title), message and an action button. The footer contains social media links, the business address and the unsubscribe message.

Check out stencil.email to see how each template looks!

There are 4 body categories:

  • welcome: Adds a list of tasks or next steps to follow.
  • transactional: Suited for password resets, account-related alerts, event-driven notifications and so on.
  • confirmation: Adds a confirmation code.
  • newsletter: Adds an articles list, each having an image, title, subtile, description and action button.

Customization

There are several ways in which you can customize stencil emails: beyond text you can change the color theme and each image and icon. Customization is done by passing a view object to the render method. Keep in mind that all the urls you're using have to be publicly available so that the recipient of your emails can see them. Also, all of the properties are optional, although without some of them the email would make little sense.

Here's what you can tweak:

Top-level views

Sent directly to the render method.

General

NameDescriptionType
titleThe title that shows up in web browsers tabstring
previewThe preview that shows up in email clients listsstring
fontThe global fontfont
logoThe logoimage
bannerA image banner appearing under the logoimage
actionThe header main button's actionaction
headingThe header's titlestring/html
messageThe header's messagestring/html
socialThe footer's social media linksarray<social>
businessAddressThe business address below the social media linksaddress
unsubscribeThe unsubscribe messagestring/html

Welcome

NameDescriptionType
stepsA todo or next steps liststeps

Confirmation

NameDescriptionType
codeThe confirmation codestring/html

Newsletter

NameDescriptionType
articlesA list of articlesarray<article>

Objects

These are used by the view's properties (see above)

Font

NameDescriptionType
nameThe font name, (e.g. Roboto)string
urlThe font URL (publicly available)string

Image

NameDescriptionType
widthThe width (don't forget the CSS units i.e. 100px)string
heightThe height (don't forget the CSS units i.e. 100px)string
srcThe image URL (publicly available)string

Action

NameDescriptionType
labelThe button labelstring
hrefThe target URLstring

Social

NameDescriptionType
nameProvider nameone of twitter, facebook, instagram, pinterest, tiktok, whatsapp, youtube
hrefThe target social page URLstring

Address

NameDescriptionType
firstLineThe address first line (e.g. Bohemian Inc, 221B Baker Street)string
secondLineThe address second line (e.g. London, United Kingdom)string

Steps

NameDescriptionType
titleThe title above the liststring/html
itemsList itemsarray<steps-item>

Steps item

NameDescriptionType
iconThe item iconimage
descriptionThe item descriptionstring/html

Article

NameDescriptionType
iconThe article iconimage
titleThe article titlestring/html
subtitleThe article subtitlestring/html
previewThe article short previewstring/html
actionThe item descriptionaction