search

opensearch-project / oui

OpenSearch UI Framework
Apache License 2.0
36 stars 70 forks source link

Need a more modern and tested Grid component #742

Open rednaksi91 opened 1 year ago

rednaksi91 commented 1 year ago

Describe the solution you'd like

Learn from the Grid component in MUI. The fixed 12-column layout in MUI's Grid component is an important feature that provides a consistent and predictable structure for laying out content on a web page or application. This makes it easier for developers to create responsive designs that adapt to different screen sizes and resolutions without having to recalculate measurements or adjust the layout for each individual screen.

By dividing the page into a fixed number of columns, the Grid component enables developers to easily align and position content in a way that is aesthetically pleasing and functional. This can help to create a cohesive visual design that is easy to understand and use.

Additional context

In addition, the fixed 12-column layout can also help different developers to collaborate on a project more effectively, as they can easily understand and work with a common layout structure. This can help to reduce confusion and streamline the development process.

Overall, the Grid component in MUI provides a reliable and flexible foundation for building responsive and visually appealing web applications.

BSFishy commented 1 year ago

It could be useful to builders to have a grid component, however there are several considerations that need to be made. For example, Material Design (which MUI is based off of) is a much more generalized component system that needs to be able to work in a huge range of situations. OUI on the other hand has a much smaller target. The question basically boils down to whether we should create a grid component and have builder potentially use it in ways that break pattern guidance, or create a new set of more specific layout components, similar in functionality to page, that we'll need to maintain.

KrooshalUX commented 1 year ago

Piggybacking on @BSFishy - my understanding is that currently instead of being locked into something like a 12 column grid, we use Flex which powers responsive layouts - in addition to the sass variables that define sizing and spacing.

I see this issue is marked as "new component" however, its a design system change that would all current component designs, our sass variables for spacing as well as our page templates. Even if that was not a factor, I am not sure I want to move away from that and lock into a column grid, but instead continue to provide our builders with page templates (which we need to expand our use of in the future) which gives the application consistency.