Background goal

There are different layout issues across projects (and skins). Some of them are:

• There is not a breakpoint and layout strategy, leading to layout variations across projects and skins.
• There is not a clear strategy for how multi-column layout is convert to single-column on small screens.
• There is not a unified strategy to scale components on smaller screens.
• There is not clear strategy for some of the breakpoints (like desktop-wide and tablet).

A clear and unified responsive layout strategy is needed. This task is to establish a unified layout strategy to address these issues.

Open questions

• We will test all these solutions with a real project. We need to decide which team and project we want to test the layout solutions with.

Acceptance criteria

• T373901: Responsiveness: align on understanding, project scope, and goals
• T375904: Define responsive layout work
• T378367: Responsiveness: Explore how to create responsive layouts in Codex
• T379395: [EPIC] [New component] Container: Add responsive Container component to Codex
• T298198: [EPIC] Grid: Define a responsive column grid system in Codex
• Define layout strategy for all breakpoints
• Define Responsiveness guidelines
• Apply Responsiveness guidelines to Codex components

Future tasks

• T338021: [EPIC] Buttons and Inputs: Determine the approach for a large size
• T338163: Button, other interactive components: consider a "responsive" size
• T302884: [MenuItem] Responsive MenuItem component