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:
- Primitive tokens
- Semantic tokens for light mode
- 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.