Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: updates to about section #2544

Merged
merged 2 commits into from
Feb 4, 2025
+11 −9
Merged

Docs: updates to about section #2544

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0cf78b0
Update about.marko
ianmcburnie Jan 30, 2025
cd0b459
Added link to eBay playbook
ianmcburnie Feb 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 11 additions & 9 deletions src/components/about.marko
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
<div id="about">
<h2>What is Skin?</h2>
<p>Skin is the official CSS framework of eBay. Skin represents the eBay brand and adheres to the following core principals:</p>
<h2>About</h2>
<p>Skin is a pure CSS framework, created by a team of passionate frontend engineers at eBay.</p>
<p>Skin's default stylesheet represents <a href="https://playbook.ebay.com">eBay Evo</a> - eBay's evolved brand and design system - but Skin also offers <a href="#token-system">token-based configuration</a> to enable non-eBay branded experiences.</p>
<p>Skin adheres to the following core principals:</p>
<dl>
<dt>Accessible</dt>
<dd>Skin leverages semantic HTML, SVG & ARIA to apply our styles wherever possible; thus enforcing correct, accessible markup.</dd>
<dd>Skin leverages semantic HTML, SVG & ARIA to apply our styles wherever possible; thus enforcing correct, <a href="https://github.com/ianmcburnie/bones">accessible markup</a>.</dd>
<dt>Declarative</dt>
<dd>Skin follows the <a href="https://getbem.com">BEM</a> methodology of "Block, Element and Modifier" to ensure our HTML class name and structure is human readable and understandable.</dd>
<dd>Skin follows the <a href="https://getbem.com">BEM</a> methodology ("Block, Element and Modifier") for structured, human readable code which embraces the power & efficiency of the cascade.</dd>
<dt>Decoupled</dt>
<dd>Skin is decoupled from the JavaScript layer, meaning the HTML and CSS is agnostic of the frontend framework.</dd>
<dt>Evergreen</dt>
<dd>As the eBay design system evolves, so too does Skin, meaning apps only need to keep their Skin package updated to ensure the latest look and feel.</dd>
</dl>
<p>Skin is a pure CSS framework and is bundled with zero JavaScript. This website uses <a href="https://github.com/makeup/makeup-js">makeup-js</a> to add interactivity to examples where needed.</p>
<dd>Skin is decoupled from the JavaScript layer, meaning the HTML and CSS is agnostic of the frontend framework (BYOJ = Bring Your Own Javascript!)<sup>*</sup></dd>
<dt>Scalable</dt>
<dd>Skin is built on a system of <a href="https://tr.designtokens.org/format/">design tokens</a> (implemented as CSS Variables); enabling a scalable and consistent visual system for UI development.</dd>
</dl>
<p><sup>*</sup>This website uses <a href="https://github.com/makeup/makeup-js">makeup-js</a> to add some basic interactivity to examples where needed.</p>
</div>