I built UX/UI components in HTML/CSS for a React SPA web application
React SPA components are set within a Flex layout shell. This React component had two static scrolling inner components. The app is both a mobile-first layout as well as a desktop layout.
My responsibility was to build the HTML/CSS portions and hand-off component resources to the React developer.
Map sketch for complex Flexbox layout
This sketch maps multiple flexbox containers, indicating flex direction, for a React SPA web app.
The project requires a shell container with an inner component. The component has two inner scrolls for users to perform tasks. The layout requires fluid flexbox containers with static scrolling elements that are also fluid and responsive.
React/SPA component with inner scrolls
This is a screenshot showing the inner component for a React SPA app.
This component is designed to fit into a responsive shell with a sidebar. The two scrolling elements are also responsive and reposition themselves for mobile browsers.
The red line in the sketch represents where this part fits.