Getting Started

To start using these skeuomorphic components, you will need to include 2 files, spoiler alert, it's the css and js files

Installation

CDN

<link rel="stylesheet" href="//unpkg.com/soft-components@latest/dist/soft-components/soft-components.css" />
<script type="module" src="//unpkg.com/soft-components@latest/dist/soft-components/soft-components.esm.js"></script>
<script nomodule src="//unpkg.com/soft-components@latest/dist/soft-components/soft-components.js"></script>

Install via npm

npm i soft-components

After installation you can import the css and the js files or reference them in your html

import { applyPolyfills, defineCustomElements } from 'soft-components/dist/loader';
///...
applyPolyfills().then(() => {
  defineCustomElements(window);
});

CSS framework integration

Soft components should work with most frameworks as all the styles are scoped within each component. All soft component CSS variables starts with --sc- to avoid collision. All CodePen demos you'll see will use Twitter Bootstrap's grid system.

JS framework integration

StencilJs provides a comprehensive documentation on how the web components can be integrated with popular JavaScript frameworks, they can be found here:

• Angular

• React

• Vue

• Ember