About

Skin is a pure CSS framework, created by a team of passionate frontend engineers at eBay.

Skin's default stylesheet represents eBay Evo - eBay's evolved brand and design system - but Skin also offers token-based configuration to enable non-eBay branded experiences.

Skin adheres to the following core principals:

Accessible
Skin leverages semantic HTML, SVG & ARIA to apply our styles wherever possible; thus enforcing correct, accessible markup .
Declarative
Skin follows the BEM methodology ("Block, Element and Modifier") for structured, human readable code which embraces the power & efficiency of the cascade.
Decoupled
Skin is decoupled from the JavaScript layer, meaning the HTML and CSS is agnostic of the frontend framework (BYOJ = Bring Your Own Javascript!) *
Scalable
Skin is built on a system of design tokens (implemented as CSS Variables); enabling a scalable and consistent visual system for UI development.

* This website uses makeup-js to add some basic interactivity to examples where needed.

Getting Started

Skin is distributed via NPM under the @ebay/skin package name.

To use Skin, the package should be added as a dependency in your project's package.json file.

Bundling

Skin supports Webpack and Lasso.js .

Webpack

Add @ebay/skin and @ebay/browserslist-config as dependencies to package.json .

The Skin webpack modules will import CSS so make sure to also have css-loader and style-loader as dev dependencies.

Webpack configuration:

Usage:

Lasso.js

Add the @ebay/skin module as a browser.json dependency to include the entire set of Skin modules.

Or, alternatively, by specifying modules on a per-need basis.

Token System

As of v14, Skin's token-based design system leverages CSS Custom Properties (previously it used LESS ).

Tokens are grouped into three distinct sets, that cascade in the following order:

  1. Primitive tokens
  2. Semantic tokens for light mode
  3. Semantic tokens for dark mode

In order for Skin to render correctly, values for core tokens and light tokens are required .

The easiest way to satisfy this requirement is to include one of the following bundles:

It is also possible for a page to roll their own tokens sets, enabling a themed or even non-eBay branded look and feel. More information will be provided in a future release.

NOTE: Primitive tokens are not intended to be used by the application; instead, they are utilized by the semantic tokens.

Themes

CSS Custom Properties allow various aspects of the design system language to be dynamically "themed". Typically these aspects are colors, font, border-radius, spacing and grids.

Warning! Changing the value of any product-level token will cause a ripple effect through all skin modules. If this is not your intention, tokens are also available at the component-level. See switch-variables for an example.