phenax / css-everything Goto Github PK

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.