@aybolit/white-label

    0.1.0 • Public • Published

    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

    • Button
    • Checkbox
    • Progress
    • Range
    • 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);

    Keywords

    none

    Install

    npm i @aybolit/white-label

    DownloadsWeekly Downloads

    0

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    129 kB

    Total Files

    15

    Last publish

    Collaborators

    • web-padawan