lowlighter/matcha

utility classes: support spacing `margin-*`, `padding-*` and `spacing-x`

Closed this issue · 0 comments

From #13 suggested by @owahltinez

Consider the very handy margin-x-*, space-x-*, gap-x-*, etc.

Here's are the design points that needs to be addressed:

Naming

  • Use margin-, margin-x-, margin-y-, margin-top-, margin-right-, margin-left-, margin-top- to keep consistency with other utility classes, be more explicit but sacrifice bundling size and be more verbose (and maybe annoying to write in the long run) ?
  • Use m-, mx-, my-, mt-, mr-, ml-, mt- to be less verbose but be more cryptic ?

Generation
In either case we'd use a build script (not going to maintain hundreds of rule by hand)

  • Use fixed unit x rem so rules are static and could be more consistant with current matcha styling ?
  • Use var(--unit) with calc() everywhere so rules are dynamic (but maybe could cause performance issues ? not sure how these would impact browser rendering if overrused) which makes it easier to custom for users ?

Scale

  • Other libraries offers too much -* scales (like -44 or -72 are too rare to be worth adding)
  • I think something like 0, .125rem, .25rem, .5rem, .75rem, 1rem, 1.25rem, 1.5rem, 1.75rem, 2rem, 3rem, 4rem is enough (this actually cover somewhat 95% of all used values by matcha in margin/padding)

To check how much size it'd take to see if it's possible to integrate in the default library.
If not maybe we could create a seperate @utilities-spacing package