Jibe UI Common Elements = JUICE
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
npm install jibe-juice
or
bower install jibe-juice
HTML
<div class="button-container"></div>JS
// Pull in the library
const UI = require('jibe-juice');
// Instantiate a component, pass the selector of the container to insert component into and the opts
const btn = new UI.Button('.button-container', {
label: 'Search',
submit: true
});
// Subscribe to fire this function whenever button calls publish
btn.subscribe(function () {
console.log('clicked!');
});
// Render the DOM for the button
btn.render();- 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