# base-elements

> A selection of native DOM elements

Latest version **2.2.1** (published 2017-02-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install base-elements
pnpm add base-elements
yarn add base-elements
bun add base-elements
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.1 |
| Published | 2017-02-12 |
| First published | 2016-10-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 41 |
| Maintainers | kriesse, yoshuawuyts |
| Keywords | dom, native, choo, bel, yo-yo |

## Links

- npm: https://www.npmjs.com/package/base-elements
- Repository: https://github.com/yoshuawuyts/base-elements
- Homepage: https://github.com/yoshuawuyts/base-elements#readme
- Issues: https://github.com/yoshuawuyts/base-elements/issues
- npm.io page: https://npm.io/package/base-elements

## Dependencies (5)

- [bel](https://npm.io/package/bel.md) ^4.5.0
- [xtend](https://npm.io/package/xtend.md) ^4.0.1
- [sheetify](https://npm.io/package/sheetify.md) ^6.0.1
- [balloon-css](https://npm.io/package/balloon-css.md) ^0.4.0
- [nanocomponent](https://npm.io/package/nanocomponent.md) ^2.0.0

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 2.2.1 (latest) — 2017-02-12
- 2.2.0 — 2017-02-04
- 2.1.1 — 2017-01-31
- 2.1.0 — 2017-01-22
- 2.0.1 — 2016-11-01
- 2.0.0 — 2016-10-28
- 1.2.0 — 2016-10-28
- 1.1.2 — 2016-10-24
- 1.1.1 — 2016-10-24
- 1.1.0 — 2016-10-23
- 1.0.0 — 2016-10-11

## README

# base-elements [![stability][0]][1]
[![npm version][2]][3] [![build status][4]][5]
[![downloads][8]][9] [![js-standard-style][10]][11]

A selection of configurable native DOM UI elements. Inspired by
[rebass](https://rebass-beta.now.sh) and
[tachyons](https://github.com/mrmrs/tachyons).

## Usage
```js
var Avatar = require('base-elements/avatar')
var css = require('sheetify')
var html = require('bel')

css('tachyons')

var tree = html`<main>${Avatar()}</main>`
document.body.appendChild(tree)
```

## API
### avatar(src, opts?)
Create a circular avatar image.
`src` is a URL. `opts` can contain:
- __size:__ (default: `3`) set the size of the element. Enums: `{1, 2, 3, 4,
  5}`
- __radius:__ (default: `100`) set the radius of the element. Enums:
  `{0, 1, 2, 3, 4, 100}`
- __class:__ (default: `''`) set additional classes on the element

## progress(value, opts?)
Create a progress bar.
`value` is a number between 0 and 1. `opts` can contain:
- __reverse:__ (default: `'false'`) reverses the progress bar direction
- __class:__ (default: `''`) set additional classes on the element

## tooltip(text, opts, child)
Create a tooltip on a child element from a string. `opts` can contain:
- __position:__ (default: `'up'`) set the position of the tooltip. Enums:
  `{ 'up', 'down', 'left', 'right' }`
- __class:__ (default: `''`) set additional classes on the element

## modal(opts)
Create a new modal element. `opts` is similar to the those passed into
[nanocomponent][nc]. Some properties are slightly different:
- __render:__ (required). Creates the inner content for the modal element;
  floated in the center of the page.
- __onexit:__ called when the element scrolls out of view, or the `esc` key is
  pressed. Useful to trigger unmounts with
- __class:__ add extra classes on the element

## See Also
- [bel](https://github.com/shama/bel)
- [tachyons](https://github.com/mrmrs/tachyons)
- [rebass](https://rebass-beta.now.sh)
- [awesome-choo](https://github.com/yerkopalma/awesome-choo)
- [awesome-yo-yo](https://github.com/sethvincent/awesome-yo-yo)

## Installation
```sh
$ npm install base-elements
```

## License
[MIT](https://tldrlegal.com/license/mit-license)

[0]: https://img.shields.io/badge/stability-experimental-orange.svg?style=flat-square
[1]: https://nodejs.org/api/documentation.html#documentation_stability_index
[2]: https://img.shields.io/npm/v/base-elements.svg?style=flat-square
[3]: https://npmjs.org/package/base-elements
[4]: https://img.shields.io/travis/yoshuawuyts/base-elements/master.svg?style=flat-square
[5]: https://travis-ci.org/yoshuawuyts/base-elements
[8]: http://img.shields.io/npm/dm/base-elements.svg?style=flat-square
[9]: https://npmjs.org/package/base-elements
[10]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square
[11]: https://github.com/feross/standard
[nc]: https://github.com/yoshuawuyts/nanocomponent/

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