Contribution Proposal: Grid Component about forma-36 HOT 9 CLOSED

How about apps? It may make sense to support grids now that customers can extend the entire screens in the web app.

from forma-36.

@mshaaban0

Looks great to me!

I think we discussed in person earlier about adding padding/margin spacing to this too. I think this would be overkill and the component should just be about grids. The only spacing should be the colGap/rowGap (or maybe gridGap would be nice to define both with a single value?). If we want something for margin/padding I'd probably bring back the Box component proposal.

from forma-36.

@domarku Thanks for raising your concerns!

I don't know of any multi-column layouts being considered at the moment or in the near future.

The grid use is not only for the main layout, It should also help developers to layout smaller blocks. without having to write their own styles. i.e

For the above example, devs would have to write almost the same custom css, use specific tokens, and maybe they use the grid, or flexbox. This component here, aims to reduce that, and at the same time ensure consistency (correct spacing usage).

Is there a real need for it or could we make do with the workbench component for the immediate future? Is this an alternative or an addition?

It's an addition, also the workbench should use it when it's in place.

Aside from the question of why do we need this, there may also be potential overhead introduced to both designers and developers by offering a new tool without a guideline on how to use it — If it's in Forma, does it mean I have to use it? How many columns is a good number of columns? When would there be a need for more than two columns? How can I use columns of different widths?

Documentation and guidelines for designers, and developers will be in place with the component, I don't believe that designers have to use all the grid features as devs. The grid component will also make sure that designers use spacings properly, as we won't allow custom values for rowGap, and columnGap

Finally, even though I believe any direction towards making Contentful responsive is great, it should be discussed not only on the design system level, but also strategically.

Introducing breakpoints here is completely optional, and it's also helpful to target desktop screens, and larger screens as well. I believe the component should have the proper structure and be ready for all use cases as long as it's not affecting anything.

Let me know if you have any questions. :)

from forma-36.

Thanks for the clarification, @mshaaban0.

I wasn't aware of some of these uses and it would be great if we would suggest some best practices in the component documentation.

For the above example, devs would have to write almost the same custom css, use specific tokens, and maybe they use the grid, or flexbox. This component here, aims to reduce that, and at the same time ensure consistency (correct spacing usage).

That already seems like a great benefit.

from forma-36.

Hey great proposal 👏 I'm all in for a grid component and I think we should definitely introduce breakpoints. How would you enable those?

from forma-36.

@johanneswuerbach I was thinking about breakpoints to be something like this...

Breakpoints

Usage of the breakpoints should be optional, example...

• All props that controls alignments and sizes, accepts numbers or an optional object that maps values to breakpoints

<Grid columns={12} rows={3} />

Or

<Grid columns={{mobile: 4, tablet: 8}} rows={{mobile: 1}} />

from forma-36.

Thanks for the proposal, @mshaaban0!

Before going into the implementation proposal, which I take is good, I would like to challenge the need or the problem it's supposed to be solving. There haven't been many examples of multi-column layouts in Contentful so far — perhaps only the space home, and not even that — and I don't know of any multi-column layouts being considered at the moment or in the near future. We recently set some guidelines for how and when to use the workbench component, based on the content on the page. Is there a real need for it or could we make do with the workbench component for the immediate future? Is this an alternative or an addition?

Aside from the question of why do we need this, there may also be potential overhead introduced to both designers and developers by offering a new tool without a guideline on how to use it — If it's in Forma, does it mean I have to use it? How many columns is a good number of columns? When would there be a need for more than two columns? How can I use columns of different widths?

Finally, even though I believe any direction towards making Contentful responsive is great, it should be discussed not only on the design system level, but also strategically — whether we ever plan on making the web app responsive and if we should include it in our efforts, prioritize accordingly etc.

Please let me know if I took too many steps back :)

from forma-36.

@mshaaban0 can we close this issue?

from forma-36.

@wichniowski yes we can, will follow up with another ticket for responsive

from forma-36.