@cobalt-design-system/web-components
v0.0.12
Published
Web-components for Colbat Design System.
Downloads
596
Readme
Web-components
Cobalt is developed as web-components to make it Framework agnostic and browser native.
Usage
Vanilla HTML
Easiest way to start using Cobalt as web-components is by adding a script tag and stylesheet link:
<script type="module" src="https://cdn.jsdelivr.net/npm/@cobalt-design-system/web-components/dist/web-components/web-components.esm.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@cobalt-design-system/web-components/dist/collection/tokens/index.css" rel="stylesheet">
Any Cobalt component added to the webpage will automatically load. This includes writing the component tag directly in HTML, or using JavaScript such as document.createElement('cobalt-button')
.
JS apps
npm install @cobalt-design-system/web-components
Note: All the cobalt components are using Design Tokens so it is recommended to import them all in the project as global styles using the method of your choice. They are located in
@cobalt-design-system/web-components/dist/collection/tokens/index.css
.
In the root file of the app:
import { defineCustomElements } from '@cobalt-design-system/web-components/loader'
// Register components as custom elements
defineCustomElements()
Any Cobalt component added to the webpage will automatically load.
Framework Bindings
The @cobalt-design-system/web-components
package can be used in simple HTML, or by vanilla JavaScript without any framework at all. Cobalt also has packages that make it easier to integrate Cobalt into a framework's traditional ecosystem and patterns. (However, at the lowest-level framework bindings are still just using @cobalt-design-system/web-components
).