Global layout

Global layout is the way we arrange elements on a page to create a consistent experience for the user.

Overview

To keep consistency across products, we have determined basic layout rules to display informations on pages with 3 PageLayout sizes and 3 layout item sizes.

PageLayout

PageLayout is always centered on the page

Adapt PageLayout to the complexity and number of informations to display on a page. Few exemples :

• Prefer a Small PageLayout to display a single form with few imputs or a simple datatable with two/three columns.

• Use a Medium PageLayout to display a more complexe datatable or to create a page with several cards in it.

Name	Size
Small	640px
Medium	1024px
Large	2000px max

illustration of PageLayout

If you need to display more than one element in a page, use LayoutItem to create columns in your page.

Layout item

LayoutItem are used to create more complex PageLayout with columns. It helps to display more informations in the same page by keeping while maintaining legibility.

Be mindful when choosing LayoutItem to display informations. Few exemples :

• Use S LayoutItem to display text

• Prefer M LayoutItem for richer panel such as forms

S/M LayoutItem can not be used alone in a container, they must be combined with a Flex LayoutItem.

All LayoutItem are always separated by 24px.

Illustrations

Responsive Web Design

Responsive Web Design is the capacity of an interface to be adapted to any monitor resolution (from computer screen to mobile). With RWD, users are able to navigate through our products and perform their tasks, whatever their IT tool are.

Designs must be provided with responsive versions depending on breakpoints. Possible Breakpoint values are :

• lg (1440px)

• md (1080px)

• sm (768px)

• xs (540px)

Exemple of a responsive version with a complex layout and a datatable

Breakpoint Feature Block

Not all designs and features should be responsive. Indeed, we have seen with some of our complex functionalities that sometimes, on smaller screens, usability is degraded.

Thus, for features that would not work on smaller screens, designs must be provided with a Breakpoint feature block :

Breakpoint Feature Block on mobile

Breakpoint Feature Block is a specific empty state letting users understand why they cannot access the feature.

It's up to each project to define at which beakpoint this message is shown. The illustration, title and subtitle have default value but can be overided. By default, there is no Primary Button, but it can be added to redirect to another page is an alternative solution is available.

Key Takaway

Do

• Provide informations about page structure

• Respect predefined Page and Item Layout

• Ensure to provide responsive version of complex pages

Don't

• Custom layouts

• Allow complex functionnalities run under smaller screens