Link copied!

For Developers

If you're a developer, this document helps you getting started with the relevant parts of the Emarsys Design System: the UI Framework, the code examples, and the documentation.

What is the Emarsys Design System?

The Emarsys Design System is a collection of tools and resources that helps product teams creating high-quality UI for the Emarsys Platform. The Design System mainly consist of the UI Framework, code examples, documentation, guidelines, and tools for designers.

Benefits

  • Save time on implementation: our UI Framework comes with ready-made components (in the form of CSS classes and Web Components), so product teams don't have to fiddle too much to match the design.
  • Save time on maintenance: using Design System components makes it possible to push bug fixes and enhancements to the implemented UI, so product teams don't have to spend time on maintenance.
  • Framework-agnostic: our UI Framework uses standard CSS, JavaScript, and Web Component technologies. This makes it possible to be used alongside other front-end frameworks, such as Vue, Angular, or React.

Using the UI Framework

The Emarsys UI Framework (ui-framework-service) is part of the Emarsys Design System that contains code and assets needed to make UIs for the Emarsys Platform. This includes CSS, JavaScript, Web Components, icons, typefaces, etc. You simply include our JavaScript and CSS files, and you can start working with the UI Framework right away!

Creating a Page

After creating a proper HTML5 document, you just need to link the UI Framework CSS and JavaScript files to start using all the Design System components and utilities.

CSS:

<link rel='stylesheet' href='https://client-version.cf.emarsys.net/ui/latest/css/app.css'>

JavaScript:

<script src='https://client-version.cf.emarsys.net/ui/latest/js/app.js'></script>

Set up your base layout: you can find blueprints for various layouts in our Structure section. If you're using an iframe, make sure to check out our iframe layout for some helpful pointers!

Set up grids: our Design System comes with a classic Bootstrap-like grid, and a modern flex-based grid.

Working with Components

The UI Framework comes with a multitude of different ready-made components. Some of them are simple CSS components (e.g. <div class="e-box">), some are Web Components (e.g. <e-notification>). Code examples and API documentation for these components can be found on this Design System website. Use the navigation or the search bar to find the components you need!

Extras

Design System Playground: our Design System Playground is a browser-based sandbox environment for the UI Framework, where you can experiment with components, save snippets, and share it with others.

Turn on production-ready flippers: You can turn on all of our production ready flippers in localhost or on your test pipeline by loading the script below.

Don't use this script in production, only in localhost or on the test pipeline! 
<script src='https://client-version.cf.emarsys.net/ui/latest/js/test-setup.js'></script>

Using the "staging" libraries: our CSS and JavaScript files have a "staging" version, which contain all the latest commits — even before they get into the production code. We recommend using these for testing your products in your development environment.

<link rel='stylesheet' href='https://client-version-staging.cf.emarsys.com/ui/latest/css/app.css'>
<script src='https://client-version-staging.cf.emarsys.com/ui/latest/js/app.js'></script>

Writing in Pug: it's easier to write your HTML markup in the Pug template language. Our Design System provides Pug code (formerly known as Jade) for each component. Learn more about working in Pug.

Contributing to the Design System

Changing components: if you want to change, enhance, or fix a component, please get in touch with the Design System team. Read more about this process in the Contribution documentation on GitHub.

Adding new components: if you want to expand the Design System with a brand new component, please get in touch with the Design System team. Read more about this process in the Contribution documentation on GitHub.