Minimal documentation

1 files changed, 120 insertions, 0 deletions

diff --git a/docs/Packages/Menus.md b/docs/Packages/Menus.md
new file mode 100644
index 0000000..f4e0e4c
--- /dev/null
+++ b/docs/Packages/Menus.md
@@ -0,0 +1,120 @@
+# Menus
+
+The menus are stored in Menus directory in the package. The game will scan all the menus automatically. The structure for the menu is as follows:
+``` JSON
+{
+    "Contents": <element>
+}
+```
+
+
+# General concepts
+
+## Weight
+In the grid elements the elements fill all the free space evenly by default. To add or reduce the part of the screen occupied by an element you can use the "Weight" param of the element. All the element have this property.
+The weight is not normalized and can be added or reduced without it adding one to 1.
+
+## Background element
+Some components allow you to use another element as a background. If not specified, the default style background is used.
+
+## Style
+If the style is specified in the schema you can add a style. The schema for it is as follows:
+``` JSON
+{
+	"BackgroundColor": string,
+	"FontColor": string,
+	"Padding": number,
+	"Roundness" number
+}
+```
+The color string is presented in HEX CSS-style color. Padding is calulated in fractions of a screen where 1 is the entire screen. Roundness is a raylib parameter used in a DrawRectangleRounded. Read more on that in their documentation.
+You can partially override default style with the rest of the properies filling the unspecified fields
+
+# Elements
+As you can see, the root of the menu contains nothing but a single element by default. You can fill it with the following elements:
+### NOTE: Some elements reference the \<element\> tag. It means that the element is nested and can reference any of the tags specified.
+
+## Grid row
+The grid row is a list of horizontal elements stacked together and works like CSS's `display: flex`. The schema for this is as follows:
+``` JSON
+{
+    "Type": "gridrow",
+    "Weight": number,
+    "Style": <style> | null,
+    "BackgroundElement": <element> | null,
+    "Spacing": number,
+    "Children": <element>[]
+}
+```
+Default style:
+``` JSON
+{
+	"BackgroundColor": "#00000000",
+	"FontColor": "#828282",
+	"Padding": 0,
+	"Roundness": 0 
+}
+```
+
+## Grid column
+The grid column is a list of verical elements stacked together and works like CSS's `display: flex; flex-direction: column`. The schema for this is as follows:
+``` JSON
+{
+    "Type": "gridcolumn",
+    "Weight": number,
+    "Style": <style> | null,
+    "BackgroundElement": <element> | null,
+    "Spacing": number,
+    "Children": <element>[]
+}
+```
+Default style:
+``` JSON
+{
+	"BackgroundColor": "#00000000",
+	"FontColor": "#828282",
+	"Padding": 0,
+	"Roundness": 0 
+}
+```
+
+## Void
+The empty element. Use to create blanks. The schema is as follows:
+``` JSON
+{
+    "Type": "void",
+    "Weight": number
+}
+```
+
+## Label
+An element containing a text. The schema is as follows:
+``` JSON
+{
+    "Type": "label",
+    "Text": string,
+    "Weight": number,
+    "Style": <style> | null,
+    "BackgroundElement": <element> | null
+}
+```
+Default style:
+``` JSON
+{
+	"BackgroundColor": "#c8c8c8",
+	"FontColor": "#828282",
+	"Padding": 0.1,
+	"Roundness": 0.2 
+}
+```
+
+## Image
+An image containing a texture. To specify the texture you have to load it in the package and query accordingly. The schema is as follows:
+``` JSON
+{
+    "Type": "image",
+    "Weight": number,
+    "Style": <style> | null,
+    "TextureName": string
+}
+```