gokhanmeteerturk / HeadwindHTML

Create HTML from CSS! A modern javascript library you'd expect Facebook to invent. Slowly build modern websites without ever leaving your CSS, with HeadwindHTML

HeadwindHTML

Create HTML from CSS! A modern javascript library you'd expect Facebook to invent.

Slowly build modern websites without ever leaving your CSS, with HeadwindHTML

(note: We dropped Typescript with v0.x)

What does it do?

Try it now (Codepen)

Headwind HTML let's you write CSS instead of HTML. When the page is loaded, your css will be parsed and converted to HTML.

Normally, you would create an html link like this:

<a href="https://google.com">Text</a>

---

With Headwind HTML, you can create your link element directly from CSS!!

.css::after{
  --s:a;
  --s-text:"I love Headwind";
  --s-apply-href:"https://google.com";
}

Which will also reduce your HTML to this:

<script src="https://cdn.jsdelivr.net/gh/gokhanmeteerturk/HeadwindHTML/headwind.js"></script>
<div id="root" class="css"></div>

End result:

I love Headwind

---

Can I also apply Tailwind CSS utility classes?

Yes you can! Here is a simple html link, but with Headwind and Tailwind:

.css::after{
  --s:a;
  --s-text:"I love Headwind with Tailwind";
  --s-apply:px-4 py-3 my-2 mx-3 text-md text-white font-semibold bg-purple-600 rounded-full border
  border-purple-200 hover:text-purple-600 hover:bg-white hover:border-purple-600 focus:outline-none
  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2;
  --s-apply-href:"https://google.com";
}

How to create an element tree?

You can use --s-child custom property to create child elements. Headwind will automatically create the child elements.

.css::after{
  --s:a;
  --s-text:"I love breaking";
  --s-apply:px-4 py-3 my-2 mx-3 text-md text-white font-semibold bg-purple-600 rounded-full border border-purple-200 hover:text-purple-600 hover:bg-white hover:border-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2;
  --s-apply-href:"https://google.com";
  
    /* Don't let Adam Wathan see this. */
  --s-child:bold-text-element;
}

.bold-text-element::after{
  --s:b;
  --s-text:" established industry standards";
}

Does it use virtual DOM?

No.

Does it break your console?

Yes. Headwind HTML is so 2023 that it intentionally overrides console.error function to make your website feel modern and interactive.

Should I use it?

You should never use Headwind HTML in any kind of environment.