[Documentation] Update README with better documentation of Clay_Eleme…

…ntDeclaration

README.md

@@ -990,28 +990,95 @@ typedef struct {
     Clay_CustomElementConfig custom;
     Clay_ScrollElementConfig scroll;
     Clay_BorderElementConfig border;
-    uintptr_t userData;
+    void *userData;
 } Clay_ElementDeclaration;
 ```
 
 **Fields**
 
-**`.color`** - `Clay_Color`
+**`.id`** - `Clay_ElementID`
 
-`.backgroundColor = {120, 120, 120, 255} })`
+`CLAY({ .id = CLAY_ID("FileButton") })`
 
-Conventionally accepts `rgba` float values between 0 and 255, but interpretation is left up to the renderer and does not affect layout.
+Uses [Clay_ElementId](#clay_elementid). Tags the element with an ID that can be later used to query data about the element, and gives it a human readable name in the debug tools.
+IDs are typically generated using the [CLAY_ID](#clay_id), [CLAY_IDI](#clay_idi), [CLAY_ID_LOCAL](#clay_id_local) and [CLAY_IDI_LOCAL](#clay_idi_local) macros.
+
+---
+
+**`.layout`** - `Clay_LayoutConfig`
+
+`CLAY({ .layout = { .padding = { 16, 16, 12, 12 }, .layoutDirection = CLAY_TOP_TO_BOTTOM } })`
+
+Uses [Clay_LayoutConfig](#clay_layoutconfig). Controls various settings related to _layout_, which can be thought of as "the size and position of this element and its children".
+
+---
+
+**`.backgroundColor`** - `Clay_Color`
+
+`CLAY({ .backgroundColor = {120, 120, 120, 255} } })`
+
+Uses [Clay_Color](#clay_color). Conventionally accepts `rgba` float values between 0 and 255, but interpretation is left up to the renderer and does not affect layout.
 
 ---
 
 **`.cornerRadius`** - `float`
 
-`CLAY_RECTANGLE({ .cornerRadius = { .topLeft = 16, .topRight = 16, .bottomLeft = 16, .bottomRight = 16 })`
+`CLAY({ .cornerRadius = { .topLeft = 16, .topRight = 16, .bottomLeft = 16, .bottomRight = 16 } })`
 
 Defines the radius in pixels for the arc of rectangle corners (`0` is square, `rectangle.width / 2` is circular).
 
 Note that the `CLAY_CORNER_RADIUS(radius)` function-like macro is available to provide short hand for setting all four corner radii to the same value. e.g. `CLAY_BORDER({ .cornerRadius = CLAY_CORNER_RADIUS(10) })`
 
+---
+
+**`.image`** - `Clay_ImageElementConfig`
+
+`CLAY({ .image = { .imageData = &myImage, .sourceDimensions = { 640, 480 } } })`
+
+Uses [Clay_ImageElementConfig](#clay_imageelementconfig). Configures the element as an image element. Causes a render command with type `IMAGE` to be emitted.
+
+---
+
+**`.floating`** - `Clay_FloatingElementConfig`
+
+`CLAY({ .floating = { .attachTo = CLAY_ATTACH_TO_PARENT } })`
+
+Uses [Clay_FloatingElementConfig](#clay_floatingelementconfig). Configures the element as an floating element, which allows it to stack "in front" and "on top" of other elements without affecting sibling or parent size or position. 
+
+---
+
+**`.custom`** - `Clay_CustomElementConfig`
+
+`CLAY({ .custom = { .customData = &my3DModel } })`
+
+Uses [Clay_CustomElementConfig](#clay_customelementconfig). Configures the element as a custom element, which allows you to pass custom data through to the renderer. Causes a render command with type `CUSTOM` to be emitted.
+
+---
+
+**`.scroll`** - `Clay_ScrollElementConfig`
+
+`CLAY({ .scroll = { .vertical = true } })`
+
+Uses [Clay_ScrollElementConfig](#clay_scrollelementconfig). Configures the element as a scroll element, which causes child elements to be clipped / masked if they overflow, and together with [Clay_UpdateScrollContainer](#clay_updatescrollcontainers) enables scrolling of child contents.
+
+---
+
+**`.border`** - `Clay_BorderElementConfig`
+
+`CLAY({ .border = { .width = { .left = 5 }, .color = COLOR_BLUE } })`
+
+Uses [Clay_BorderElementConfig](#clay_borderelementconfig). Configures the element as a border element, which instructs the renderer to draw coloured border lines along the perimeter of this element's bounding box. Causes a render command with type `BORDER` to be emitted.
+
+---
+
+**`.userData`** - `void *`
+
+`CLAY({ .userData = &extraData })`
+
+Transparently passes a pointer through to the corresponding [Clay_RenderCommands](#clay_rendercommand)s generated by this element.
+
+---
+
 **Examples**
 
 ```C
@@ -1657,6 +1724,17 @@ switch (renderCommand->commandType) {
 
 Element is subject to [culling](#visibility-culling). Otherwise, a single `Clay_RenderCommand` with `commandType = CLAY_RENDER_COMMAND_TYPE_CUSTOM` will be created.
 
+### Clay_Color
+
+```C
+typedef struct {
+    float r, g, b, a;
+} Clay_Color;
+```
+
+`Clay_Color` is an RGBA color struct used in Clay's declarations and rendering. By convention the channels are represented as 0-255, but this is left up to the renderer.
+Note: when using the debug tools, their internal colors are represented as 0-255.
+
 ### Clay_String
 
 ```C