Write HTML in CSS with HeadwindHTML Library

HeadwindHTML is a tiny JavaScript library that lets you write HTML directly within your CSS.

Upon page load, the library parses your CSS and transforms specified styles into corresponding HTML elements.

This reduces the HTML structure, leaving just a minimal <script> tag and root element in your HTML file.

Consider a standard HTML link:

<a href="https://www.cssscript.com">CSSScript.Com</a>

With Headwind HTML, you achieve the same result using this CSS:

.element::after {
  --s:a;
  --s-text:"CSSScript.Com";
  --s-apply-href:"https://www.cssscript.com";
}

How to use it:

1. Download the headwind.js library and load it in your document.

<script src="headwind.js"></script>

2. Write your HTML structure within your CSS using custom properties:

• –s: Defines the HTML tag
• –s-apply: Sets CSS classes
• –s-text: Sets element text content
• –s-apply-href: Sets href attribute
• –s-target: Sets target attribute
• –s-type: Sets type attribute
• –s-child: Creates nested elements

<div id="root" class="element"></div>

.element::after{
  --s:a; /* HTML a Tag */
  --s-text:"I love breaking"; /* Text */
  --s-apply:mx-5; /* Additional CSS classes */
  --s-apply-href:"https://www.cssscript.com"; /* Href attribute */
  --s-target:"_blank"; /* target attribute */
}

3. You can add child elements to your main element using the --s-child property. HeadwindHTML will automatically create these nested elements within the parent structure. For example:

.element::after{
  --s:a; /* HTML a Tag */
  --s-text:"I love breaking"; /* Text */
  --s-apply:mx-5; /* Additional CSS classes */
  --s-apply-href:"https://www.cssscript.com"; /* Href attribute */
  --s-target:"_blank"; /* target attribute */
  --s-child: bold-text-element; /* Specifies a child element */
}

.bold-text-element::after {
  --s: b; /* Child <b> tag */
  --s-text: " A JavaScript & CSS Website"; /* Sets the text for the child */
}