# mist.js

> Motion Design in Modular CSS

Latest version **0.8.9** (published 2016-12-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install mist.js
pnpm add mist.js
yarn add mist.js
bun add mist.js
```

## Health

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

Positive: has types; no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.8.9 |
| Published | 2016-12-03 |
| First published | 2016-06-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | AI428 |
| Maintainers | ai428 |
| Keywords | css, design, js, mist, modular, motion, style, typescript |

## Links

- npm: https://www.npmjs.com/package/mist.js
- Repository: https://github.com/AI428/mist
- Homepage: https://github.com/AI428/mist#readme
- Issues: https://github.com/AI428/mist/issues
- npm.io page: https://npm.io/package/mist.js

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 0.8.9 (latest) — 2016-12-03
- 0.8.8 — 2016-11-08
- 0.8.7 — 2016-11-02
- 0.8.6 — 2016-10-06
- 0.8.5 — 2016-10-03
- 0.8.4 — 2016-09-25
- 0.8.3 — 2016-08-30
- 0.8.2 — 2016-08-06
- 0.8.1 — 2016-08-02
- 0.8.0 — 2016-07-30
- 0.7.0 — 2016-07-06
- 0.6.5 — 2016-06-27
- 0.6.4 — 2016-06-20

## README

# MIST

[![npm version](https://badge.fury.io/js/mist.js.svg)](https://badge.fury.io/js/mist.js)

> _Motion Design in Modular CSS_

Mist is a motion design library in modular CSS

## Quick start

```
npm install mist.js --save
```

Or [download](//github.com/AI428/mist/releases/latest)

## Features

- _Using Modular CSS_
- _Using Style Tag_
- _Timing Control_

TL;DR [demo](//codepen.io/collection/DNzaQb/), [site](//ai428.github.com/mist)

## Supported browser

- _Chrome_
- _Edge_
- _Firefox_
- _IE_
- _Safari_

## Usage

Make modular CSS

```javascript
var vivid = {
  background: () => `hsl(${Math.random() * 360}, 50%, 50%)`
}
```

Design motion

```javascript
mist('div')

  // set color, wait 1s
  .set(vivid).time(1000)

  // set color, wait 1s
  .set(vivid).time(1000)

  // clear style
  .clear();
```

Repeat this two-step, to build an interaction

--------------------------------------------------------------------------------

### _`mist( statement ): new`_

_param_   | _type_
--------- | ----------------------------
statement | selector `string`, `element`
new       | new `mist`

New instance

## API

- _Selector_

  - [_any_](#any-selector--new)
  - [_not_](#not-selector--new)

- _Using Modular CSS, Style Tag_

  - [_clear_](#clear-self)
  - [_clearAll_](#clearall-self)
  - [_set_](#set-css--self)
  - [_setAll_](#setall-css--self)

- _Timing Control_

  - [_on_](#on-name--promise)
  - [_pause_](#pause-self)
  - [_resume_](#resume-self)
  - [_time_](#time-dur--self)

- _Utility_

  - [_call_](#call-responsor--self)

--------------------------------------------------------------------------------

### _`any( selector ): new`_

_param_  | _type_
-------- | ----------
selector | `string`
new      | new `mist`

Same as :any, :matches selector

--------------------------------------------------------------------------------

### _`not( selector ): new`_

_param_  | _type_
-------- | ----------
selector | `string`
new      | new `mist`

Same as :not selector

--------------------------------------------------------------------------------

### _`clear(): self`_

Clear modular CSS

--------------------------------------------------------------------------------

### _`clearAll(): self`_

Clear modular CSS each element

--------------------------------------------------------------------------------

### _`set( ...css ): self`_

_param_ | _type_
------- | ---------------------------------------------------
css     | `{ "name": string }`, `{ "name": (now) => string }`

Set modular CSS

--------------------------------------------------------------------------------

### _`setAll( ...css ): self`_

_param_ | _type_
------- | ---------------------------------------------------------------
css     | `{ "name": string }`, `{ "name": (element, i, all) => string }`

Set modular CSS each element

--------------------------------------------------------------------------------

### _`on( name ): promise`_

_param_ | _type_
------- | ---------------------
name    | `string`
promise | [see](#using-promise)

Listen event emission

--------------------------------------------------------------------------------

### _`pause(): self`_

Pause CSS transition, time

--------------------------------------------------------------------------------

### _`resume(): self`_

Resume CSS transition, time

--------------------------------------------------------------------------------

### _`time( dur ): self`_

_param_ | _type_
------- | ---------------------
dur     | milliseconds `number`

Delay execution

--------------------------------------------------------------------------------

### _`call( responsor ): self`_

_param_   | _type_
--------- | ------------
responsor | `() => void`

Call passed function

## Using promise

This library's promise like a [Promise / A+](//promisesaplus.com/), it's extended functions

### _`resume()`_

The fullfilled or rejected promise back to pending

```javascript
var emission = mist('div').on('click');

emission.then((e) => {

  // your process

  emission.resume();
});
```

--------------------------------------------------------------------------------

### _`when( success, err? ): promise`_

_param_ | _type_
------- | -------------------
success | `(response) => any`
err     | `(response) => any`

If you want to reuse callback function, to use

```javascript
mist('div').on('click').when((e) => {

  // your process
});
```

## License

[MIT](//opensource.org/licenses/MIT) © AI428

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