Aybolit White Label
Aybolit White Label is a set of the web components with bare minimum of styles.
Overview
Aybolit White Label is opinionated library not based on any CSS framework. The idea behind it is to provide a meaningful set of default styles easy to extend and override. You might consider it a boilerplate for building your next design system using Web Components. Unlike other Aybolit implementations, White Label doesn't provide any custom CSS properties.
Installation
Aybolit White Label is available as npm package:
# with npm
npm i @aybolit/white-label --save
# with yarn
yarn add @aybolit/white-label
Import either all or individual components:
// all components
import '@aybolit/white-label';
// button only
import { AbwButton } from '@aybolit/white-label';
You can also use get Aybolit White Label from the CDN:
<script src="https://unpkg.com/@aybolit/white-label@latest?module" type="module"></script>
Components
- [x] Button
- [x] Checkbox
- [x] Progress
- [x] Range
- [x] Switch
Examples
<!-- Button -->
<abw-button>Button</abw-button>
<abw-button disabled>Disabled</abw-button>
<abw-button link="https://example.com">Link</abw-button>
<!-- Checkbox -->
<abw-checkbox>Unchecked</abw-checkbox>
<abw-checkbox checked>Checked</abw-checkbox>
<abw-checkbox indeterminate>Indeterminate</abw-checkbox>
<!-- Progress (indeterminate) -->
<abw-progress></abw-progress>
<!-- Progress (determinate) -->
<abw-progress value="50" max="100"></abw-progress>
<!-- Range -->
<abw-range min="0" max="10" value="5"></abw-range>
<!-- Switch -->
<abw-switch>Unchecked</abw-switch>
<abw-switch checked>Checked</abw-switch>
Extending Components
You can extend and override white label component like this:
import { AbwButton } from '@aybolit/white-label';
import { css } from 'lit-element';
class CustomButton extends AbwButton {
static get styles() {
return [
/* white-label styles */
super.styles,
/* your own CSS */
css`
.button {
color: var(--my-button-color, #111);
}
`
];
}
}
customElements.define('custom-button', CustomButton);
Note: white label components register themselves in global CustomElementRegistry via customElements.define()
. If you want to avoid this, import the component styles only, and use them with the base class from @aybolit/core
:
import { ButtonElement } from '@aybolit/core';
import { abwButtonStyles } from '@aybolit/white-label';
import { css } from 'lit-element';
class CustomButton extends ButtonElement {
static get styles() {
return [
/* core styles */
super.styles,
/* white-label styles */
abwButtonStyles,
/* your own CSS */
css`
.button {
color: var(--my-button-color, #111);
}
`
];
}
}
customElements.define('custom-button', CustomButton);