layout.md

Layout

• Box
• Stack
• Inline
  • numeric space
  • between
  • around
  • evenly
• ResponsiveLayout
• HeaderLayout
• GridLayout
  • Basic
  • Grid template 6+6
  • Grid template 8+4
  • Grid template 5+4
• MasterDetailLayout
• NegativeBox
  • Without NegativeBox
  • With NegativeBox
• Vertical ryhthm
• Doubts?

Box

Box provides a set of padding options which can be used to create container elements with internal spacing.

Accepted props:

• padding
• paddingX / paddingY
• paddingTop / paddingRight / paddingBottom / paddingLeft

<Box paddingX={16} paddingY={32}>
  <Child />
</Box>

⚠️ Do not use Box to add external spacings or distribute items, instead use Stack or Inline.

Stack

Vertically distributes its children using the given space separation

<Stack space={24}>
  <Child1 />
  <Child2 />
  <Child3 />
</Stack>

Inline

Horizontally distributes its children using the given space separation. This component can be considered as an horizontal Stack

ℹ️ Items can be aligned vertically. Check Inline component in Storybook to learn more about it.

numeric space

<Inline space={16}>
  <Child1 />
  <Child2 />
  <Child3 />
</Inline>

between

Distribute items evenly. The first item is flush with the start, the last is flush with the end

<Inline space="between">
  <Child1 />
  <Child2 />
  <Child3 />
</Inline>

around

Distribute items evenly. Items have a half-size space on either end

<Inline space="around">
  <Child1 />
  <Child2 />
  <Child3 />
</Inline>

evenly

Distribute items evenly. Items have equal space around them

<Inline space="evenly">
  <Child1 />
  <Child2 />
  <Child3 />
</Inline>

ResponsiveLayout

This component creates a responsive container for your page content. The size of this container depends on the viewport size.

<ResponsiveLayout>
  <MyFeature />
</ResponsiveLayout>

Mobile	Tablet	Desktop

HeaderLayout

The HeaderLayout is responsible for render the page header and related components. It uses the ResponsiveLayout internally so you must not wrap it inside one.

<HeaderLayout header={<Header title="Header" />} />
<ResponsiveLayout>
  <MyFeature />
</ResponsiveLayout>

Mobile	Tablet	Desktop

GridLayout

The GridLayout uses defines a grid with a set of columns where you can place your components. Different screen sizes will have different number of columns. This component must be used inside a ResponsiveLayout

Basic

<ResponsiveLayout>
  <GridLayout>
    <Component1 />
    <Component2 />
    {/* ... */}
    <ComponentN />
  </GridLayout>
</ResponsiveLayout>

Mobile	Tablet	Desktop
1 column	1 column	12 columns

This layout is quite low level and not very useful by its own. When implementing a feature, use one of the available grid templates

Grid template 6+6

<ResponsiveLayout>
  <GridLayout
    template="6+6"
    left={<LeftComponent />}
    right={<RightComponent />}
  />
</ResponsiveLayout>

Mobile	Tablet	Desktop

Grid template 8+4

<ResponsiveLayout>
  <GridLayout
    template="8+4"
    left={<LeftComponent />}
    right={<RightComponent />}
  />
</ResponsiveLayout>

Mobile	Tablet	Desktop

Grid template 5+4

<ResponsiveLayout>
  <GridLayout
    template="5+4"
    left={<LeftComponent />}
    right={<RightComponent />}
  />
</ResponsiveLayout>

Mobile	Tablet	Desktop

MasterDetailLayout

The master detail layout is a common layout pattern in applications where you have a list of items in a left sidebar and a detail view inside a main content area in the right. When you select an item from the sidebar, the detail of that item is shown in the main content area. In mobile, this translates to a navigation of 2 levels, a first screen with the list and a second screen with the content.

<MasterDetailLayout isOpen={isOpen} master={listView} detail={detailView} />

The isOpen prop controls whether the master (when false) or detail (when true) view is shown in mobile.

Take into account that the detail view is always visible in desktop, so if you want to show an emtpy state in desktop when there isn't any selected item from the aside list, you can do something like this:

<MasterDetailLayout isOpen={isOpen} master={listView} detail={isOpen ? detailView : emptyCase} />

Mobile Master	Mobile Detail	Desktop

NegativeBox

Some components, like non boxed Lists, need to be rendered overflowing its container, because the hover effect is larger than the container. This can be achieved using a NegativeBox

Without NegativeBox

Outline	Preview

As you can see there are two problems. The hover is not filling available horizontal space and Row circles are not aligned with the content container. These problems are solved using NegativeBox.

With NegativeBox

<ResponsiveLayout>
  <NegativeBox>
    <RowList>
      <Row1 />
      <Row2 />
      <Row3 />
    </RowList>
  </NegativeBox>
</ResponsiveLayout>

Outline	Preview

Hover effect fills horizontal space and circles are aligned with the container edge.

Vertical ryhthm

Vertical rhythm is an important concept in web design and development. It makes the page feel consistent and visually pleasant. It is important to maintain the rhythm across the site.

Elements inside our page content can be divided in 3 main groups:

• Container: should have a top and bottom space of 24px
• Sections: should have a 32px space between them
• Elements: should have a 16px separation between them

This is how a page layout could look like:

<HeaderLayout header={<Header title="Header" />} />
<ResponsiveLayout>
  <Box paddingY={24}>
    <Stack space={32}>
      <Stack space={16}>
        <Title1>Section 1</Title1>
        <Text2 regular>
          Some example text
        </Text2>
      </Stack>

      <Stack space={16}>
        <Title1>Section 2</Title1>
        <NegativeBox>
          <RowList>
            <Row1 />
            <Row2 />
            <Row3 />
          </RowList>
        </NegativeBox>
      </Stack>
    </Stack>
  </Box>
</ResponsiveLayout>

✏️ View this example in playroom

Doubts?

Don't hesitate to ask at Mistica Teams