9 files changed, 331 insertions, 9 deletions
diff --git a/TODO.norg b/TODO.norg
index cc4bcb0..ba5412d 100644
--- a/TODO.norg
+++ b/TODO.norg
@@ -1,16 +1,17 @@
 * Now
-  - (x) Refactor eval to return EvalValue
-  - ( ) Functions. `--my-func: func(if(get-var(--x), get-var(--y), ""))`.
-  - ( ) Function calls. `call(get-var(--my-func), --x: 6, --y: 2)`
-  - ( ) Evaluate `calc`
-  - ( ) string concatenation
+  - (x) Documentation
+  - ( ) string concatenation/interpolation
   - ( ) analog + digital clock example
-
-* Later
+  - ( ) `--cssx-use-properties: --parent-prop;` to trigger nested property update
   - ( ) Update `--cssx-text` on update
-  - ( ) `request` error handling
+  - ( ) FFI interface to declare functions
+  - ( ) some way to de-quotify values?
   - ( ) `has-class`
   - ( ) `add-class` & `remove-class` should use self if id is not specified?
+
+* Later
+  - ( ) Evaluate `calc`
+  - ( ) `request` error handling
   - ( ) keyboard events
   - ( ) Code cleanup
   - ( ) Additional events
@@ -19,7 +20,6 @@
   - ( ) filter for on update on specific properties
 
 * Maybe
-  - ( ) `list` & `tuple` data structures?
   - ( ) *server-side css*? Why the fuck not!?
 
 * Done
@@ -46,4 +46,7 @@
   - (x) access child from an instance (update checkbox)
   - (x) access instance from child (delete task)
   - (x) focus blur events
+  - (x) Refactor eval to return EvalValue
+  - (x) Functions. `--my-func: func(if(get-var(--x), get-var(--y), ""))`.
+  - (x) Function calls. `call(get-var(--my-func), --x: 6, --y: 2)`
 
diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/docs/README.md
diff --git a/docs/api/functions.md b/docs/api/functions.md
new file mode 100644
index 0000000..39f85cb
--- /dev/null
+++ b/docs/api/functions.md
@@ -0,0 +1,91 @@
+# Functions
+
+```typescript
+type custom-property-name = `--${string}`
+type selector = string // Any css selector or identifier (used as id)
+type condition = string // empty string, 0, 'false', "'false'" and "\"false\"" are all false, the rest are fine. Don't ask.
+type duration = number | `${number}ms` | `${number}s`
+```
+
+## get-var
+Get css custom property from an element
+
+NOTE: Avoid using `var` inside cssx expressions.
+
+```typescript
+function get-var(custom-property-name): string
+function get-var(selector, custom-property-name): string
+```
+
+## update
+Update a css custom property on an element
+
+```typescript
+function update(custom-property-name, string): void
+function update(selector, custom-property-name, string): string
+```
+
+
+## js-eval
+Evaluate any js expression. Easy escape hatch into writing the worst code humanly possible.
+
+```typescript
+function js-eval(string): string
+```
+
+
+## if
+If expression. You know how this one goes. If truthy, it'll pick the second argument, else the third.
+
+```typescript
+function if(condition, any, any): any
+```
+
+
+## delay
+Wait a bit.
+
+```typescript
+function delay(duration): void
+```
+
+Examples for input -
+- `delay(100)`: wait for 100 milliseconds
+- `delay(100ms)`: wait for 100 milliseconds
+- `delay(5s)`: wait for 5 seconds
+- `delay(0.5s)`: wait for 500 milliseconds
+
+
+## load-cssx
+
+
+## set-attr
+
+
+## attr
+
+
+## prevent-default
+
+
+## request
+
+
+## add-children
+
+
+## remove-element
+
+
+## call-method
+
+
+## map
+
+
+## call
+
+
+## func
+
+
diff --git a/docs/api/hooks.md b/docs/api/hooks.md
new file mode 100644
index 0000000..663df66
--- /dev/null
+++ b/docs/api/hooks.md
@@ -0,0 +1,68 @@
+# Element hooks
+
+```css
+#my-element {
+  --cssx-on-mount: /* code */;
+  --cssx-on-update: /* code */;
+  --cssx-on-click: /* code */;
+}
+```
+
+
+## Mount
+
+Mount is mount. Remember when react used to call it that? Yeah, fun times.
+It'll allow you to run code as soon as the element in the dom.
+
+```css
+#my-element {
+  --cssx-on-mount: add-class('animate');
+}
+```
+
+
+## Update
+
+The way you manage state in css-everything is as css custom properties.
+Sometimes you may need to react to those changes. That's where the update hook comes in.
+The update hook gets called every time a css property on the element is updated via the `update` function.
+
+NOTE: Update hook is only called for the element that gets updated, not it's children.
+
+```css
+#my-element {
+  background-color: Salmon;
+  color: PowderBlue;
+
+  --my-state: false;
+  --cssx-on-update: if(get-var(--my-state), add-class('some-state'), remove-class('some-state'));
+
+  --cssx-children: button#my-btn;
+}
+
+#my-element.some-state {
+  background-color: PapayaWhip;
+  color: SeaShell;
+}
+
+/* #my-btn has access to --is-visible because it is #my-element's child */
+#my-btn {
+  --cssx-on-click: update(my-element, --is-visible, if(get-var(--my-state), true, false));
+}
+```
+
+
+## Events
+
+Other than the above 2 events, the rest are just standard browser events.
+
+Only the following are supported as of right now as my fingers are typing this out -
+
+- `--cssx-on-click`
+- `--cssx-on-focus`
+- `--cssx-on-blur`
+- `--cssx-on-submit`
+
+Adding support for most other events is pretty trivial. I'm just kinda lazy.
+
+
diff --git a/docs/api/properties.md b/docs/api/properties.md
new file mode 100644
index 0000000..7eb36bf
--- /dev/null
+++ b/docs/api/properties.md
@@ -0,0 +1,57 @@
+# Properties
+
+## Children
+
+Property: `--cssx-children`
+
+The way you build out the dom of your application is using the `--cssx-children` property.
+
+```css
+#my-element {
+  --cssx-children:
+    div#my-element.some-class
+    input#input-el[type=email][placeholder="Some placeholder"]
+    instance(div#my-component, map(--css-prop: "some value"))
+  ;
+}
+```
+
+* `div#my-element.some-class`: div with id = `my-element` and class = `some-class`
+* `input#input-el[type=email][placeholder="Some placeholder"]`: input element with input-el id and, `type` and `placeholder` attributes set.
+* `instance(div#my-component, map(--css-prop: "some value", --other: "Yo"))`: Creates an instance of `my-component` with the `--css-prop` and `--other` css custom properties set.
+
+
+## Text
+
+Property: `--cssx-text`
+
+To set the text content of an element, you can use the `--cssx-text` property.
+
+NOTE: As of writing this, `--cssx-text` is only set on mount and is not updated. Will fix that whenever, probably.
+
+```css
+#my-element {
+  --cssx-text: "Hey. What's up? Dom element here.";
+}
+```
+
+
+## Raw HTML
+
+Property: `--cssx-disgustingly-set-innerhtml`
+
+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>";
+}
+```
+
+
+## Others
+
+Every other css property on your elements is a piece of state that every one of your children and grand-children can inherit it. Although, the `--cssx-on-update` hook will only be called for the element that was updated.
+
diff --git a/docs/best-practices.md b/docs/best-practices.md
new file mode 100644
index 0000000..79d3096
--- /dev/null
+++ b/docs/best-practices.md
@@ -0,0 +1 @@
+# LOL
diff --git a/docs/how_it_works.md b/docs/how_it_works.md
new file mode 100644
index 0000000..6329723
--- /dev/null
+++ b/docs/how_it_works.md
@@ -0,0 +1,4 @@
+# How does it work?
+
+WIP
+
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";
+}
+```
+
diff --git a/docs/security.md b/docs/security.md
new file mode 100644
index 0000000..79d3096
--- /dev/null
+++ b/docs/security.md
@@ -0,0 +1 @@
+# LOL