You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In Carbon's current grid guidance, Condensed grid is used to achieve a 2px division between grouped items (typically cards or tiles) placed on grid. However, this visual treatment is rarely found in the IBM Design Language. Even Carbon homepage and IBM Design Language homepage employs a 1px division between cards in groups. We have yet found compelling examples that uses condensed grid as-is to achieve a 2px division. Digital team (IBM.com) would like to use a 1px division in card groups as well, and the current Condensed grid implementation is blocking it.
The suggestion is to update Condensed grid to support 1px division to really enable teams to build designs already established by the Language.
Details or "Must have" functionality
Zero out the gap between items placed on grid by default. Items get full width of the columns assigned. Division between adjacent items is achieved by adding 1px border, either$ui-03$ui-04 or $ui-05.
Proposed designs for Card groups on IBM.com
A section from the Learn page. Design come from IBM.com Reboot team (contact persons Lila Title, Shixie Shi Trofimov) and IBM.com Digital Design System team (Wonil Suh, Lara Hanlon, Olivia Flory).
On mobile, all cards stack vertically, 1px border-top $ui-03 on touching cards
Desktop (xlg) breakpoint alone:
Comparison. More explorations exist if anyone wanna see them.
Justification
Visual weight of a 2px division using $ui-background vs a 1px division using $ui-03 is about the same. We should unify so designers don't get confused seeing exemplifying live pages differ from tooling and guidance.
List of places where 1px division is seen on official sources exemplifying the Language:
shixiedesign
changed the title
WIP - [Condensed grid] Remove 2px gutter and achieve grid division with 1px border-left between adjacent cards
[Condensed grid] Remove 2px gutter and achieve grid division with 1px border-left between adjacent cards
Apr 28, 2020
shixiedesign
changed the title
[Condensed grid] Remove 2px gutter and achieve grid division with 1px border-left between adjacent cards
[Condensed grid] Remove 2px gutter and achieve grid division with 1px border
Apr 28, 2020
Summary
In Carbon's current grid guidance, Condensed grid is used to achieve a 2px division between grouped items (typically cards or tiles) placed on grid. However, this visual treatment is rarely found in the IBM Design Language. Even Carbon homepage and IBM Design Language homepage employs a 1px division between cards in groups. We have yet found compelling examples that uses condensed grid as-is to achieve a 2px division. Digital team (IBM.com) would like to use a 1px division in card groups as well, and the current Condensed grid implementation is blocking it.
The suggestion is to update Condensed grid to support 1px division to really enable teams to build designs already established by the Language.
Details or "Must have" functionality
Zero out the gap between items placed on grid by default. Items get full width of the columns assigned. Division between adjacent items is achieved by adding 1px border, either
$ui-03
$ui-04
or$ui-05
.Proposed designs for Card groups on IBM.com
A section from the Learn page. Design come from IBM.com Reboot team (contact persons Lila Title, Shixie Shi Trofimov) and IBM.com Digital Design System team (Wonil Suh, Lara Hanlon, Olivia Flory).
On mobile, all cards stack vertically, 1px border-top
$ui-03
on touching cardsDesktop (xlg) breakpoint alone:
Comparison. More explorations exist if anyone wanna see them.
Justification
Visual weight of a 2px division using
$ui-background
vs a 1px division using$ui-03
is about the same. We should unify so designers don't get confused seeing exemplifying live pages differ from tooling and guidance.List of places where 1px division is seen on official sources exemplifying the Language:
IBM Design Language homepage:
https://www.ibm.com/design/language/
Carbon homepage, icon library, components overview... no where on Carbon is 2px division ever used
https://www.carbondesignsystem.com
https://www.carbondesignsystem.com/guidelines/icons/library
https://www.carbondesignsystem.com/components/overview
IBM Design Thinking
https://www.ibm.com/design/thinking/page/courses/Practitioner
The text was updated successfully, but these errors were encountered: