The standard Javascript interface design framework for the WEB! It is designed for quick and easy UI development of all sizes. This framework is specifically built for high performance and all out customizations.
- Try it on the playground
- Try it on stackblitz
- Read the documentation
To create a project with NPM
npm init javascriptui
or with yarn
yarn create javascriptui
All functions can be call in a chain i.e.
new Container().display('flex').justifyContent('center')
The only exceptions are getter functions. A getter function is used to get the value created by the setter function. Usually, preceded by a string. i.e. $display
or $justifyContent
All functions can both work as getters and setters. The difference is the value passed. If a value is passed, it performs as setter and if no value is passed, it performs as a getter.
// setter function
const h1 = new H1().text('Hello world');
// getter function
console.log(h1.text())
// output: Hello world
Elements in JUI are defined as classes. That is, all html tags i.e. H1
, A
, IMG
, EM
, DIV
, Span
etc. Use any of these, simply by calling new
i.e.
new Div();
Document tree are created with the addChild
function.
Check other element functions in Element functions
new Container().display('flex').addChild(
new H1().text('Hello world')
)
Output html:
<div>
<h1>Hello world</h1>
</div>
Elements in JavascriptUI are styled by calling the CSS properties on the class object in their camelCase form.
new H1().text('Hi!').fontSize(12).fontWeight('bold').color('red');
These CSS properties are according to what is available in the active client browser. JUI is only exposing the existing browser API Read more about CSS in Styling elements
HTML attributes can be called in similar fashion as explained above. Only starting with the attr
keyword.
new A().text('Call to action').attrHref('/jui-docs').attrTarget('_self');
All events listeners in JUI can be added by using the on
function i.e.
new Button().text('Click').on({
click: () => console.log('clicked!'),
mousemove: e => console.log(e.clientX),
mouseup: e => console.log(e.clientY)
});
Read the full documentation about Themes, Styles, Router, Config and more
We would love to have you on board to make JUI even better. Please see contribution.md for more information.