[Feature Request]: Carbon Layout Library

[juanencalada]

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:

• A page shell component
• Page layout sections and sub-sections
• Page layout spacing rules
• Micro layouts
• Type pairings

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

• I agree to follow this project's Code of Conduct

[github-actions]

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]

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.

• Code examples (section in Storybook) and coded layouts
• Design guidance

[juanencalada]

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!