search

argyleink / open-props

CSS custom properties to help accelerate adaptive and consistent design.
https://open-props.style
MIT License
4.78k stars 193 forks source link

Add relative sizes #336

Closed argyleink closed 1 year ago

argyleink commented 1 year ago

@therien brought this up 👍🏻 

html {
  --size-relative-0: .25ch;
  --size-relative-1: .5ch;
  --size-relative-2: 1ch;
  etc…
}

would be nice to have these as offerings within the lib. well named, purpose built props for relative sizing of elements and components.

would pair with:

--size-{000-15}
--size-fluid-{1-10}
--size-content-{1-3}
--size-header-{1-3}

my main resistance to this so far has been that there's many types of relative units, all with great use cases, and it wouldnt be a good idea to create a set of props for each of those length types. aka, this doesnt scale well. but, i personally use ch for 90% of it all, and having them would be nice to replace the ch units used throughout the normalize/buttons files with a prop.