"uiloos" is a headless component framework because it does not contain any HTML or CSS, it only contains behavior. This gives you the developer / designer complete control over the graphical design of the website / application / game.
The idea for "uiloos" came when we had the following realization: across many websites / applications we are re-implementing the same behaviors over and over again. Just with a new look and feel.
Surely there must be a better way of doing things?
We think the answer is "uiloos".
You might want to use uiloos when when you find yourself in the following situation:
You need complete control over the design / appearance of the website and you do not want to sacrifice on the design one bit.
When you are put into this situation using third party components is often out of the question. Some third party components cannot be re-skinned to fit your design, or they can only be re-skinned partially which can look awkward.
At this point you are forced to write you own code / behaviors. This is where "uiloos" can accelerate you greatly by providing these behaviors.
At this moment uiloos provides the following components:
A component to create carousels, sortable lists, tabs interfaces and segmented buttons.
A component to create flash message centers, modal windows, confirm dialog and notifications centers with.
A component to create text based animation with.
Take a look at our future plans to see what is coming next in uiloos.
There are two main ways of using uiloos:
All uiloos components can be observed, this means that you can subscribe to changes of the component. Whenever the component changes you will receive an event in the subscriber.
When an event occurs you must then synchronize with the DOM. This means altering the DOM so it represents the new state. You might add a CSS class to an element, remove elements, add elements or change an elements text.
For example when using the ActiveList one event that exist is called the "ACTIVATED" event. When this event occurs you might add an .active CSS class, to the element which became active.
4.2 With a reactive framework
With a reactive framework such as Svelte, React, Vue, Angular etc etc. Manually performing the DOM manipulation is not necessary, as your framework of choice will handle the DOM manipulation for you.
uiloos does however provide bindings for React, Vue, Svelte, Alpine, and Angular. With these bindings using uiloos with a framework becomes easier. For example the React bindings provides various hooks, and the vue bindings provides various composables.