There are different issues related with responsive layouts across projects, primarily due to a lack of breakpoint and layout strategies. This task is to collaborate with an engineer to explore potential solutions for creating a flexible, responsive layout in Codex.
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| In Progress | bmartinezcalvo | T340535 [EPIC] Responsive layout approach | |||
| Resolved | egardner | T378367 Responsiveness: Explore how to create responsive layouts in Codex |
Hey @bmartinezcalvo, I'd like to propose some ideas for consideration here.
I think that we would benefit from thinking about layouts as another type of component in our library. Here are some example "layout components" we could include:
Just like other components, we could offer these in both CSS-only and Vue versions. Maybe the Card component should already be considered part of this category too (also Tabs and Accordion maybe).
Some of these components might be very basic (for example, a CdxContainer might just be a <div> element with some basic margins or padding applied). Others might define some optional styles that users may or may not use in all situations (a Section component could give special treatment to heading or subheading text inside it for example, to help create consistent typographic styles). A Colums component would probably use Flexbox for styling, while a Grid component might use CSS Grid. Nesting of components would probably be common here as well (perhaps you have a Section component which contains Columns full of Media Objects on a dashboard page).
I think that starting with "building blocks" like this, as opposed to top-level "page" layouts, will be more useful. In MediaWiki a lot of top-level styling is still going to come from the skins, but having a set of Layout components would let people build out things like Special pages in consistent ways from a series of re-usable parts.
I could see T309109 being relevant to this task – if we add a bunch of new related layout components to the docs site, it would be helpful to group them together.
For inspiration, I would suggest looking at the layout components defined by Bulma, a CSS-based component library that follows a lot of good practices.
For example, Bulma has a container layout (basically a CSS-only component) that applies some basic responsive styles, but it also has a few options that can be specified by the user (like whether to use a fixed max width and center, or whether to be "fluid" and fill the whole page). Their section layout applies more margins/padding and comes in "medium" and "large" variants.
Advantages of a component-based approach to layout:
I think you are heading in the right direction Eric! Really like how Bulma is approaching this, makes a lot of sense quickly. I think deciding what the core components are to create a responsive layout for most of our future use cases will be interesting, for example, we probably don't need to support nav or hero for v1?
Also out of curiosity, I poked around some of design systems to see how others are approaching this, I think its worthwhile to see how much is similar and where things differ:
We will use https://phabricator.wikimedia.org/T379395 to prototype this approach for a basic Container component. If that works well we will write an ADR documenting this (as part of that task).