blob: b0a8610f8192d5c404865ac1b320e144dcf11f2d (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
# cssx
A ui library where you only write CSS. No HTML, no JS, no build system, only CSS (kinda).
> Disclaimer: Don't use this
## Usage
#### Install
You can start by adding the script tag for the renderer inside the body
```html
<html lang="en">
<head>
<link href="./style.css" rel="stylesheet" />
</head>
<body>
<script async defer src="https://unpkg.com/@css-everything/render@0.0.1/dist/renderer/index.js"></script>
</body>
</html>
```
NOTE: The HTML needs to have a body element since that is the root of your application by default.
NOTE_new: Styles need to be loaded before the renderer is triggered.
NOTE_new_final: You can load more cssx by using the `load-cssx()` function
#### A simple style.css
This generates 2 elements (`main` and `button`)
```css
:root {
--cssx-children: main#main-el button#my-button;
}
#main-el {
--text: "Loading...";
}
#main-el::after {
content: var(--text);
}
#my-button {
--cssx-text: 'Update text';
/* On click, waits for 1 second and then updates the --text property #main-el */
--cssx-on-click:
delay(1s)
update(main-el, --text, "Hello world. Set text!");
}
```
[Here's the code in action](https://codepen.io/phenax/pen/gOZOLgR?editors=1100)
Wow. You couldn't come up with a more boring example if you tried.
[Here's a todo example then](https://codepen.io/phenax/pen/QWzWGaV?editors=1100)
[More in the examples directory](https://github.com/phenax/css-everything/tree/main/examples)
## Docs
WIP. Coming soon maybe?
## Frequently Acquisitioned Queries
#### Why?
Why not?
#### What?
What?
### What time is it?
Why don't you ask that to [this example](https://codepen.io/phenax/pen/KKbKNeb?editors=1100)?
#### How does it work?
It starts by reading the `--cssx-children` property on the body. Which is then parsed and evaluated and the necassary child nodes are created.
For each element that is managed by cssx (i.e. not created via js or html or `--cssx-disgustingly-set-innerhtml` or `js-eval`), we then look for event handler properties present on the node. These properties are parsed and evaluated when the relevant event is triggered.
|
