README.md

JUICE

Jibe UICommon Elements = JUICE

Framework agnostic UI components built with ES6 and WebPack

Purpose

JUICE is a framework-agnostic and isomorphic library of UI components that contain specific interaction behaviors necessary for Jibe's use cases. This library has set out to solve some of the problems experienced on the front-end:

- maintaining consistent application state when individual UI components are updated
- Allowing for server-side rendering of pages for SEO / Site Performance purposes
- Creating a uniform look-and-feel for visitors when they interact with Jibe software

Installation

Usage

A brief example usage

// Pull in the libraryconstUI=require('jibe-juice');
// Instantiate a component, pass the selector of the container to insert component into and the optsconstbtn=newUI.Button('.button-container', {
label:'Search',
submit:true
});
// Subscribe to fire this function whenever button calls publishbtn.subscribe(function () {
console.log('clicked!');
});
// Render the DOM for the buttonbtn.render();

Build

- ES6 to ES5 with support for IE9+ via [Babel](https://babeljs.io/)
- [CSS Next](http://cssnext.io/) used to transpile all CSS into browser specific prefixes, etc
- all CSS auto [loaded as style tags](https://github.com/webpack/style-loader) into DOM
- images in-lined as data-uris with [img-loader](https://github.com/thetalecrafter/img-loader)
- support for [doT](https://olado.github.io/doT/index.html) templates
- support for ES6 [templates string](https://github.com/bradbenvenuti/template-string-loader) partials