twbs / twbs/bootstrap

Spacing scale audit: 53 literal spacing values off your own token scale

Open
#42,907 4 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

  • #42911 by @bobby404-K — closed without merging
css v5
Dominant language
MDX
Stars
175k
Forks
78.6k
Avg merge
7h 19m
Merged PRs (30d)
35

Description

Spacing scale audit: 53 literal spacing values off your own token scale

Hi. I maintain stylelint-plugin-rhythmguard, a Stylelint rule that checks spacing values against a project's own scale. To keep it quiet on code I do not control, I run it against public design systems on pinned commits and publish the numbers. This repository is one of them, and I would rather you saw the audit here than in a report first.

What was run. npx rhythmguard audit . --scale auto at 12cb8b9 over scss. Hairlines of one pixel or less, percentages, and generated or test paths are excluded. Anyone can reproduce it in a checkout of that commit.

What it found. Scale 0, 4, 8, 16, 24, 48 inferred from your own spacing tokens in the stylesheets. 53 literal spacing values are off that scale.

  • Values: .125rem ×9, .75rem ×8, 1.25rem ×8, 2rem ×6, 15px ×4
  • Properties: padding ×22, margin-top ×9, margin ×4, margin-left ×4, padding-left ×3

Three values usually explain most of the count, and each is a single decision: a step the scale is missing, a slip, or a token nobody defined. A property table led by sibling margins often means the parent could own the spacing with gap.

The ask. Nothing is required. If the numbers are useful, I can open a small PR for the top value with before and after screenshots, or a one-rule Stylelint config at warning level that reports new off-scale values against your tokens and nothing else. If the findings are wrong for this codebase, tell me which ones; false positives are the most valuable report the tool gets and they change its defaults.

The row for this repository will appear in a periodic "State of Spacing" table in the Rhythmguard repository, with this issue linked. If you would rather not be listed, say so here and I will remove it.

Feel free to close this if it is not useful. Thanks for the CSS.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the audit with npx rhythmguard audit . --scale auto at commit 12cb8b9, targeting scss, then inspect the reported literal values against the inferred scale 0, 4, 8, 16, 24, 48. The issue provides no named files or required fix; work is complete only after the project decides which findings are intentional, corrected, or otherwise addressed.

Written by the indexing model from the issue text.

Assessment

Tech stack
scss
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Needs clarification
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.