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
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 a html link like this:
<a href="http://google.com">Texta>
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:
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.
4 Feb 25, 2022
53 Dec 8, 2022
10 Oct 30, 2022
32 Jul 22, 2022
1 Oct 2, 2022
8 Dec 4, 2022
6 Feb 17, 2022
7 Jul 17, 2022
20 Jun 30, 2022
8 Jul 23, 2022