element-hq / element-hq/compound

Use relative units for layout properties

Open
#283 0 comments 0 reactions 0 assignees View on GitHub
P-Web T-Enhancement
Dominant language
MDX
Stars
24
Forks
7
PR merge metrics
No merged PRs in 30d

Description

As [discussed internally](https://github.com/vector-im/customer-retainer/issues/47#issuecomment-1825473253), use relative units so that components can scale based on the base font size.

**At component level**

- Make sure we use rem for font size values and relative units for other typesetting properties (line height, letter spacing, etc.)
- Use rem instead of px for layout (spacing, min height, etc.). Exceptions to this rule may apply (setting a border to `1px` that we don't want to scale with font size).

**At the application level**

These tasks are out of the scope of Compound components, but we can provide guidelines to be followed at the application level.

- Set HTML base font size to `100%` instead of `16px`. Refer to specific [notes on implementation requirements](https://github.com/vector-im/customer-retainer/issues/47#issuecomment-1825473253).
- Use em for breakpoints.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.