@css-everything/render
v0.1.1
Published
#### Add script tag to the renderer to your html ```html <script async defer src="https://unpkg.com/@css-everything/render/dist/renderer/index.js"></script> ```
Downloads
19
Readme
A ui framework where you only write turing complete CSS. No HTML, no JS, no build system.
Disclaimer: Don't use this
Usage
Add script tag to the renderer to your html
<script async defer src="https://unpkg.com/@css-everything/render/dist/renderer/index.js"></script>
Open up a style tag or link a stylesheet
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: "--";
}
More examples
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
Docs
- Read the documentation to become enlightened.
- Here's how this works.
Frequently Acquisitioned Queries
Why?
Why not?
What?
What?
What time is it?
You can find the answer with this example.
How does it work?
Is this turing complete?
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)));
}
Escape hatches?
- 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()")
Does it need a build step?
No. In fact, this'll probably break if you try to use it with a css preprocessor.