[foundations]: Grid - Githubissues

swisspost / design-system

The Swiss Post Design System pattern library for a consistent and accessible user experience across the web platform.

https://design-system.post.ch

Apache License 2.0

119 stars 14 forks source link

[foundations]: Grid #3276

Open Cian77 opened 1 month ago

Cian77 commented 1 month ago

Description

Open issues:

Tokens:

[ ] Grid

Design

https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=26-51

Tokens

[ ] Tokens for this component are ready

Tasks

### 💻 Tasks
- [ ] Create a POC to discover any possible issues with the breakpoints and/or tokens
- [ ] CSS implementation
- [ ] Documentation in Storybook
- [ ] End to end tests
- [ ] Visual regression tests
- [ ] Design review

gfellerph commented 1 month ago

Should we copy over the bootstrap grid and use tokens to override the bootstrap vars? Should we do a custom implementation that is close enough to bootstrap for minimal breaking changes?

Could be challenging to merge the bootstrap styles/mixins with tokens
Copy bootstrap grid into codebase would be the best approach
Mobile uses only 6 columns
There are 5 breakpoints instead of 3

gfellerph commented 1 week ago

As discussed today, implement breakpoints component tokens that have separate breakpoints for grid (XS, SM, MD, LG, XL) and components (Mobile, Tablet, Desktop).