Evo CSS Components

Universal, lightweight, and framework-agnostic styling for rapid front-end development. Build beautiful, accessible user interfaces with just 'vanilla' CSS.

Explore CSS Components CSS Components Storybook

Why Choose Evo CSS?

Truly Lightweight CSS

Evo components are pure, "vanilla" CSS. No complex build tools, JavaScript overhead, or proprietary syntaxes required. This ensures maximum performance and minimal page weight, making your application feel fast and snappy.

Framework-Agnostic

Designed for flexibility. Whether you are using React, Angular, Vue, Marko, or even legacy HTML, Evo CSS drops in seamlessly. This eliminates integration headaches and allows you to use one style system across your entire technology stack.

Simple to Override and Theme

Built with clean, organized CSS, customization is straightforward. Overriding default styles is as simple as adding your own CSS rules. Leverage CSS variables to quickly manage and switch themes across your whole application.

About Evo CSS

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

Evo CSS's default stylesheet represents eBay Evo - eBay's evolved brand and design system - but Evo CSS 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 with Evo CSS

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.

{ "dependencies": { "@ebay/skin": "^latest_version" } }

Bundling

Skin supports Webpack and Lasso.js (deprecated) .

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.

{
  "dependencies": {
    "@ebay/browserslist-config": "^1",
    "@ebay/skin": "^latest_version"
  },
  "devDependencies": {
    "css-loader": "^3",
    "style-loader": "^1"
  }
}

Webpack configuration:

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

Usage:

import "@ebay/skin/button";

Lasso.js (deprecated)

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

{
  "dependencies": ["@ebay/skin"]
}

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

{
  "dependencies": [
    "@ebay/skin/tokens",
    "@ebay/skin/global",
    "@ebay/skin/button",
    "@ebay/skin/icon"
  ]
}

Token System

Skin's token-based design system leverages CSS Custom Properties .

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.