ebay / skin

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

Skin

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

Please visit the Skin website for all end-user documentation.

License

Skin is MIT licensed.

Install

Skin is available as the @ebay/skin package on NPM. Skin is also available on our CDN.

Versioning

Skin follows Semantic Versioning:

1. MAJOR version when we make incompatible API changes,
2. MINOR version when we add functionality in a backwards-compatible manner
3. PATCH version when we make backwards-compatible bug fixes.

More detailed insight into our versioning process can be found in our contributing guide.

Releases

Please refer to our releases page to view the change log for current and past releases.

Please refer to our web archive for past examples and documentation.

Roadmap

Please refer to our projects page to see what's coming down the pipeline.

Browser Support

Please view our @ebay/browserslist-config to see which browsers we currently support.

SPOILER: we do not support IE10 or under.

Accessibility (A11Y)

We take accessibility very seriously. Very seriously indeed. Therefore all modules are built in accordance to the eBay MIND Patterns. These patterns, in turn, build on from the specifications provided by the WAI-ARIA Authoring Practices.

Issues

Please use our issues page to ask questions, report issues or submit feature requests.

To help track your issue, the Skin admins will assign it with a label from one or more issue categories.

Custom Bundler

Skin provides a command to create your own bundles for uploading to cdn. Use bin/generate-bundle.js in order to create separate bundles.

bin/generate-bundle.js list -> List available modules (used for the --modules argument)

bin/generate-bundle.js bundle ebay -> Create a bundle under the ebay folder

bin/generate-bundle.js bundle ebay --modules button carousel -> Create a bundle under the ebay folder with only button and carousel modules

bin/generate-bundle.js bundle ebay --scope-class ebay --scope-specificity 5 -> Create a bundle under the ebay folder with all CSS styles wrapped under .ebay.ebay.ebay.ebay.ebay {}

Developing & Contributing

Interested in contributing? Head over to our contributing guide for information on how to get started.

Contributions don't have to be code! They can be ideas, inspiration, discussion or filing bugs!

People

The original creator of Skin is Senthil Padmanabhan.

The current author and lead maintainer is Ian McBurnie.

List of all contributors.

skin's Issues

Automated releases

We should have a grunt/gulp script which creates a tag automatically, so we can use bower versioning system.

LESS: New variables and mixins for DS6 typography

The new type ramp is associated with DS6, do not overwrite or adjust DS4.

Dropdown DS6 CSS is always included even when skin-ds6 is not set

https://github.com/eBay/skin/blob/master/listbox.browser.json#L3

This causes the svg arrows to display outside the control:

Listbox: custom <select> for mWeb

Not fully fleshed out yet, but here's a sneak peak:

Seems like we'll have to use appearance: none for a custom styled select in order to still trigger the native overlay/picker...

Wizard Steppers: New feature (large screens)

Website: re-implement layout using CSS Grid Layout

A fun exercise in learning CSS Grid Layout. We can redo the current DS4 (default) site, and start from scratch with the new DS6 site.

In terms of IE10 and 11, the website is a very simple layout, and therefore we should be able to implement the following fallbacks:

https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/

Tests: Reboot CI visual regression tests

Let's look into using a public Travis CI instance (our test pages are publicly accessible) for visual regression testing if we can.

Let's also look into making the test pages and screenshots a bit easier to maintain. Ideally isolating each test instance in its own page or view.

New Module: Pill

More details and spec to follow. @JeffNixonCreative can you please add?

This may end up being part of the button module, as to me it seems like just a rounded version of buttons and fake buttons.

Latest designs:
https://ebay.invisionapp.com/share/CWN9X1JF6MA#/screens/293357159

New Module: Badge

@JeffNixonCreative Can you please add the spec for Badge pattern? Thanks.

Textbox: support floating label

Floating label should use a real label element in order to be accessible.

Checkout team are working on an implementation that can hopefully be rolled into skin.

More details to come...

New Module: Page Titles

This pattern is now live on DSL and can be found here:
https://dsl.ebay.com/ds6/page-titles

Here is a PDF for reference:
PageTitles_180228_v1.pdf

Global: lighten body background colour

The default background colour is deemed too dark for dweb. Most, if not all, dweb teams are overriding it to a lighter colour.

Design system is investigating if we can lighten the colour from #f0eeec to #f8f8f8 for both mweb and dweb.

We believe the darker colour originated from the vision quest days, and mWeb is where the color is most likely to be prevalent.

Research and possibly fix menu item styles

When working on creating the eBayUI component for the menu, we noted that the role="menuitem" was added to fake menu items, which doesn't adhere to proper accessibility roles.

When we removed this role (and removed the role attribute altogether) the styling broke and the items appeared unstyled in the menu.

This issue is created to track that, and make sure that the styles are still applied when no role is present, specifically in the case of a fake menu.

Build: replace csshint and lesshint with stylelint

As per title, we could swap out csshint and lesshint for a single devdep:

https://github.com/stylelint/stylelint

Let's investigate if it's worth it when we get a chance.

Typography: add support for bold and secondary variants

Let's make it easier for developers to opt into bold or secondary variants by adding more mixins and classes. For example:

LESS:

.large-text-1-bold;
.large-text-1-secondary;

CSS:

.large-text-1 .bold-text
.large-text-1 .secondary-text

Regular primary will always be the default, except for giant text which is always primary & bold.

Type Ramp.pdf

Menu: new DS6 style

Current spec:

This ticket has a dependency on #9

Notice: alignment bug (edge case)

One last thing for the 3.4.0 release is to fix alignment issue when a button is added.

Checkbox & Radio: Use SVG data-uri as background-image

As suggested by Pranav, inline SVG seems a little too cumbersome for the case of default checkbox (and radio), let's see if we can leverage SVG data-uri to make things a little easier.

Current markup:

<span class="checkbox">
    <input class="checkbox__control" type="checkbox" />
    <span class="checkbox__icon" hidden>
        <svg aria-hidden="true" focusable="false">
            <use xlink:href="#svg-icon-checkbox"></use>
        </svg>
    </span>
</span>

Potential/proposed:

<span class="checkbox">
    <input class="checkbox__control" type="checkbox" />
    <span class="checkbox__icon" />
</span>

If background image works well, the old markup would continue to be supported for backwards compatibility and the additional flexibility that inline SVG affords.

This issue also applies to radio button.

Global: support font loading mechanism

Skin will set Market Sans by default in DS6 global module (EDIT: not true anymore, see thread)

To enable a font loader mechanism, let's add a Lasso flag that will bypass this setting. (EDIT: not true anymore, see thread)

https://github.com/eBay/ebay-font

Menu: integrate expand button

Looks like the DS4 menu button was changed at some point, from a center aligned text and icon, to space-between text and icon:

This matches the Listbox expand button also.

Let's use this opportunity to retrofit the new expand button from ds6, which has this same layout. Existing code will continue to work, it will just be center aligned. We will deprecate the old button and remove it in v4.0.0.

Docs: Define semantic versioning for CSS

We should better define semantic versioning as it pertains to HTML and CSS (reminder: skin does not provide any JavaScript). For example, changes to background and foreground colors. We need to strike a good balance between keeping users up to date with latest design system, but also avoiding any unpleasant surprises.

In the past we were restricted to a kind of hybrid semantic versioning approach, with only the minor and patch numbers to play with. I felt we did a pretty good job, even despite those restrictions. Now though we have major, minor and patch numbers to play with.

To clarify, we do not want to stray from the core values of semantic versioning, which are:

• MAJOR version when you make incompatible API changes,
• MINOR version when you add functionality in a backwards-compatible manner, and
• PATCH version when you make backwards-compatible bug fixes.

Rather we should clarify and document what constitutes a "bug fix" and "functionality" and "breaking changes" in HTML and CSS.

Documentation should be placed in README under "Versioning" section.

Button: new DS6 styles

This is the spec we have so far. The scope of this issue probably does not include everything on here (links, menus, etc). This ticket should concentrate on core buttons and use cases.

The scope also includes adding any necessary SVG to Skin website docs (e.g. the arrows and 'X').

Buttons - DS6 | Design System.pdf

LESS: add new DS6 classes, mixins and variables for typography

Spec:
Type Ramp.pdf

Website: Integrate MakeupJS

We now have non-jQuery versions of the makeup accessibility plugins. Let's integrate them into the DS6 site.

Typography: new module containing typography classes

We are already adding LESS variables and mixins for typography in #6 , but for static sites that do not have access to the LESS preprocessor I propose adding a new typography module that contains classes for the ds6 type ramp.

For example, .headline-1, .headline-2, .title-1, etc. This atomic approach will only be encouraged for static sites, apps should still use the LESS mixins.

Menu: Use span with SVG data-uri background image for button and checkmark

In the same way that we improved checkbox and radio to use a span tag (with SVG data-uri background) instead of inline SVG for default use case, let's investigate implementing the same for default button, menuitemcheckbox and menuitemradio icons. Let's keep it backwards compatible with inline SVG too.

Can't install project locally

I've done bundle install and got this error

and before that it says:
Gem::Installer::ExtensionBuildError: ERROR: Failed to build gem native extension.

Dropdown pattern updates

Dropdown was just published to DSL.
Attached is a PDF for development.

Dropdowns_PUB_JN_180216.pdf

Listbox: rename "listbox" to "combobox"

This module was originally named "listbox" as the HTML <select> element was mapped to the ARIA listbox role. However, there was an error in the mapping in the HTML spec. Turns out that role listbox only maps to the select element when the multiple attribute is present (which renders a completely differently control, that looks more like an actual listbox), otherwise, for the single selection case it actually maps to combobox role (readonly).

It makes sense to rename this, because going forward we can not only use this module as the custom view for a <select>, but also for an editable combobox (i.e. filter as you type, autocomplete) that doesn't necessarily need to be backed by a <select> element.

We could do this as a backwards compatible change, by adding additional CSS grouped selectors, but if it bloats the CSS too much we might want to do it in v4.

Update menu icons with new "bolder" stroke versions

So as not to block #78 (new dropdown patterns), we are creating this issue to track updating the dropdown arrow and selected check mark, since they have become more bold (e.g. a heavier stroke weight) to match the heavier font changes in #78.

Checkbox and Radio: Enhancement for custom colour variant

While working on #35 I realized I could make a backwards-compatible enhancement to how custom colour checkboxes are handled. Basically by utilizing a handy checkbox__icon--inherit modifier on the checkbox icon element.

Here's how it looks:

Listbox: new DS6 style

Design team have expressed a preference to use the native listbox (i.e. the tag) for mWeb, but a custom, more branded, look and feel for dWeb. This will also allow us to display flags in the listbox (a common requirement). As we all know, the overlay cannot be styled with CSS. In order to retain the features of the tag (e.g. form data, autofill) we would need to hide the actual real listbox and display a facade view instead. This will mean the listbox will be dependent on javascript (like tabs, menu and dialog) but we can at least provide the CSS support in Skin. At this point in time I believe the facade for the listbox is going to look just like the DS6 menu, therefore we can probably reuse those styles.

Text Links: New DS6 Pattern

Attached is a PDF of the design file provided for the DS6 Text Links patterns that is now live on DSL.

Text Links

ds6_link_v1.01.pdf

Notice: new DS6 styles

EDITED: Latest spec in Jeff's comment below.

Expose variables and mixins as SASS/SCSS

There has been an interest in supporting SASS, for apps on the react/sass/webpack stack.

We could perhaps expose our variables and mixins using a LESS to SASS convertor.

Further investigation and discussion needed.

Website: design & create DS6 website

We need a new DS6 web page to document and showcase the new DS6 typography and modules.

Placeholder page is currently here: http://ebay.github.io/skin/ds6/

Related ticket: #34

Use pre-release tags when publishing to NPM

Issue

Tonight I attempted to install the latest version of Skin in my personal project and the package that was pulled in was the "pre-release" version of Skin, and not the stable, current version.

The command I used was yarn add @ebay/skin which pulled in @ebay/[email protected] which is the pre-release version. The current latest should be 3.3.2.

Therefore, I believe skin should be using the x.x.x-beta tag on any pre-release version, following SemVer pre-release tags as prescribed by NPM. This would ensure Skin has NPM install the true latest package.

Additionally, Skin would be working in the developer's favor:

... a user who has opted into using a prerelease version has clearly indicated the intent to use that specific set of alpha/beta/rc versions. By including a prerelease tag in the range, the user is indicating that they are aware of the risk.

Proposed Publishing Commands

npm publish --tag beta

Reference: How to label packages with Dist-tags

Proposed Commands to Add beta Dist-tag to Previous Pre-releases

npm dist-tag add @ebay/[email protected] beta
npm dist-tag add @ebay/[email protected] beta
npm dist-tag add @ebay/[email protected] beta
npm dist-tag add @ebay/[email protected] beta

Thoughts? Concerns? Objections?

cannot install this package

npm install --verbose
npm info it worked if it ends with ok
npm verb cli [ '/usr/local/Cellar/node/7.5.0/bin/node',
npm verb cli   '/usr/local/bin/npm',
npm verb cli   'install',
npm verb cli   '--verbose' ]
npm info using [email protected]
npm info using [email protected]
npm verb request uri https://registry.npmjs.org/skin-ebay
npm verb request no auth needed
npm info attempt registry request try #1 at 1:19:56 PM
npm verb request id c5a0191f263a2661
npm verb etag W/"56c51db3-1ac"
npm verb lastModified Thu, 18 Feb 2016 01:26:11 GMT
npm http request GET https://registry.npmjs.org/skin-ebay
npm http 304 https://registry.npmjs.org/skin-ebay
npm verb headers { date: 'Wed, 01 Mar 2017 13:19:46 GMT',
npm verb headers   via: '1.1 varnish',
npm verb headers   'cache-control': 'max-age=300',
npm verb headers   etag: 'W/"56c51db3-1ac"',
npm verb headers   age: '0',
npm verb headers   connection: 'keep-alive',
npm verb headers   'x-served-by': 'cache-den6023-DEN',
npm verb headers   'x-cache': 'HIT',
npm verb headers   'x-cache-hits': '1',
npm verb headers   'x-timer': 'S1488374386.625591,VS0,VE52',
npm verb headers   vary: 'Accept-Encoding' }
npm verb etag https://registry.npmjs.org/skin-ebay from cache
npm verb get saving skin-ebay to /Users/abe/.npm/registry.npmjs.org/skin-ebay/.cache.json
npm verb correctMkdir /Users/abe/.npm correctMkdir not in flight; initializing
npm verb stack TypeError: Cannot convert undefined or null to object
npm verb stack     at Function.keys (<anonymous>)
npm verb stack     at pickVersionFromRegistryDocument (/usr/local/lib/node_modules/npm/lib/fetch-package-metadata.js:126:29)
npm verb stack     at /usr/local/lib/node_modules/npm/node_modules/iferr/index.js:13:50
npm verb stack     at /usr/local/lib/node_modules/npm/lib/utils/pulse-till-done.js:20:8
npm verb stack     at saved (/usr/local/lib/node_modules/npm/lib/cache/caching-client.js:174:7)
npm verb stack     at /usr/local/lib/node_modules/npm/node_modules/graceful-fs/polyfills.js:261:18
npm verb stack     at FSReqWrap.oncomplete (fs.js:112:15)
npm verb cwd /Users/abe/github/ebay/GSUI/applications/shippinglabels
npm ERR! Darwin 16.4.0
npm ERR! argv "/usr/local/Cellar/node/7.5.0/bin/node" "/usr/local/bin/npm" "install" "--verbose"
npm ERR! node v7.5.0
npm ERR! npm  v4.3.0

