Building Responsive User Interfaces by Composing Primitive React Components
In this lesson we’ll improve our login page by making it responsive. We’ll continue using the primitive components, we’ve created in the previous lessons. We’ll create a complete layout without writing any custom styles, just by composing primitive components: Box, Flex, Grid, Stack, Text, Heading, Link, Button, and Input.
We’ll split the screen into two sections horizontally: one with the form, and another with some useful information about the app. We’ll change the layout to single-column on mobile devices, and hide one of the columns.
Checkout this lesson’s Git repository for all the components we’re going to use.
Artem Sapegin: [0:00] Let's extract the form of this song component to make it easier to work on the page layout. Select all, copy, create a new file, paste, save as LoginForm.js. Rename the component and keep only the form.
[0:19] Go back to our Login component, import the new LoginForm component, and use it instead of the original form.
[0:28] Let's use the Grid component for the page layout. Define gridAutoFlow as column and gridAutoColumns as 1fr to make columns of equal sizes, no matter how many children we are going to have.
[0:40] Now, add the second column, and use a different background to make it visible. The content of this column isn't important now, so let's just write something here. Also, let's hide the second column on narrow screens.
[0:53] Remember that all props that are coming from styled-system are responsive. Instead of a single value, we can pass in array of values for mobile, tablet, and desktop. Using the mobile first approach, we can set display down on the right column only on narrow screens and blog on tablet and desktop. We didn't specify all three values explicitly. Here, the block value will be used on the desktop too.
[1:14] Mobile, tablet, and desktop are default breakpoints in styled-system and we can change them in our ZIN file if our project has different requirements. Let's check that responsiveness works.