From 6e0f7c0a66117ea458c61bf18c4a721d90523448 Mon Sep 17 00:00:00 2001
From: Akshay Nair <phenax5@gmail.com>
Date: Fri, 25 Aug 2023 08:13:21 +0530
Subject: docs: readme

---
 docs/recipies.md | 97 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 97 insertions(+)
 create mode 100644 docs/recipies.md

(limited to 'docs/recipies.md')

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";
+}
+```
+
-- 
cgit v1.3.1