Skip to content

Commit

Permalink
Docs: updates to about section (#2544)
Browse files Browse the repository at this point in the history
  • Loading branch information
ianmcburnie authored Feb 4, 2025
1 parent bb06b64 commit 9501086
Showing 1 changed file with 11 additions and 9 deletions.
20 changes: 11 additions & 9 deletions src/components/about.marko
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>

0 comments on commit 9501086

Please sign in to comment.