blob: 52dddf4753d0d36e9a7fc41fe80de438c13abd8c (
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
# Recipies
Here's some stuff you can do with this
## Fishy HTML
You can set arbitrary html in your content. Any html set directly will not be managed by css-everything.
NOTE: Try to avoid doing this. Please refer to [./security.md](./security.md) for more information.
```css
#my-element {
--cssx-disgustingly-set-innerhtml: "<script>alert('H@x0r has hacked you')</script>";
}
```
## Spicy forms
```css
#wrapper {
--cssx-children: form#my-form;
}
#my-form {
--cssx-on-submit:
prevent-default()
add-class('loading')
request('/some-api', 'PUT')
remove-class('loading')
;
--cssx-children:
input#email-input[type="email"][placeholder="Email"]
input#password-input[type="password"][placeholder="Password"]
input#submit-btn[type="submit"]
;
}
#submit-btn {
--cssx-text: "Log in";
}
```
## Infinite soup
```css
#my-element {
--cssx-on-mount: update(--random, '0');
--cssx-on-update: delay(500ms) update(--random, js-expr('Math.random()'));
}
#my-element::after {
content: var(--random);
}
```
## Re-usable plates / Components / Instances
```css
#my-element {
--cssx-on-click:
add-children(
my-element,
instance(#my-component, map(--text: "A new item"))
)
;
--cssx-children:
instance(#my-component, map(--text: "First item"))
instance(#my-component, map(--text: "Second item"))
instance(#my-component, map(--text: "Third item"))
;
}
/* Use data-instance for selecting instances and data-element for selecting children of instances */
[data-instance=my-component] {
--text: "Some default text";
--cssx-children: div#child;
}
[data-instance=my-component]::before {
content: var(--text);
}
[data-element=child] {
color: 1px solid BlanchedAlmond;
background-color: DarkGoldenRod;
--cssx-text: "Some text";
}
```
|
