HUI.js - Simple and Lightweight JavaScript UI Layout Library

Download v1.0 Fork on GitHub

#. Introduction to HUI.js

HUI.js is a Simple and Lightweight JavaScript UI Layout Library for creating easy and re-usable Webpage Layouts. You can download it locally HERE or link to it using SCRIPT tag:-

<script src="http://www.oyedelehammed.ml/HUI.js"></script>

HUI.js has a HTMLElement creator function "hui()" and a function to render the created HTMLElement on a view:-

hui( tag, attributes, ...childrens ): This function is used to create elements and returns a HTMLElement Node that can be rendered or append to a parent Node. The first two arguments is the HTML 'tag' element (required, type: String) and the 'attributes' (optional, type: Object), the rest arguments will be the element 'childrens' (optional, type: HTMLElement | String).

huiRender( node, view ): This function is used to render the HTMLElement Node returned by hui() on a 'view' element. The 'view' argument should be a String that contains the element to select in a CSS-like style e.g to select a view with ID 'view', it would be "#view".

Example:

index.html

<DOCTYPE html>
<html>
  <head>
    <title>My HUI.js App</title>
  </head>
  <body>
    <div id="view"></div>
    <script src="js/HUI.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

js/app.js

var app = hui('div', { id: 'container' },
  hui('header', { id: 'header' }, "Header"),
  hui('main', { id: 'main' },
    hui('h1', {}, "Hello world"),
    hui('p', {}, "Hello world from HUI.js")
  ),
  hui('footer', { id: 'footer' }, "Footer")
);
huiRender(app, '#view');

Result:

Check out my other projects HERE.