@bsi-cx/design-master-template-email

The BSI CX master template for e-mails. This repository serves as the foundation for creating new templates. You can fork this repository to create your own BSI CX design.

This repository uses the BSI CX design standard library for content elements.

To build the design ZIP files, the BSI CX design build based on webpack is used. Checkout the Wiki to get more information on the design build.

To get more information on BSI CX designs, checkout our online documentation.

Requirements

To use this package you have to fulfill the following requirements:

• Node >= 16.16.0
• NPM >= 8.11.0
• A code editor e.g. Visual Studio Code, IntelliJ or Web Storm
• To test your design, you need access to BSI CX

Setup

Fulfill the requirements, download or fork this repository and run the following command in your project folder (where the package.json is placed):

npm install

Make sure you run npm update regularly (e.g. once a week). To view the preview template locally, run the following command:

npx webpack serve --config webpack.config.js --mode development --progress

Supported Clients

We do our best to support as much clients as possible. However, discontinued software versions and operating systems are not supported.

Deprecated elements

CX 23.2 introduced a new format for defining CX styles, which allows its use in e-mail templates (see documentation). As a result, styles have been added to content elements in the standard library. Content elements that exist in different variants (e.g. a button with different alignments) can now be replaced by a single content element with styles. Therefore, no longer required elements have been archived in this template for design from 23.2. Archived elements are still available in the design, but are no longer accessible in the content editor in the selection list of elements. This allows updating the design from 22.0 (or smaller) to 23.2 without losing these elements in an existing content.

The following content elements are therefore deprecated and flagged with .withArchivedMinVersion(Version.CX_23_2) in the design.js file:

• Layout elements:
  • layout-colored
  • layout-light-footer
  • col-two-ratio-1-2
  • col-two-ratio-2-1
• Base elements:
  • spacer-small
  • spacer-large
  • image (replaced by img-with-style)
  • img-66
  • img-50
  • img-33
  • cta-center
  • cta-right

Known issues

The following issues on different email clients are known, but cannot be solved easily due to technical limitations of these email cients.

• Outlook on Windows:
  • Various Ghost lines when zoom level inside email is not 100%
  • Rounded corners on images and buttons not supported
  • Button is not fully clickable and incorrect spacing/indent when text breaks to multiple lines
• Dark Mode: Dark mode visualization differs between clients
• GMX - Windows 10: Fonts are only displayed correctly if no fallback fonts are specified
• Web.de - Windows 10: Fonts are only displayed correctly if no fallback fonts are specified

We would highly appreciate pull requests to resolve these issues if you are able to resolve one of them.

Emerging issues

If you have any problems using this package or found a bug, please create a new issue in this repository on GitHub.

Contributing

If you like to contribute to this project, feel free to fork it and create a pull request.