some guide pages

docs/.vitepress/config.mts

@@ -50,7 +50,7 @@ export default defineConfig({
     },
     nav: [
       { text: 'Home', link: '/home' },
-      { text: 'Guides', link: '/guides/' },
+      { text: 'Guides', link: '/guides/getting-started' },
       { text: 'References', link: '/references/main' },
     ],
 
@@ -62,11 +62,11 @@ export default defineConfig({
     sidebar: {
       '/guides/': [
         {
-          text: 'Getting Started',
+          text: 'Getting Started',link: 'guides/getting-started',
           items: [
-            { text: 'Home', link: '/guide/' },
-            { text: 'One', link: '/guide/one' },
-            { text: 'Two', link: '/guide/two' }
+            { text: 'Download', link: '/guides/download' },
+            { text: 'Properties', link: '/guides/properties' },
+            { text: 'Dynamic Values', link: '/guides/dynamicvalues' }
           ]
         }
       ],

docs/guides/download.md

@@ -0,0 +1,72 @@
+# Download
+
+Basalt is available in two project versions: the source version, ideal for debugging errors and featuring annotations with a LLS and a proper code editor, and the packaged version, which is more compact.
+
+::: info
+The one-file version is no longer supported and is unlikely to return.
+:::
+
+## Downloading Basalt with UI
+
+To download the Basalt UI using a CC shell command, use the following:
+
+```
+wget run https://basalt.madefor.cc/install.lua
+```
+
+This method provides a convenient way to modify Basalt according to your specific needs by utilizing a UI.
+
+## Download Basalt without UI
+
+If you want to skip the UI and just download the essentials, here are some other commands:
+
+- ### Source Default
+
+This is the default source version of Basalt, containing essential files for a UI framework.
+
+```
+wget run https://basalt.madefor.cc/install.lua source default
+```
+
+- ### Packaged Default
+
+This is the default packaged version of Basalt, containing essential files for a UI framework.
+
+```
+wget run https://basalt.madefor.cc/install.lua packaged default
+```
+
+- ### Source Full
+
+This is the full source version of Basalt, containing all available files.
+
+```
+wget run https://basalt.madefor.cc/install.lua source full
+```
+
+- ### Packaged Full
+
+This is the full packaged version of Basalt, containing all available files.
+
+```
+wget run https://basalt.madefor.cc/install.lua packaged default
+```
+
+## Update Basalt
+
+The update command is used to ensure that your Basalt installation is up to date with the latest version available on GitHub. When you run this command, Basalt will perform the following actions:
+
+- Basalt will first check the settings to determine the location of the Basalt installation (i.e., the file path).
+- Next, Basalt will iterate through each file in the installation directory.
+- For each file, Basalt will compare its version with the corresponding version on GitHub.
+- If a file needs to be updated to match the latest version, Basalt will automatically perform the update.
+
+::: info
+This [config](https://github.com/Pyroxenium/Basalt/blob/basalt2/config.json) file is used to check if a update needs to be done.
+:::
+
+To execute the update command, use the following:
+
+```
+wget run https://basalt.madefor.cc/install.lua update
+```

docs/guides/dynamicvalues.md

@@ -0,0 +1,55 @@
+# Dynamic Values
+
+Dynamic Values allow you to incorporate more complex logic into the properties of UI elements by dynamically updating values based on other variables or conditions. They provide a powerful way to customize the appearance and behavior of UI elements in response to changing conditions or user interactions.
+
+## How Dynamic Values Work
+
+Dynamic Values are defined as strings enclosed in curly braces `{}` within the properties of UI elements. These strings can contain conditional expressions, mathematical operations, or references to other variables or properties.
+
+## Special Variables
+
+In addition to element properties, Dynamic Values support special variables that provide context or reference points for calculations:
+
+- **self:** Refers to the current element, allowing you to access its properties within the Dynamic Value expression.
+- **parent:** Refers to the parent container of the current element, useful for relative positioning or sizing adjustments.
+- **elementID:** Allows you to reference a specific element by its ID within the Dynamic Value expression.
+
+## Examples
+
+Let's explore some examples of how Dynamic Values can be used:
+
+### 1. Conditional Expressions:
+
+```lua
+-- Change background color based on a condition
+main:addButton():setBackground("{self.clicked ? red : green}")
+```
+
+In this example, the background color of the button changes dynamically based on whether it has been clicked. If clicked, the background color becomes red; otherwise, it remains green.
+
+### 2. Positioning Elements:
+
+```lua
+-- Centering a button horizontally
+main:addButton():setX("{parent.w / 2 - self.w / 2}")
+```
+
+This example centers the button horizontally within its parent container by dynamically adjusting its X position based on the width of the parent and the width of the button itself.
+
+### 3. Dynamic Sizing:
+
+```lua
+-- Adjusting the width of a button relative to its parent container
+main:addButton():setWidth("{parent.w - 20}")
+```
+
+In this example, the width of the button is dynamically set to be 20 pixels less than the width of its parent container.
+
+### 4. Dynamic Styling:
+
+```lua
+-- Changing input background color when focused
+main:addInput():setBackground("{self.focused ? cyan : black}")
+```
+
+Here, the background color of the input field changes dynamically based on whether it is currently focused. If focused, the background color becomes cyan; otherwise, it remains black.