Domflow NPM | npm.io

!Domflow is in early development, so many things are missing!

Domflow

About

Domflow is a library for node for creating html structure and layout in purely javascript. Unlike existing solutions, domflow does not attempt to emulate the way you would write html and css. It instead takes advantage of what you can do with javascript.

Goals

With domflow, you create both the structure and layout for your webapps in one single place, making it more clear how everything will behave.

Domflow comes bundled with Ionicons version 4 and has built in auto complete for all it's various icons, so that you can spend more time implementing icons, and less time looking for them.

There are more icon fonts to come.

With domflow, instead of going with the names that you'll find in html markup such as div, p, and input. We went with names that are more self explanatory, such as container, text and slider.

With domflow, there is no need to use things like document.querySelector to access elements, such as buttons. Instead you can just assign your buttons to variables in the same place that you create them.

With domflow, it's up to you how you want to structure things. You can keep all your elements in one big structure, you can split it up into functions that creates the seperate parts or even classes to make parts more reusable and extendable.

Getting started

Please checkout the getting started page where I have tried to provide clear and concise instructions, from initializing the project up to running it in the browser.

Examples

Nested containers

Without domflow (html, css):

<div id="parent">
       <div id="child"></div>     
</div>

#parent {
	width: 500px;
    height: 200px;
}

#child {
	width: 50%;
    height: 50%;
}

Without domflow (javascript only):

const parent = document.createElement("div");
parent.style.width = "500px";
parent.style.height = "200px";

const child = document.createElement("div");
child.style.width = "50%";
child.style.height = "50%";

parent.appendChild(child);

Domflow:

Container({width: "500px", height: "200px"}, () => {
	Container({width: "50%", height: "50%"}, () => {
	
	});
});

Button

Without domflow (html, css, javascript):

<button id="mainButton">Click me</button>

#mainButton {
	width: 100px;
	height: 40px;
}

const button = document.getElementById("mainButton");
button.onclick = () => {
	console.log("Button clicked");
}

Without domflow (javascript only):

const button = document.createElement("button");
button.innerText = "Click me";
button.style.width = "100px";
button.style.height = "40px";
button.onclick = () => {
	console.log("Button clicked");
}

Domflow:

const button = Button("Click me", {width: "100px", height: "40px"});
button.onClick = () => { // note that domflow uses camel casing
	console.log("Button clicked");
}