search

indiana-university / rivet-source

Indiana University’s design system for web application development
https://rivet.iu.edu
BSD 3-Clause "New" or "Revised" License
54 stars 5 forks source link

Add gap utility #731

Closed basham closed 7 months ago

basham commented 8 months ago

Notes:

  1. This adds rvt-gap-*, rvt-gap-col-* and rvt-gap-row-* utility classes.
  2. I feel like it makes sense to encourage the use of the rvt-gap-col-* and rvt-gap-row-* variants over rvt-gap-*, as that gives more explicit control over the styling. But I'm leaving rvt-gap-* for completeness.
  3. I added a $spacing variable to make it easy to loop through those tokens. There may be other areas that could use it, but that refactor would should be done in a different PR.
  4. Some of the larger spacing variants seem outlandish, but it also seems arbitrary to dictate which space values will be included. So, I've included all of them.
  5. I named it rvt-gap-col-* instead of rvt-gap-column-* to make it more succinct, even though the CSS property name is column-gap.
  6. Because gap can be used for both grid and flex, I did not categorize this under the flex utilities.
basham commented 7 months ago

Reviewed the PR with @levimcg today. Decisions:

basham commented 7 months ago

@levimcg: Ready for review.