Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/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
https://github.com/gokhanmeteerturk/HeadwindHTML
Last synced: 9 days ago
JSON representation
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
- Host: GitHub
- URL: https://github.com/gokhanmeteerturk/HeadwindHTML
- Owner: gokhanmeteerturk
- License: mpl-2.0
- Created: 2022-05-27T09:11:14.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-08T14:40:26.000Z (about 1 year ago)
- Last Synced: 2024-08-01T13:27:48.825Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 21.5 KB
- Stars: 322
- Watchers: 2
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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)](https://codepen.io/gokhanmeteerturk/pen/QWQaaoZ)
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:
```html
Text
```
---
With Headwind HTML, you can create your link element directly from CSS!!
```css
.css::after{
--s:a;
--s-text:"I love Headwind";
--s-apply-href:"https://google.com";
}
```
Which will also reduce your HTML to this:
```html
```
End result:
[I love Headwind](https://google.com)
---
## Can I also apply Tailwind CSS utility classes?
Yes you can! Here is a simple html link, but with Headwind and Tailwind:
```css
.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
.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.