Mirakl Design
Mirakl Design
  • Getting started
    • Welcome to Roma
      • Design principles
  • Design
    • Components
      • Actions
        • Action menu
        • Buttons
        • Button group
        • File download
        • Save bar
        • Tasklist
        • Contextual Toolbar
      • Datalist
      • Datatable
      • Feedback
        • Alerts
        • Activity Loader
        • Badge (status)
        • Empty state
        • Snackbar
      • Form
        • Fields
        • Pickers
        • Selection controls
        • Tree
      • Images
        • Illustrations
        • Icons
        • Media
      • Navigation
        • Hyperlink
        • Page title
        • Sidebar
        • Top bar
      • Overlays
        • Modal
        • Popover
        • Tooltip
        • Side Drawer
      • Structure
        • Global layout
        • Panel
          • Activable Panel
          • Clickable Panel
          • Expandable Panel
          • Panel tabs
          • Totalizer Panel
        • Card
    • Patterns
      • Advanced selection
      • Configure options
      • Displaying data
      • Displaying history
      • Errors
      • Forms
        • Form - Creation mode
        • Form - Edition mode
        • Form - In a modal
        • Error Management
        • Stepper form
        • Onboarding form
      • Loading
      • Progressive disclosure
  • content
    • Writing for Mirakl
      • Grammar and formatting
    • Vocabulary
      • Mirakl products
      • Which verb to use
Powered by GitBook
On this page
  • Overview
  • PageLayout
  • Layout item
  • Illustrations
  • Responsive Web Design
  • Breakpoint Feature Block
  • Key Takaway

Was this helpful?

  1. Design
  2. Components
  3. Structure

Global layout

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

Last updated 1 year ago

Was this helpful?

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 in it.

Name
Size

Small

640px

Medium

1024px

Large

2000px max

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)

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 :

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

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

empty state
cards
illustration of PageLayout
Exemple of a responsive version with a complex layout and a datatable
Breakpoint Feature Block on mobile