docs: readme

1 files changed, 97 insertions, 0 deletions

diff --git a/docs/recipies.md b/docs/recipies.md
new file mode 100644
index 0000000..52dddf4
--- /dev/null
+++ b/docs/recipies.md
@@ -0,0 +1,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";
+}
+```
+