Skin Versions Save

Pure CSS framework designed & developed by eBay for a branded, e-commerce marketplace.

v16.3.0

11 months ago

What's Changed

Full Changelog: https://github.com/eBay/skin/compare/v16.2.1...v16.2.2

v16.2.1

11 months ago

What's Changed

Full Changelog: https://github.com/eBay/skin/compare/v16.2.0...v16.2.1

v16.2.0

1 year ago

What's Changed

Full Changelog: https://github.com/eBay/skin/compare/v16.1.0...v16.2.0

v16.1.0

1 year ago

What's Changed

Full Changelog: https://github.com/eBay/skin/compare/v16.0.0...v16.1.0

v16.0.0

1 year ago

Major/Breaking Changes

CDN Source no longer available

We are no longer automatically uploading our source to a CDN. We used to upload it and have it avaiable for teams. The last source available is https://ir.ebaystatic.com/cr/v/c1/skin/v15.5.1/skin-full.min.css. We are no longer uploading this. However, the script to generate these CDN files is still available and can be used to generate custom bundles.

New Icons and Old Icons Deprecation

All icons have been completely renamed and changed. If you are using Skin directly in your application, you will need to swap the old (removed icons) with the new icons with new names. You will also need to update your classes to reflect this. In the future we are planning on removing all icon specific classes and adding generic size classes.

Please refer to these spreadsheets to find the new icons that map to your old ones:

Program badge module removed

Program badges have been merged within icons. All old program badges are now called legacy. For example program-badge-authenticity-guarantee is now called legacy-authenticity-guarantee-48-colored. We have new program badges which are part of the icon set. Please see the Web Skin Icon Mapping file above for the renames.

Page Grid breaking changes

  1. Page width styles were moved from page-grid (inner element) to page-grid-container. This makes page-grid responsibly solely for the grid while page-grid-container handles the width.
  2. Multiple css properties were renamed for simplification:
  • --page-grid-gutter-width-small and --page-grid-gutter-width-large were simplified into a single property, --page-grid-outside-margins removing the size distinctions and allowing the sizing to be determined through media queries instead.
  • --page-grid-col-width-small and --page-grid-col-width-large were simplified into a single property of --page-grid-column-widths removing the size distinctions and allowing the sizing to be determined through media queries instead.

New Features

Calendar & Date Textbox component

We have pulled the date textbox and calendar modules into skin. The calendar module may be used as a static display or as an interactive and/or navigable component, and the date textbox provides built-in styles for using the calendar as a date input.

Date Textbox

Screen Shot 2023-03-30 at 10 18 30 AM

Calendar

Screen Shot 2023-03-30 at 10 17 15 AM

New Icon Artboards

New icons were introduced in a previous release. In this major release, we added a few more icons and adjusted others. Of noteworthy significance is that most of the new icons automatically include white space designed to provide better alignments with text and each other while the old icons were trimmed to include only the graphic. This means that in some circumstances, after this change you may have spacing issues in your application and may need to either remove your explicit spacing styling or add positive/negative margins to accommodate the particular spacing for those icons.

Page Grid

We have added new layouts for page grid. There are many more css properties were created/exposed to allow for better flexibility allowing teams to override various items as their needs require it. The full list of css properties available are as follows:

CSS Property Description
--page-grid-number-cols The number of columns - default 8 or 16.
--page-grid-column-gaps The gaps between columns AKA horizontal gutters.
--page-grid-row-gaps The gaps between rows AKA vertical gutters.
--page-grid-outside-margins The outer left/right spacing around the grid container.
--page-grid-column-widths The column widths that are typically calculated using the column widths and column gaps.
--page-grid-max-width The maximum width the page is allowed to expand before stopping (exclusive of outside margins)

Though at times, various use cases may call for it, developer should be very careful overriding these as it can have detrimental effects.

Page grid example

Screen Shot 2023-03-30 at 10 21 11 AM

What's Changed

v15.5.1

1 year ago

What's Changed

Full Changelog: https://github.com/eBay/skin/compare/v15.5.0...v15.5.1

v15.5.0

1 year ago

What's Changed

Major icon update

After a long time coming, we have updated all our icons to match design system. We have a plentitude of new icons using the format icon-{icon-name}-{size}, like for example: icon-add-16 will be the add icon at 16 pixels. All old icons are still present, but will be removed next major version. We plan on putting out an icon map where we show the old names and what new names they map out to. So stay tuned for that!

Full Changelog: https://github.com/eBay/skin/compare/v15.4.0...v15.5.0

v15.4.0

1 year ago

What's Changed

Full Changelog: https://github.com/eBay/skin/compare/v15.3.0...v15.4.0

v15.3.0

1 year ago

Notable changes

We have changed visited links to be a slightly darker color now. Screen Shot 2022-12-22 at 1 00 20 PM

Data viz tokens

Data visualization is taking off, we started by adding some new tokens for these graphs that will be upcoming.

What's Changed

Full Changelog: https://github.com/eBay/skin/compare/v15.2.2...v15.3.0

v15.2.2

1 year ago

What's Changed

Full Changelog: https://github.com/eBay/skin/compare/v15.2.1...v15.2.2