search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.6k stars 1.76k forks source link

[Feature Request]: Carbon Layout Library #16699

Open juanencalada opened 1 month ago

juanencalada commented 1 month ago

The problem

The Carbon grid is perhaps one of the most complicated grids in any design system. Implementing the grid correctly presents challenges to designers and developers, even from the early stages of getting a page set up in code or a design tool. While there is documentation, there is not a solid starting point in code or design for teams to start from. This can lead to inconsistencies in how pages are built across Carbon sites or even within a site.

As we look to a future of AI generated Carbon sites and applications, these layout components, patterns, and guidelines will be essential for our AI-readiness plays. The idea is that as we build the smaller atomic elements like type pairings, those eventually get ingested by components like checkboxes, radio buttons, dropdown lists, etc.

The solution

Create a Carbon Layout library that includes:

Examples

Carbon for IBMer Experience Page shell Content group

Carbon for IBM Products Layouts

Carbon for Cloud Code examples (section in Storybook) and coded layouts Design guidance

Relume has a library of layouts that are used to generate whole pages: https://www.relume.io/app/project/P471250_sffmFQLr227Xy4LjVusXccIBkJsmoT-mwzkclf9xMiA#mode=wireframe

Application/PAL

Carbon for IBMer Experience

Business priority

High Priority = pressing release

Available extra resources

3 designers, maybe 1 developer, potentially more depending on the traction this gets

Code of Conduct

github-actions[bot] commented 1 month ago

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

skcele commented 1 month ago

Love this idea!

If it's a helpful reference, we have Cloud specific layouts in Carbon for Cloud & Cloud PAL Community that have been great for use cases like teams building new products, developers building new pages without designers, or even just a starting point for designers on a new product. Happy to discuss more how we utilize them.

juanencalada commented 1 month ago

Thanks @skcele, I'm glad you mentioned that! We were actually planning to reference and source as much of that and from Products in general that exists! I'm adding those links to the description!