Skin CSS Framework

Main Navigation

CSS Components

Guides

@ebay/skin/sass

DS v1.0

In comparison to past versions, Skin now offers a very minimal public SASS API (i.e. SASS variables and mixins).

Typography Mixins

Import the typography package as @use "@ebay/skin/mixins" as skin-mixins All Typography mixins are prefixed with typography-

@include skin-mixins.typography-giant-3;
@include skin-mixins.typography-giant-2;
@include skin-mixins.typography-giant-1;
@include skin-mixins.typography-large-2;
@include skin-mixins.typography-large-2-secondary;
@include skin-mixins.typography-large-1;
@include skin-mixins.typography-large-1-secondary;
@include skin-mixins.typography-medium-bold;
@include skin-mixins.typography-medium;
@include skin-mixins.typography-medium-secondary;
@include skin-mixins.typography-regular-bold;
@include skin-mixins.typography-regular;
@include skin-mixins.typography-regular-secondary;
@include skin-mixins.typography-small-bold;
@include skin-mixins.typography-small;
@include skin-mixins.typography-small-secondary;

Title Mixins

Import the title package as @use "@ebay/skin/mixins" as skin-mixins All Typography mixins are prefixed with title-

@include skin-mixins.title-giant-screen-large;
@include skin-mixins.title-large-screen-large;
@include skin-mixins.title-medium-screen-large;
@include skin-mixins.title-small-screen-large;
@include skin-mixins.title-giant-screen-small;
@include skin-mixins.title-large-screen-small;
@include skin-mixins.title-medium-screen-small;
@include skin-mixins.title-small-screen-small;

Utility Mixins

Import the utility package as @use "@ebay/skin/mixins" as skin-mixins All Utility mixins are prefixed with utility-

All utility mixins found on the utility page and can be used as @include skin-mixins.utility-clipped