utility classes: support spacing `margin-*`, `padding-*` and `spacing-x`
lowlighter opened this issue · 0 comments
lowlighter commented
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)
withcalc()
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