Grid system - Githubissues

urfuwo / hlx-test

Apache License 2.0

0 stars 3 forks source link

Grid system #93

Closed pahupe closed 7 months ago

pahupe commented 7 months ago

Goals:

Implement the grid system (margin left/right, gutter) according to https://www.figma.com/file/OFEfvhyXJvYJ6MQZ30699m/v2.0-Brand-Digital-Design-System?type=design&node-id=2822-1135&mode=design&t=9ujuM7p8vt3wVf1N-0
Sections that use the grid system (e.g. blog pages > Related Articles section) follow the grid system design, i.e., the gutter between the cards is fixed (for each grid system breakpoint), while the cards expand horizontally (similar to how it currently is on https://news.sap.com/blog/

Constraints:

Implement them for all five SAP breakpoints (XS, S, M, L, XL)
Fixed gutter width: according to the design documentation in Frontify, the gutter (here: horizontal spacing between elements) shall have a fixed width (within each breakpoint)
For breakpoint XL, the grid shall be centered horizontally

Missing information:

Number of cards per row in the Article Page > Related Articles section, see https://adobe-dx-support.slack.com/archives/C06H8UNQ3RS/p1707145104876399?thread_ts=1707140692.239729&cid=C06H8UNQ3RS

Validation: Validate fixed gutter width using these pages:

https://main--hlx-test--urfuwo.hlx.page/blog/2023/12/being-human-in-the-age-of-ai > More on AI section and
https://main--hlx-test--urfuwo.hlx.page/tags/ai to validate the fixed gutter widths

References:

Grid System:

https://www.figma.com/file/OFEfvhyXJvYJ6MQZ30699m/v2.0-Brand-Digital-Design-System?type=design&node-id=2822-1135&mode=design&t=9ujuM7p8vt3wVf1N-0
https://sap.frontify.com/document/223141#/layout/grid-breakpoints (identical information as in Figma)
"("Within a breakpoint range, the grid has a fluid behavior. At the XL size, the grid has a fixed width when the screen width is 1600px or greater.")" - from: https://sap.frontify.com/document/223141#/layout/grid-breakpoints (identical information as in Figma)

Tiles (for cards):

sdmcraft commented 7 months ago

@pahupe , @benpeter I have this PR (#94 ) which partially addresses the margins and gutters as per spec. The blocks (like cards etc. still need to adopt the global tokens)