docs: readme

3 files changed, 216 insertions, 0 deletions

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.
+