_ui | A lightweight DOM interface

_ui (aka 'minUI') is a simple and straightforward library for interfacing with the DOM.

It uses ES6+ JavaScript with no dependencies, and offers an API to make messy DOM manipulation code much more readable. It's currently an early alpha version, and I would appreciate any feedback/bugs!

View GitHub

Selecting Elements

_ui has a single, flexible DOM selection method.

Retrieving single elements or a collection is as simple as choosing the right option:

let buttons = _ui.get({query: 'btn.btn-primary'});
let formBtn = _ui.get({id: 'formBtn'});
let cards = _ui.get({class: 'card'});

Straight-forward Events

_ui lets you easily attach events across the DOM.

Single element:

_ui.click({id: 'formBtn'}, () => console.log('clicked!'));

Event bubbling:

_ui.mouseover(someFn, {query: 'alert.mouseover-this'});

_ui implements it's own component-like system called blueprints

Creating a blueprint is straightforward:

let alert = {
  tag: 'div',
  classes: ['alert', 'alert-primary'],
  attr: {
    role: 'alert',
    innerText: 'Hover over me! Then click me!',
    blueprint: 'alert',
  },
  states: {
    primary: ['alert-primary'],
    danger: ['alert-danger'],
    success: ['alert-success'],
    info: ['alert-info'],
  },
}

Then pass the object to the factory (_ui.make):

function insertAlerts(parent) {
  for (let i = 0; i < 3; i++) {
    parent.appendChild(_ui.make(alert));
  }
}

And do something with them!

_ui.loaded(() => {
  insertAlerts(_ui.get({id: 'demo'}));

  let alerts = _ui.get({class: 'alert'});

  _ui.mouseenter(alerts[0], () => _ui.state(alerts[0], 'danger'));
  _ui.mouseenter(alerts[1], () => _ui.state(alerts[1], 'info'));
  _ui.mouseenter(alerts[2], () => _ui.state(alerts[2], 'success'));

  _ui.click(revertToPrimary, {query: '.alert'});
});

Demo of the code to the left