Instantui NPM | npm.io

This is a pure JavaScript dom manipulation library built on top of Bootstrap 5 CSS and includes a number of features that make it easy to build a modern website or app.

Install

Nodejs:

It can be installed from npm:

$ npm install instantui

Then it can be imported with require:

// main.js
const { Row, Button } = require("instantui")
// do something with instantui
...

Then you can build & bundle your app with built-in bundler. Following command will take main.js as entry point and output the bundled file to public folder.

$ npx instantui -i main.js -o public

See help for more options:

$ npx instantui --help
Options:
  -a, --assets    Assets folder to be copied                            [string]
  -h, --help      Show help                                            [boolean]
  -c, --clean     Cleans output path                                   [boolean]
  -i, --input     Input file                                            [string]
  -m, --minimize  Minimize output                                      [boolean]
  -t, --theme     theme: default, darkly, materia, minty, morph, quartz,
                  sketchy, vapor                                        [string]
  -n, --notice    Show notice                                          [boolean]
  -o, --output    Output dir                                            [string]
  -r, --run       Run server and open in the browser                   [boolean]
  -v, --version   Show version number                                  [boolean]

Web:

InstantUI can be used as module or global variable. Both css and script file needs to be included in the html file. This is how it can be added as module:

<link rel="stylesheet" href="https://unpkg.com/instantui/dist/themes/default.min.css">
<script type="module">
    import * as instantui from "https://unpkg.com/instantui/dist/instantui.module.min.js";
    const { Alert, Badge, Button, Row, Widget } = instantui;
    // do something with instantui
    ...
</script>

As global module:

<link rel="stylesheet" href="https://unpkg.com/instantui/dist/themes/default.min.css">
<script type="importmap">
      {
        "imports": {
          "instantui": "https://unpkg.com/instantui/dist/instantui.module.min.js"
        }
      }
</script>

<script type="module">
    const { Alert, Badge, Button, Row, Widget } = instantui;
    // do something with instantui
    ...
</script>

As global variable:

<link rel="stylesheet" href="https://unpkg.com/instantui/dist/themes/default.min.css">
<script src="https://unpkg.com/instantui/dist/instantui.min.js"></script>
<script>
    const { Alert, Badge, Button, Row, Widget } = instantui;
    // do something with instantui
    ...
</script>

Usage

const { Column, Heading, Text } = instantui;

const myLayout = new Column().addChild(
    new Heading(4, "Hello World!"),
    new Text("This is simple example of InstantUI usage."),
)

// Render the layout to the body, this waits until the page is fully loaded and renders.
myLayout.render(document.body);

// Or directly add it to document body, this will render immediately.
document.body.appendChild(myLayout.getDom());

Layout

InstantUI simplifies the creation of layout by providing only 2 type of layout components: Row and Column. Almost everything can be built with these components just by organizing them in the desired way.

The secret of creating good layout is to start from big picture and then go into detail.

Let's create a simple webpage with header, body, footer and sidebar. First we create the main frame, which is a column and covers whole screen. Then add 3 rows as a child stretching along the width. First row is the header, second row is the body, and the third row is the footer. Keep header and footer thin and stretch body to remaining space. Now add 2 colums to body, first column is the sidebar and the second column is the main content. That's it.

const { Column, Row } = instantui;

const myLayout = new Column().stretch().addChild( // Main Frame
    new Row().stretchX().setHeight(150), // Header
    new Row().stretch().addChild( // Body
        new Column().stretchY().setWidth(250), // Sidebar
        new Column().stretch(), // Main content
    ),
    new Row().stretchX().setHeight(150) // Footer
)

myLayout.render(document.body);

Alignment

Elements inside the layouts can be aligned on both main axis and cross axis.

Main Axis:

Distributes free space between child items along the direction of the layout. It's horizontal axis for Row layout and vertical axis for Column layout. There are 6 alignment options:

start (default): items are packed toward the start of the flex-direction.
end: items are packed toward the end of the flex-direction.
center: items are centered along the line.
between: items are evenly distributed in the line; first item is on the start line, last item on the end line.
around: items are evenly distributed in the line with equal space around them.
evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.

// Children  widgets will be vertically centered on row layout.
myRow.alignItemsMain("center")
// Child widgets be aligned to start position vertically. In this case all widgets will be aligned to the top.
// Once small breakpoint is reached, children will be aligned to bottom.
myRow.alignItemsMain("start").align("end", "sm")

Row - distributes space between items horizontally:

Column - distributes space between items vertically:

Cross Axis:

It distributes free space between item and layout boundary along the perpendicular axis of the layout direction. It's item's vertical axis for Row layout and item's horizontal axis for Column layout. There are 6 alignment options:

stretch (default): stretch to fill the container (still respect min-width/max-width).
start: items are placed at the start of the cross axis.
end: items are placed at the end of the cross axis.
center: items are centered in the cross-axis.
baseline: items are aligned such as their baselines align.

// Child widgets will be horizontally centered on row layout.
myRow.alignItemsCross("center")
// Child widgets be aligned to start position horizontally. In this case all widgets will be aligned to the left.
// Once small breakpoint is reached, children will be aligned to right.
myRow.alignItemsCross("start").align("end", "sm")