Pure CSS framework designed & developed by eBay for a branded, e-commerce marketplace.
v16.3.0
Release by @LuLaValva in https://github.com/eBay/skin/pull/2081
Full Changelog: https://github.com/eBay/skin/compare/v16.2.1...v16.2.2
Full Changelog: https://github.com/eBay/skin/compare/v16.2.0...v16.2.1
Full Changelog: https://github.com/eBay/skin/compare/v16.1.0...v16.2.0
Full Changelog: https://github.com/eBay/skin/compare/v16.0.0...v16.1.0
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.
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 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-container
. This makes page-grid
responsibly solely for the grid while page-grid-container
handles the width.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.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.
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.
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.
Full Changelog: https://github.com/eBay/skin/compare/v15.5.0...v15.5.1
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
Full Changelog: https://github.com/eBay/skin/compare/v15.3.0...v15.4.0
We have changed visited links to be a slightly darker color now.
Data visualization is taking off, we started by adding some new tokens for these graphs that will be upcoming.
Full Changelog: https://github.com/eBay/skin/compare/v15.2.2...v15.3.0
Full Changelog: https://github.com/eBay/skin/compare/v15.2.1...v15.2.2