MS Responsive Design in PROCEED - PROCEED-Labs/proceed GitHub Wiki

This page summarizes how to implement responsive design for PROCEED using Ant Design.

Responsive design aims to maximize a website's user experience by scaling the layout and content of a website according to the device's screen resolution that is being used without creating new versions of the website. Several tools can help us to create a fluid layout:

• Usage of media queries and breakpoints to specify certain layouts for certain screen sizes
• Usage of a grid consisting of rows with a variable number of cols for each media query
• Usage of CSS flexbox to set spacing between and alignment for elements
• Usage of scalable units according to use case

Ant Design has a list of predefined breakpoints, while we have already adjusted them to our needs. We only use the highlighted ones. Every PROCEED UI layout should be adjust to them accordingly:

We have designed some scaffolds before implementing the UI. You can find the design file here.

In order to extract the breakpoint of the user's window, use the Grid.useBreakpoint() function provided by Ant Design's grid component:

import Grid from 'antd';
const breakpoint = Grid.useBreakpoint();

//JSX

{breakpoint.sm ? ... : ...}

The grid component provides a fluid layout for content using 24 sections. It is used by inserting columns into one row. Ant Design recommends to use 1 - 4 columns per row. This example shows one row with three equally big columns:

import { Row, Col } from 'antd';

//JSX

<row>
<col span={8}></col>
<col span={8}></col>
<col span={8}></col>
</row>

Similarly to bootstrap classes, the size of each column can be set responsively using the breakpoints as properties:

//JSX

  <Row>
    <Col xs={2} sm={4} md={6} lg={8} xl={10}>
      Col
    </Col>
    <Col xs={20} sm={16} md={12} lg={8} xl={4}>
      Col
    </Col>
    <Col xs={2} sm={4} md={6} lg={8} xl={10}>
      Col
    </Col>
  </Row>

todo: add more use cases / specific examples

As an alternative for more complex responsive layouts, use CSS's flexbox.

The following components have a property that allows for direct sizing using the breakpoints:

• Avatar
• Description
• Layout
• List
• Table
• Steps

The ConfigProvider has two big use cases: Global configurations and localizations for the date, the language and the theme.

The ConfigProvider allows for global, uniform configurations of every antd component. In order to achieve this, add the props that you want to set globally for a specific component. Global props are called Design Tokens, whereas componenent props are called Component Tokens. In the following example, the all button components within this ConfigProvider would have the class name "exampleClass" as well as a red background color:

import { ConfigProvider } from 'antd';

const App = () => {
  return (
    <ConfigProvider
      componentSize="large"
      button={{ className: 'exampleClass', style: { backgroundColor: 'red' } }}
    >
    </ConfigProvider>
  );
};

export default App;

While you can add custom class names and styles for every component, specific components have more available props (please refer to the Component Config documentation). There are also a few more general props available such as componentSize and componentDisabled (please refer to the ConfigProvider API).

Customizations to themes are mainly achieved through Design Tokens. In order to use a Design Token, simply add your desired configurations into the token prop of ConfigProvider's theme prop. In PROCEED, we have implemented the ConfigProvider in components/theme.tsx:

const Theme: FC<PropsWithChildren> = ({ children }) => {
  return (
    <ConfigProvider
      componentSize="middle"
      theme={{
        token: {
          //Add your global design tokens here
        },
        components: {
          //Add your tokens for specific components here
          },
        },
      }}
    >
      {children}
    </ConfigProvider>
  );
};

An in-depth explanation regarding themeing can be found here, whereas a list of possible tokens can be found in this API.

Furthermore, settings for languages and dates are available. Please check the respective documentation for more details.

• In order to ensure an aesthetically pleasing layout, components with little content should not scale more than necessary. For this, center the content and set its max-width to a value between 40rem and 50rem depending on the content's size.