# @aybolit/core

> Aybolit Core is a set of base classes built with [LitElement](https://github.com/Polymer/lit-element). Each class can be extended and registered as custom element.

Latest version **0.1.0** (published 2019-03-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @aybolit/core
pnpm add @aybolit/core
yarn add @aybolit/core
bun add @aybolit/core
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2019-03-12 |
| First published | 2019-03-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 134.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 101 |
| Author | Serhii Kulykov |
| Maintainers | web-padawan |

## Links

- npm: https://www.npmjs.com/package/@aybolit/core
- Repository: https://github.com/web-padawan/aybolit
- Homepage: https://github.com/web-padawan/aybolit#readme
- Issues: https://github.com/web-padawan/aybolit/issues
- npm.io page: https://npm.io/package/@aybolit/core

## Dependencies (2)

- [lit-html](https://npm.io/package/lit-html.md) ^1.0.0
- [lit-element](https://npm.io/package/lit-element.md) ^2.0.1

## Recent versions

- 0.1.0 (latest) — 2019-03-12

## README

# Aybolit Core

Aybolit Core is a set of base classes built with [LitElement](https://github.com/Polymer/lit-element). Each class can be extended and registered as custom element.

## Overview

Aybolit Core is meant to be used as a base for creating themable web components. It does not provide any CSS except for certain "normalize" styles (especially, [`hidden`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) attribute is forced to use `display: none !important` for all components).

## Installation

Aybolit Core is available as [npm package](https://www.npmjs.com/package/@aybolit/core):

```sh
# with npm
npm i @aybolit/core --save

# with yarn
yarn add @aybolit/core
```

## Components

- [x] Button
- [x] Checkbox
- [x] Progress
- [x] Range
- [x] Switch

## Creating Components

You can extend a component base class like this:

```js
import { ButtonElement } from '@aybolit/core';
import { css } from 'lit-element';

class CustomButton extends ButtonElement {
  static get styles() {
    return [
      /* core styles */
      super.styles,
      /* your own CSS */
      css`
        .button {
          color: var(--my-button-color, #111);
        }
      `
    ];
  }
}

customElements.define('custom-button', CustomButton);
```

---
_Source: https://npm.io/package/@aybolit/core · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._