Refactor gutters and rounded corners in blocks

shirin27 commented 4 months ago

From vg-volvotrucks-us-rd created by cogniSyb: Netcentric/vg-volvotrucks-us-rd#202

Due to changes in design and iterations in way of working in code, we should refactor some sizings and rounded corners.

[ ] Make an inventarisation of all blocks with a gutter and their values on all breakpoints
[ ] Decide in certain cases whether to switch to gap instead of margin or padding
[x] Make an inventarisation of all blocks with a border-radius and their values on all breakpoints
[ ] Utilise CSS custom properties to standardise patterns

List of components and their radius in design Content Card: 8px Content Carousel: 12px (for images) Find a Dealer: 12px Icon Cards: 8px Media Gallery: 8px Media with Key Stats: 8px in old designs, missing in new. Must be a mistake Media with Text Block: 8px Media with Tabs: 8px Resource Gallery: 8px Stories Carousel: 8px Subscribe: 8px Social: 8px Video Module: 8px mobile/tablet; 12px desktop Video Player Modal: 8px Visual Grid: 12px. In Digital Reveal designs it’s 8px

The rounded corners need to be harmonised, it will become 8px. Some of these changes will be fixed with #284. The deviating code will need to be corrected with this issue.

BeckyMedlin commented 4 months ago

@cogniSyb @mollyaljenkins @shirin27 Please clarify the value of this ticket. Thank you!

cogniSyb commented 4 months ago

@BeckyMedlin This ticket is about design consistency. Some of the rounded corners had changed over time. Also, the code wasn’t reused in certain places. With this ticket, we’d improve the code maintainability and align it with the current design state.

hlxsites / vg-volvotrucks-us

Refactor gutters and rounded corners in blocks #558