I've been dreaming of a ui library that lets me use declarative javascript.
Okay, but what do i mean cause every framework/library calls itself declarative.
I mean by this !
ui.addButton(parent, text, width, height, options)
And not jsx or a compiled framework. The mission is to keep the core library code under a 1000 lines of code.
innerscope's mission is to provide a set of core functions that can be extended to build custom components or port a whole design system to it.
Another design decision is we use a classes, its just to reduce js common pitfalls.
All you have to do is and the typical index.html file
And a companion App.js file.
check the github page about this and its set-up
How it works is I use a concept of layouts, layouts are div's but with special styles like flex-start and flex-end.
A layout is called like :
ui.createLayout(layoutType, options)
There are 4 types of layouts :
- Linear
- Absolute
- Card
- Frame
And don't forget to add it to your page via, ui.addLayout() function.
Writing Components & Sharing Them
Firstly i decided to create a class ElementComposer this class allows you to create components using this similar syntax and will inherit methods like ( setMargins / setPosition / show & hide ).
You can extend these methods by adding your own, but check the syntax rules.
When adding your components, you can load your additional scripts and css via the ui.loadScript() and ui.loadCSS().
Writing components is done in js, so that means you use the
document.createElement() api.
And finally add it to the composer div.
And you can write your ui in javascript, on top of that you can use this in production.
I've published it on npmjs.com and add as a script tag at unpkg.com.
https://github.com/oarabiledev/innerscope
Thank You For The Interest ❣️❣️❣️❣️
Top comments (0)