updated

docs/references/a_rsx.md

@@ -100,4 +100,18 @@ fn app() -> Element {
     }
 }
 ```
-> :::info you can add multiple decedents by separating them via `,` like: @var1, var2, var3
+> :::info you can add multiple decedents by separating them via `,` like: @var1, var2, var3
+
+## Static text
+If your text doesn't use variables that will change you can put `static` right before the text to signal that it's static.
+```rust
+fn app() -> Element {
+    let count = 69; // count won't change since it's not mutable
+
+    rsx! {
+        text {
+            static "Current count: {count}"
+        }
+    }
+}
+```

docs/references/b_handler.md

@@ -22,7 +22,7 @@ rsx! {
 }
 ```
 ### With dependents
-If you have a `State<T>` and want to use it, you have to put a @ before the code block like this
+If you have a `State<T>` and want to use it in a `fn()`, you have to put a @ before the code block like this
 ```rust
 fn app() -> Element {
     let count = State::new();

docs/references/css.md

@@ -2,15 +2,13 @@
 title: CSS
 ---
 
-Along with the `Css` type, This macro provides styling for multiple elements by their class name or struct name.
+Along with the `Css` type, This macro provides styling for multiple elements by their class name.
 
 ## Example
 In this case we will make a button with the classname `my_btn`. And set `styling`
 ```rust
 fn app() -> Element {
     rsx! {
-        styling: Some(styles()) // Set the css styling for the div.
-
         button { class: "my_btn", "Click me!" }
     }
 }
@@ -25,7 +23,6 @@ fn styles() -> Css {
         }
 
         // Style by state
-
         "my_btn": "clicked" { // When the element state is clicked
             color: Blue,
         }
@@ -33,19 +30,10 @@ fn styles() -> Css {
 }
 ```
 
-## Style by struct name
+## `hover`
+The `hover` state is on every element but only if it's focused/hovered.
 ```rust
-fn styles() -> Css {
-    css! {
-        Button { // style by the struct name
-            color: Red,
-        }
-
-        // Style by state
-
-        Button: clicked { // When the element state is clicked
-            color: Blue,
-        }
-    }
+"my_btn": "clicked" {
+    color: Green,
 }
 ```

docs/references/d_style.md

@@ -9,7 +9,7 @@ rsx! {
     button {
         style: style! {
             color: Red,
-            clicked { // when the button state is 'clicked'
+            "clicked" { // when the button state is 'clicked'
                 color: Blue,
             } 
         },

docs/references/g_writer.md

@@ -0,0 +1,11 @@
+---
+title: Writer
+---
+
+The `Writer` is what makes OSUI efficient and it's magic. `Writer` is used on the `Element::render` function. It get's access to the `Style` and gets a absolute position and ansi coloring, Then it prints and adjusts to what is being written.
+
+## Functions
+### `write(&mut self, s: &str)`
+This function simply writes s to the screen depending on the absolute positioning.
+### `new_frame(&mut self) -> Frame`
+This function creates a frame depending on the values. Use this you need to render elements.