#. 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:-
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: