Establish syntax for size variables
As raised here: !4 (comment 152412). For e.g.
- Current system: s, m, ms, mms, r, rs, rm, l, xl, xxl. A better version of this
-
Proposed alternative:
--size-1
..--size-10
- issue of number being misinterpreted - Bootstrap: xs, s, m, l, xl
- UIKit: small, medium, large, xlarge
-
Tailwind: 1, 2, 3, 4 (relating to 4px/0.25rem, 8px/0.5rem, 12px/0.75rem, 16px/1rem). Can be prefixed with
p
to indicate padding orw
to indicate width, plusx
,y
,l
,r
etc. Sopr-6
meanspadding-right: 1.5rem;
- Use a scale multiplier - at least for headings https://aristath.github.io/blog/typography-scales-with-css-vars - so a variable sets a multiplier, say '1.33'. If h6 = 1rem, then h5 = 1.33rem, h4 = 1.76rem, etc. This has the advantage of enforcing a visually sound hierarchy of sizes, aka a Type scale (https://typescale.com/), common in design systems. But it makes it hard for someone to make their h3 tags match their parent theme h3 size.
- match the H tags, with some extra, ie crm-h1, crm-h2, crm-micro, crm-mega (https://www.fixate.it/blog/make-your-css-variable-names-suck-less)
Related question - should we clearly separate sizing variables for different functions or can we share them? E.g.:
:root {
--small: 0.75rem;
--regular: 1rem;
--large: 1.5rem
}
.some-button {
font-size: var(--small);
padding: var(--small) var(--regular);
margin: var(--large) var(--regular) var(--large) 0;
}