# Global layout

## 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

{% hint style="info" %}
`PageLayout` is always centered on the page
{% endhint %}

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](https://design.mirakl.com/design/components/structure/card) in it.

<table><thead><tr><th>Name</th><th>Size</th><th data-hidden>Size</th><th data-hidden></th></tr></thead><tbody><tr><td>Small</td><td>640px</td><td>640px</td><td></td></tr><tr><td>Medium</td><td>1024px</td><td>1024px</td><td></td></tr><tr><td>Large</td><td>2000px max</td><td>2000px max</td><td></td></tr></tbody></table>

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2Fqlud6nbPZYVVEbPpbAFq%2FPageLayout.svg?alt=media&#x26;token=72125117-cfd6-412a-abcd-3227306ecfa6" alt=""><figcaption><p>illustration of PageLayout</p></figcaption></figure>

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 :&#x20;

* Use `S LayoutItem` to display text
* Prefer M LayoutItem for richer panel such as forms

{% hint style="info" %}
`S/M LayoutItem` can not be used alone in a container, they must be combined with a Flex LayoutItem.
{% endhint %}

{% hint style="info" %}
All LayoutItem are always separated by 24px.
{% endhint %}

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2F3gv3TG250vQ6XTQ2SBmd%2FLayoutItem.svg?alt=media&#x26;token=1bf6035e-de02-4265-b8a3-e6b22f9bb883" alt=""><figcaption></figcaption></figure>

## Illustrations

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FHzAPnnx20T0JUmYNgNVD%2Fpagelayout-ex.svg?alt=media&#x26;token=7a753282-dc49-4e29-b2a3-8b118e4cccd1" alt=""><figcaption></figcaption></figure>

## 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)

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FZmrN1iRi1dQQUzaxrMEo%2FRWD.png?alt=media&#x26;token=52c870e6-3d65-4ba7-92e6-7a88f9f45d11" alt=""><figcaption><p>Exemple of a responsive version with a complex layout and a datatable</p></figcaption></figure>

### 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.&#x20;

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

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FBeDvS7EN4jKDue5EsRHD%2FBreakpoint%20feature%20block.svg?alt=media&#x26;token=8d2f4f49-91c2-4645-971d-f0c9e10c2563" alt=""><figcaption><p>Breakpoint Feature Block on mobile</p></figcaption></figure>

`Breakpoint Feature Block` is a specific [empty state](https://design.mirakl.com/design/components/feedback/empty-state) letting users understand why they cannot access the feature.&#x20;

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

{% hint style="success" %} <mark style="color:green;">**Do**</mark>

* Provide informations about page structure
* Respect predefined Page and Item Layout
* Ensure to provide responsive version of complex pages
  {% endhint %}

{% hint style="danger" %} <mark style="color:red;">**Don't**</mark>

* Custom layouts
* Allow complex functionnalities run under smaller screens
  {% endhint %}