An open API service indexing awesome lists of open source software.

https://github.com/jamen/avo

Functions for building UI in JavaScript
https://github.com/jamen/avo

Last synced: 10 months ago
JSON representation

Functions for building UI in JavaScript

Awesome Lists containing this project

README

          

# avo

> Functions for building UI in JavaScript

```js
var {app, html, css} = require('avo')

// ...
```

Three main goals to this:

- Ability to build apps in full JavaScript
- Speedy. Uses Snabby on top of Snabbdom
- Small. No bloat, just separate into packages

## Installation

```sh
$ npm install --save avo
# with Yarn:
$ yarn add avo
```

## Usage

### `avo.app(opts)`

Manages an application's state and routes.

```js
var app = require('avo').app

var start = app({
// Initial state
state: { title: 'foobar' },
// Subscribers
subs: { ... },
// Messages
update: { ... },
// App routes
routes: [
['/', home],
['/foo', foo]
],
})

// Start with DOM entry point
start(document.body)
```

### `avo.html`

A template string tag based on [Snabby](https://github.com/jamen/snabby) that creates your views.

```js
var { app, html } = require('avo')

var foo = html`


Hello world!

`
```

### `avo.css`

A template string tag based on [Sheetify](https://github.com/stackcss/sheetify) that creates your styles

```js
var { app, html, css } = require('avo')

var prefix = css`
:host {
color: red
}
`

var foo = html`


Hello world!

`
```

## License

MIT © [Jamen Marz](https://git.io/jamen)

---

[![version](https://img.shields.io/npm/v/avo.svg?style=flat-square)][package] [![travis](https://img.shields.io/travis/avo/jamen.svg?style=flat-square)](https://travis-ci.org/avo/jamen) [![downloads/month](https://img.shields.io/npm/dm/avo.svg?style=flat-square)][package] [![downloads](https://img.shields.io/npm/dt/avo.svg?style=flat-square)][package] [![license](https://img.shields.io/npm/l/avo.svg?style=flat-square)][package] [![support me](https://img.shields.io/badge/support%20me-paypal-green.svg?style=flat-square)](https://www.paypal.me/jamenmarz/5usd) [![follow](https://img.shields.io/github/followers/jamen.svg?style=social&label=Follow)](https://github.com/jamen)
[package]: https://npmjs.com/package/avo