Getting started

In this guide, we'll help you getting started making a page using the Emarsys UI Framework.

Writing in Pug

It's easier to write your HTML markup in the Pug template language. Our UI Framework provides Pug (formerly known as Jade) code for each component.

Learn more about working in Pug

The basic frame

In Emarsys, there are two common ways to display your UI:

As a standalone page in suite
Inside an iframe

Standalone page in suite

In most cases, you'll be making a standalone page for your UI.

The following are provided by the suite:

HTML5 doctype
<meta charset=utf-8>
Emarsys UI Framework CSS
Emarsys UI Framework JavaScript
Navigation bar component

But you'll have to manually include the header component. If you have some optional components — such as the steps bar component —, don't forget to include those in the frame as well.

Inside an iframe

There are some instances when you want to display your UI inside an iframe. (e.g. when you're making plug-ins which is used in multiple services)

If you use an iframe, you'll have to declare the full header:

You'll need to declare the proper Doctype for HTML5:<!DOCTYPE html>
You'll need to declare the UTF-8 Charset:<meta charset=utf-8>
Emarsys UI Framework CSS:<link rel='stylesheet' href='https://redirector.eservice.emarsys.net/ui/latest/css/app.css'>
Emarsys UI Framework JavaScript:<script src='https://redirector.eservice.emarsys.net/ui/latest/js/app.js'></script>

Grid and Layout

There are different grid systems you can use in the Emarsys UI Framework.

Some of them require you to use specific content wrappers, so please read their component pages to get the exact details how to use them.

Bootstrap Grid

Our UI Framework provides a grid that's similar to the one you can find in Bootstrap, so it's easier to understand and to use.

If you build a page layout with our Bootstrap grid, you have to wrap the page into an e-container.

Grid component

Flex Grid

Our UI Framework also provides a modern, flex-box-based grid.

If you build a page with our flex grid, you have to wrap the page into an e-container.

Flex grid component

Full Height Page

You have the ability to optimise the layout for the height of the browser window. You have to wrap your document into fullheight classes to make it work in flex-box:

.e-fullheight.e-fullheight-has_header
 .e-fullheight__wrapper
   .e-fullheight__container
     .e-fullheight__content Left side content
     .e-fullheight__content.e-fullheight__content-box
       .e-fullheight__header
         .e-fullheight__actions
       .e-fullheight__body Right side content

Adding Components

Please use this UI Framework to find components you need, learn about when to use them, and how to implement them.

Use the search bar in the top to find a specific component (e.g "button"), or browse by category in the left sidebar.
See the variations of the component, and pick the one you need.
Check and copy the code of the component (both HTML and Pug (Jade) are available!)

Refer to these sample layouts to see how to build commonly used layouts in Emarsys.

Questions

If you have a question regarding components or layouts, reach out to the UI Team using the speech bubble icon in the bottom right.