Skip to main content

Getting started

This library works with elements represented as an array of HTML entities, and nodes that control the behaviour of elements.

Elements are automatically responsive pieces of code the produce code that renders structure of user interface.

Nodes change the look and behavior of elements.

Let's walk through the app creation process step-by-step. There is also interactive playground at the bottom of this page.

Installation​

The fastest way to get started is to use the NodeJS.

npm create nodality@latest my-app

Step 1​

Define array of elements you want to display in your user interface.

let elements = [
    {
        type: "h1",
        text: "Hello"
    }
];

Step 2​

Define array of nodes that will adjust behaviour of the element. This particular node will add the stroked text effect.

let nodes = [
    {
       op: "blast"
    }
];

Step 3​

Add nodes array into .nodes modifier, and use .set method to mount the result of the code to the website. Use code: true option to also display the code of the elements.

new Des()
    .nodes(nodes)
    .add(elements)
    .set({
        mount: "#mount",
        code: true
    });

Also define div with id #mount that will serve as a root to render the UI.

Everything together​

Here is the entire code:

<!--div for mounting the result-->
<div id="#mount"></div>

<script type="module">
import {Des} from "https://www.unpkg.com/nodality@1.0.0-beta.4/dist/index.esm.js";

let elements = [
    {
        type: "h1",
        text: "Hello"
    }
];


let nodes = [
    {
       op: "blast"
    }
];


new Des()
    .nodes(nodes)
    .add(elements)
    .set({
        mount: "#mount",
        code: true
    });
</script>

After running this code, you will see h1 element on the screen. When the user resizes window anf hits the breakpoint 400 - 600px the text stroke effect will appear thanks to stroke modifier.

User will also see the resulting code.

output alt text

, new Text("Hello")
 .set({
 index: "0",
 fluidc: "S1",
 font: "Arial",
 stroke: {op:{name:"blast",color:"green",width:"1px"}}, 
 })
 
.render("#mount");

You can then render this generated element directly in new empty HTML file. Use the render method, where #mount is a div element that will be used to render the Text class.



<!--div for mounting the result-->
<div id="#mount"></div>

<script type="module">
import {Des} from "https://www.unpkg.com/nodality@1.0.0-beta.4/dist/index.esm.js";

new Text("Hello")
 .set({
 index: "0",
 fluidc: "S1",
 font: "Arial",
 stroke: {op:{name:"blast",color:"green",width:"1px"}}, 
 })
.render("#mount");
</script>

See the demo below:

Demo​