A ui framework where you only write turing complete CSS. No HTML, no JS, no build system.

Disclaimer: Don't use this

<script async defer src="https://unpkg.com/@css-everything/render/dist/renderer/index.js"></script>

The renderer by default uses the body element. You can use :root to describe the starting point. Here's a simple counter example:

:root { --counter: '0'; --cssx-children: div#count button#decr button#incr; } #count::after { content: "Count: " var(--counter); } #incr { --cssx-on-click: update(':root', --counter, calc(get-var(--counter) + 1)); --cssx-text: "++"; } #decr { --cssx-on-click: update(':root', --counter, calc(get-var(--counter) - 1)); --cssx-text: "--"; }

Here are a few live examples for you to try out -

• Here's a calculator example
• Here's a todo app example
• Here's a simple counter example
• Here's a digital & analog clock example
• More in the examples directory

• Read the documentation to become enlightened.
• Here's how this works.

Why not?

What?

You can find the answer with this example.

Here's how it works.

Yep. Not that you asked, but here's how to calculate factorial of a number.

:root { --cssx-children: div#container; } #container { --factorial: func(--n: number) if(lte(get-var(--n), 1), 1, calc( get-var(--n) * call(--factorial, map(--n: calc(get-var(--n) - 1))) )); --cssx-text: string("7! = ", call(--factorial, map(--n: 7))); }

• If you want to directly render some raw html, you can use --cssx-disgustingly-set-innerhtml.
• If you want to run js expressions, you can use the js-eval function. Eg: js-eval("new Date().getSeconds()")

No. In fact, this'll probably break if you try to use it with a css preprocessor.