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.