├── README.md ├── HUI.js ├── docs ├── HUI.js └── index.html └── LICENSE.txt /README.md: -------------------------------------------------------------------------------- 1 | # HUI.js 2 | 3 | [![Made in Nigeria](https://img.shields.io/badge/made%20in-nigeria-008751.svg?style=flat-square)](https://github.com/acekyd/made-in-nigeria) 4 | 5 | HUI.js is a Simple and Lightweight JavaScript UI Layout Library for creating re-usable Web Page Layouts and Design. Documentations at http://devhammed.github.io/HUI.js 6 | -------------------------------------------------------------------------------- /HUI.js: -------------------------------------------------------------------------------- 1 | /** HUI.js | JavaScript UI Layout Library 2 | * @author Oyedele Hammed Horlah 3 | * @version 2.0 4 | * @since January 1, 2017 5 | * @see http://www.oyedelehammed.ml/HUI.js 6 | */ 7 | 8 | function hui( tag, attrs ) { 9 | var children = [].slice.call( arguments, 2 ), 10 | d = document; 11 | var node = d.createElement( tag ); 12 | if ( attrs ) { 13 | for ( var attr in attrs ) 14 | node[ attr ] = attrs[attr]; 15 | } 16 | if ( children ) { 17 | children.forEach(function( child ) { 18 | node.appendChild( 19 | (typeof child == 'string') ? d.createTextNode( child ) : child 20 | ); 21 | }); 22 | } 23 | return node; 24 | } 25 | function huiRender( node, view ) { 26 | document.querySelector(view).appendChild( node ); 27 | } -------------------------------------------------------------------------------- /docs/HUI.js: -------------------------------------------------------------------------------- 1 | /** HUI.js | JavaScript UI Layout Library 2 | * @author Oyedele Hammed Horlah 3 | * @version 2.0 4 | * @since January 1, 2017 5 | * @see http://www.oyedelehammed.ml/HUI.html 6 | */ 7 | 8 | function hui( tag, attrs ) { 9 | var children = [].slice.call( arguments, 2 ), 10 | d = document; 11 | var node = d.createElement( tag ); 12 | if ( attrs ) { 13 | for ( var attr in attrs ) node.setAttribute( attr, attrs[attr] ); 14 | } 15 | if ( children ) { 16 | children.forEach(function( child ) { 17 | node.appendChild( 18 | (typeof child == 'string') ? d.createTextNode( child ) : child 19 | ); 20 | }); 21 | } 22 | return node; 23 | } 24 | function huiRender( node, view ) { 25 | document.querySelector(view).appendChild( node ); 26 | } -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 - Current 4 | Oyedele Hammed Horlah, http://www.oyedelehammed.ml 5 | 6 | 7 | All rights reserved. 8 | 9 | 10 | Permission is hereby granted, free of charge, to any person obtaining 11 | a copy 12 | 13 | of this software and associated documentation files (the 14 | "Software"), to deal 15 | 16 | in the Software without restriction, including 17 | without limitation the rights to use, copy, modify, merge, publish, 18 | distribute, sublicense, and/or sell 19 | 20 | copies of the Software, and to 21 | permit persons to whom the Software is furnished to do so, subject to 22 | the following conditions: 23 | 24 | The above copyright notice and this permission notice shall be 25 | included in all copies or substantial portions of the Software. 26 | 27 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 28 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 29 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 30 | NONINFRINGEMENT. 31 | 32 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 33 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 34 | OF CONTRACT, TORT OR 35 | 36 | OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 37 | WITH THE SOFTWARE OR 38 | THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HUI.js - Simple and Lightweight JavaScript UI Layout Library 8 | 10 | 11 | 12 | 13 | 14 |
15 |

HUI.js - Simple and Lightweight JavaScript UI Layout Library

16 |
17 |
18 |
19 | Download v1.0 20 | Fork on GitHub 21 |
22 |
23 |

#. Introduction to HUI.js

24 |

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

29 | <script src="http://www.oyedelehammed.ml/HUI.js"></script> 30 |
31 |

32 |
33 |
34 |
35 | HUI.js has a HTMLElement creator function "hui()" and a function to render the created HTMLElement on a view:- 36 |

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

42 |

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

47 |
48 |

Example:

49 |
50 |

index.html

51 | <DOCTYPE html> 52 |
<html> 53 |
  <head> 54 |
    <title>My HUI.js App</title> 55 |
  </head> 56 |
  <body> 57 |
    <div id="view"></div> 58 |
    <script src="js/HUI.js"></script> 59 |
    <script src="js/app.js"></script> 60 |
  </body> 61 |
</html> 62 |
63 |

js/app.js

64 | var app = hui('div', { id: 'container' }, 65 |
  hui('header', { id: 'header' }, "Header"), 66 |
  hui('main', { id: 'main' }, 67 |
    hui('h1', {}, "Hello world"), 68 |
    hui('p', {}, "Hello world from HUI.js") 69 |
  ), 70 |
  hui('footer', { id: 'footer' }, "Footer") 71 |
); 72 |
huiRender(app, '#view'); 73 |
74 |
75 |

Result:

76 |
77 |
78 |
79 |

Check out my other projects 80 | HERE.

81 | 84 | 85 | 96 | 97 | 98 | 99 | --------------------------------------------------------------------------------