Screens: Sign-In
Explore how to design and build the sign-in screen in React by arranging layered layouts with styled components and grid templates. Learn to create flexible position divs and integrate these into Storybook for interactive development and testing.
We'll cover the following...
We'll cover the following...
While the lower levels tend to be about styling and controlling inputs, the middle layers,sometimes called screens or panels, tend to be about layout. We need to determine how much space each thing will take and how to arrange them. These screens are the Sign-in screen, Win screen, Lose screen, and the Play screen.
Sign-in screen
We begin by creating a new file called screens.js ...