1. Quick start

This lib is aiming to build parser that transforms our custom format into JSX. It tries to fix a few issues we generally have with JSX, especially when used with TailwindCSS. Namely, readability becomes an issue

But if we use pythonic indent-style nesting and multiline classes, it becomes much more managable. You can also have your predefined ordering of which utility classes you group together, for example you start with mobile, in the next row you use md: etc.

``

src/App.js file in your React app

import React from "react";

import { fruktal } from "@frukmruk/html";

const App = () => {
return (
<>
{fruktal

div#
:class flex flex-row flex-wrap
:class w-screen h-screen

div#optional-id
:class w-20 h-20

Jello mello 1

div#
:class w-20 h-20

span#
Jello mello 2

}

);
}

export default App;

`

1.1. Additional utility classes we append to tailwind

We were always confused with justfy-items align-content stuff, so we made more intuitive classes which dictate how is content behaving along either row or col, regardless of flex-direction.


`
.col-center
.row-center

.col-start
.row-start

.col-end
.row-end

.col-evenly
.row-evenly
`

2. More complex example with tailwind

Let's show case a more complex example with assuming that tailwind is configured.

This is the usual boilerplate on top of the file, which also includes example custom component

that we also want to be able to use.


`
import { fruktal, register } from "@frukmruk/html";


// set --debug var to 1 to show debug borders
import "./App.css";


const TextBox = (props) => {
return


// fruk component registrations
register(TextBox);
`

Below is the layout we want to achieve (the top-most one component is ).

Here is the @frukmruk/html code that accomplishes to produce it.

`

const App = () => {
return (
<>
{fruktal

div#
:class flex flex-row flex-wrap
:class col-evenly row-end
:class w-screen h-screen
:class px-5

TextBox#my-id-if-needed
:text Jello from inside component

div#
:class w-full
Jello from inside child

div#
:class flex flex-row row-evenly
:class w-full
:class py-2

div#
:class w-20 h-20
Hey #2

div#
:class w-20 h-20
Hey #3

div#
:class w-20 h-20
Hey #4

div#
:class w-20 h-20
Hey #5

================================================

div#
:class flex flex-row row-evenly
:class w-full
:class py-2

div#
:class w-20 h-20
Hey #6

div#
:class w-20 h-20
Hey #7

================================================

}

);
};

export default App;

``