domflow

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

Domflow

About

Goals

Getting started

Examples

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

Layout and structure in one

Structure, such as a page with two images and layout, such as placing those two images next to eachother, are two aspects of designing a website that are tightly coupled. You can't create a layout without also having the appropriate structure.

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

Simple use of icons

Icons can make a big difference in making your design more interesting and help with effectively convey information to your users.

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.

Clear names

Looking at the structure for your site, it should be clear what everything does, just by looking at the names of the elements.

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.

Reduced redundancy

Having to write extra code just to accomplish something that should be very basic, is not ideal.

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.

Flexibilty of workflow

Given that every developer likes doing things their own ways, it's important that you don't feel you're forced into using a strict workflow.

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");
}