Email templates & grid
WARNING
🚨 Current @semcore/email
package is deprecated and not recommend for use. New major version is planned and will be released one day.
This article will guide you through creating an email template with components included in the Semcore library. In the end, you will get HTML code that you can copy and paste to your email client.
Setting up the project
Create a new directory for your project and navigate to it.
Download the semcore/email package and place all the files to your project directory.
Install dependencies:
npm install
Create a directory for your email template. Replace
template_name
with the name of your template:bashmkdir src/template_name/examples
Create an HTML page for your template:
bashtouch src/template_name/examples/index.html
This is where the code of your template will live.
If you need additional CSS styles, create a stylesheet file and add your styles there:
bashtouch src/template_name/index.css
Including @semcore/email
styles
To use @semcore/email
styles in your template, add @semcore/email/lib/core/index.css
to your index.css
file. This will include all available styles. You can also include styles of specific components, for example @semcore/email/lib/button/index.css
.
To use CSS variables, include @semcore/email/lib/core/var.css
in your index.css
file.
Using styles in the base template
All styles are included in the template @semcore/email/lib/core/base.html
(example: <link rel="stylesheet" href="../../../lib/core/index.css" />
);
To include your styles, link an external stylesheet, or put the styles in the <style>
tag. You can use both options in one block.
<block name="head">
<!--You can use either a stylesheet or the <style> tag, or both-->
<link rel="stylesheet" href="YOUR STYLES" />
<style>
YOUR STYLES
</style>
</block>
or
<block name="content">
<style>
YOUR STYLES
</style>
</block>
Using variables in HTML code
You can use both internal and external variables in your HTML code.
Internal variables:
html<p>{{text}}</p> <script locals> module.exports = { text: 'Hello', }; </script>
External variables:
html<p> <raw>{{text}}</raw> </p>
Rendering the template
To test your template in the browser, run:
npm run watch;
npm run serve
To build the email template ready for production, run:
npm run build
This command will render your email template to the file .tmp/template-name/examples/index.html
. Copy and paste the code to your email client. Your emails will shine!