Create responsive emails that look decent...even in Outlook!
To get running, you'll need to have the following installed:
Once you have those, just run:
npm install
npm start
The files you'll likely edit are:
src/index.hbs
: for the layout of the emailsrc/style.css
: for all your email-specific stylessrc/variables.js
: for the title, colors, and typography
In index.hbs
, several pre-made sections are included. Basically, you'll copy-paste the sections you need and delete what you don't need. Then, throw in your copy/images. If you think of some other useful section, throw it it!
The base styles (e.g. typography and base font colors) can likely be set in variables.js
. The content for pre-made sections is also stored here.
Finally, whatever other styles you need can be set in style.css. Note: because a CSS inlining process is being used, you can use several CSS3 selectors (e.g. :nth-of-type) to match certain elements. Because it's being inlined, you don't have to worry about client support for selectors.
Piece of 🍰!
index.hbs
variables.js
module.exports = {
title: 'Title goes here',
/* other stuff */
header: {
text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
image: {
src: 'http://placehold.it/160x80',
alt_text: 'header image',
},
date: 'December 2, 2015'
},
/* more stuff */
}
will output an input.html
with just header section, with the text, image and date as defined above.
Note: If a pre-made section is added to the index.hbs
without a corresponding setting in variables.js
, it will not be rendered.
See docs for more details.