npm ERR! Cannot convert undefined or null to object
npm ERR! 
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>
npm verb exit [ 1, true ]

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/abe/.npm/_logs/2017-03-01T13_19_57_259Z-debug.log

LESS: add new DS6 variables for colour

Color - DS6 | Design System.pdf

Icon: add SVG for close button

This is needed for page notice and dialog... and others no doubt. For those modules it will probably be incorporated as a data-uri, but let's also add it to the DS6 page as inline SVG, so teams can leverage it that way if they want.

Performance issue with clip-path property of .clipped class

Issue found by @scttdavs (thanks Scott!)

Hi ebayUI Team,

I was looking in our mweb page (new homepage) to see how it performed performance-wise with 6x CPU slowdown. I was glad that most of the page was very smooth with no slowdowns. However, some of our modules have significant jank when horizontally scrolling (about 1-2 FPS). After some digging, I found out that the offending modules used clipped text for accessibility, and when I turn off the ‘clip-path’ attribute from skin’s clipped class in devtools, the jank disappears and it scrolls as smoothly as the rest of the page.

I’ve found with a little research that we aren’t the only ones encountering this problem:
Bug filed: https://bugs.chromium.org/p/chromium/issues/detail?id=611257

Html5-boilerplate and foundation have both removed it in favor of the older and deprecated ‘clip’ since it is unlikely to go away any time soon:
h5bp/html5-boilerplate#2025
foundation/foundation-sites#10914

Global: change body background color to white (DS6)

DS6 is adopting a white background. We currently have light grey.

Create scoped CSS

We need to provide distributables of CSS that are scoped to a supplied selector name, e.g.:

.gh .menu {
  ..
}
.gh .menu__items {
  ..
}

These distributables can be opted into using a Lasso flag.

Dialog: New DS6 styles

ds6-modals-v1.pdf

Notice: add dismiss button use case

Combo: Remove iconfont and icon dependencies

Skin is moving away from icon fonts towards SVG. When the time is right, we should remove icon and iconfont modules out of the combo bundle, as we do not want to continue promoting the icon font.

This will be a breaking change for skin-inception though.

I wonder whether we should just retire the combo bundle altogether. I know inception uses it, but I'm not entirely sure I see the benefit anymore of this bundle...

https://ebay.github.io/skin/#bundles

Wizard Steppers: new feature (small screens)

Wizard stepper should use the button module if possible (it may require some changes to support this scenario).

Remove DS6 styles from v3.1.0 distribution

The following DS6 styles are still unfinished and/or not signed off by design:

• button
• notice
• typography

We should remove them from the distribution files before upcoming release.

Global: Type ramp and link color styles for DS6

Potentially, proposed ramp:

• mWeb/DWeb - Market Sans (loaded via eBay-font), Helv N, Helv, Arial, Roboto, Sans Serif
• iOS & OS X - Market Sans, SF UI
• Android - Market Sans, Roboto

Link Colors

Link Default: #006EFC
Link Active: #006EFC
Link Visited: #6666D1

SVG: add long arrow right symbol

I think this is the latest version of the now infamous "long right arrow" that everybody keeps asking for:

<symbol id="svg-icon-long-arrow-right" viewBox="0 0 32 32">
        <path d="M20.997 6.333l-1.546 1.546 7.236 7.236h-26.686v2.313h26.516l-7.25 7.264 1.546 1.546 10.045-10.045-9.86-9.86z"></path>
</symbol>

<svg aria-hidden="true" focusable="false" height="16" width="16">
    <use xlink:href="#svg-icon-long-arrow-right"></use>
</svg>

We need to add this to src/svg/ds6/icons.svg and also to the website docs.