Merged idea

This idea has been merged into another idea. To comment or vote on this idea, please visit WEBFLOW-I-55 Style Variables.

css distance swatch: global numbers to use throughout design Merged

It would be nice if I could save a "swatch" of distances to use everywhere for consistent spacing. For example:


  --spacing-none: 0;
  --spacing-extra-small: .25rem;
  --spacing-small: .5rem;
  --spacing-medium: 1rem;
  --spacing-large: 2rem;
  --spacing-extra-large: 4rem;
  --spacing-extra-extra-large: 8rem;
  --spacing-extra-extra-extra-large: 16rem;

Tachyons features a spacing scale based on powers of two that starts at .25rem (for most devices this will be the equivalent of 4px). Since tachyons uses rem units with px as a fallback, if a user has declared a different base font-size for their device, your spacing will scale based on a defined ratio that has stood the test of time. As powers of two will always produce integers, there will be no problems with sub pixel rendering across browsers. – Tachyons sizing reference

  • Forrest O
  • Mar 15 2017
  • Shipped