Skin CSS Framework

@ebay/skin/less

DS v1.0

DEPRECATED. Use SASS mixins and variables instead

In comparison to past versions, Skin now offers a very minimal public LESS API (i.e. LESS variables and mixins). Over time this may be reduced to zero. This is due to the introduction of CSS Custom Properties, which give us many benefits over LESS variables in our token based system.

Also, our Less module is not intended as a general-purpose library of utility mixins and variables such as LessHat .

NOTE : Lasso requires the additional lasso-less plugin dependency in your app package.json.

Spacing Tokens (deprecated)

Skin uses a proportional spacing system anchored around a base value of 8px.

NOTE: Spacing variables in LESS are deprecated. In a future release, they will become part of the new CSS Custom Property API.

Spacing Tokens
NAMESIZE
spacing-25spacing-100 * 0.25
spacing-50spacing-100 * 0.50
spacing-1008
spacing-200spacing-100 * 2
spacing-400spacing-100 * 4
spacing-600spacing-100 * 6
spacing-800spacing-100 * 8

Typography Mixins

  • .typography-giant-3();
  • .typography-giant-2();
  • .typography-giant-1();
  • .typography-large-2();
  • .typography-large-2-secondary();
  • .typography-large-1();
  • .typography-large-1-secondary();
  • .typography-medium-bold();
  • .typography-medium();
  • .typography-medium-secondary();
  • .typography-regular-bold();
  • .typography-regular();
  • .typography-regular-secondary();
  • .typography-small-bold();
  • .typography-small();
  • .typography-small-secondary();