style readme

README.md

@@ -1,53 +1,59 @@
-# Crafter.CppDOM
+# About
 
-A C++ DOM library for web applications that allows you to manipulate HTML elements directly from C++.
+![alt text](https://github.com/Catcrafts/Crafter.Web/blob/master/hello.png?raw=true)
 
-## New Styling Features
+Crafter.CppDOM is a C++ library that exposes the browser DOM api's to C++ WebAssembly.
 
-This library now supports comprehensive styling capabilities beyond just inline HTML:
+# How to use
-
+Please view the examples folder, this is a snippit from the HelloElement example:
-### Style Methods
-
-- `SetStyle(const std::string_view style)` - Sets multiple CSS properties at once
-- `SetProperty(const std::string_view property, const std::string_view value)` - Sets a single CSS property
-- `AddClass(const std::string_view className)` - Adds a CSS class to the element
-- `RemoveClass(const std::string_view className)` - Removes a CSS class from the element
-- `ToggleClass(const std::string_view className)` - Toggles a CSS class on the element
-- `HasClass(const std::string_view className)` - Checks if the element has a specific CSS class
-
-### Example Usage
 
 ```cpp
-HtmlElement div("myDiv");
+import Crafter.CppDOM;
+using namespace Crafter::CppDOM;
 
-// Set multiple styles at once
+int main(){
-div.SetStyle("color: blue; font-size: 20px; background-color: lightgray;");
+    HtmlElement body("body");
+    body.SetInnerHTML("Hello World!");
+}
+```
+You can also view the wiki for more detailed information.
 
-// Set individual properties
+It is highly recommended to use this with [Crafter.Build](https://forgejo.catcrafts.net/Catcrafts/Crafter.Build), but it is not strictly required if the same way of injecting the env is followed. The following instructions will be for Crafter.Build.
-div.SetProperty("border", "2px solid red");
-div.SetProperty("padding", "10px");
 
-// Work with CSS classes
+## Quickstart
-div.AddClass("highlight");
+create a ``project.json`` in an empty folder, open it in your preferred text editor.
-div.AddClass("container");
+Create a basic project file, that describes your web project.
-div.ToggleClass("active");
+```JSON
-bool isActive = div.HasClass("active");
+{
-div.RemoveClass("highlight");
+    "name": "main",
+    "configurations": [
+        {
+            "name": "executable",
+            "implementations": ["main"],
+            "target": "wasm32-wasi",
+            "debug" : true,
+            "dependencies": [
+                {
+                    "path":"https://forgejo.catcrafts.net/Catcrafts/Crafter.CppDOM.git",
+                    "configuration":"lib-debug"
+                }
+            ],
+        }
+    ]
+}
 ```
 
-### Benefits
+Save and close the file, create a ``main.cpp``
+```cpp
+import Crafter.CppDOM;
+using namespace Crafter::CppDOM;
 
-1. **Type Safety**: Compile-time checking of method names and parameters
+int main(){
-2. **Performance**: More efficient than constructing HTML strings
+    HtmlElement body("body");
-3. **Maintainability**: Clear separation between content and styling logic
+    body.SetInnerHTML("Hello World!");
-4. **Flexibility**: Support for both inline styles and CSS classes
+}
-5. **Developer Experience**: Intuitive API similar to JavaScript DOM
+```
 
-## Examples
+Save and close, then run ``crafter-build build executable && caddy file-server --listen :8080 --root bin/executable``. if you have caddy installed, if not use your favorite static file server instead. Now you can open the browser at ``http://localhost:8080`` and ``Hello World!`` will appear in the browser.
 
-Check the examples directory for usage demonstrations:
+This sample can also be viewed in the [HelloElement example](https://forgejo.catcrafts.net/Catcrafts/Crafter.CppDOM/src/branch/master/examples)
-- `HelloWorld` - Basic usage
-- `HelloElement` - Creating and manipulating elements
-- `InteractiveElement` - Interactive elements with event handling
-- `AllEventHandling` - Complete event handling example
-- `StyleExample` - Demonstrates new styling features

examples/StyleExample/README.md

@@ -0,0 +1,57 @@
+# StyleExample
+
+This example demonstrates how to apply styling to HTML elements using Crafter.CppDOM.
+
+## Features
+
+- Shows how to apply inline styles using CSS strings
+- Demonstrates setting individual CSS properties
+- Illustrates working with CSS classes (adding, removing, toggling)
+- Shows how to check for class existence
+
+## Usage
+
+```cpp
+import Crafter.CppDOM;
+using namespace Crafter::CppDOM;
+
+int main(){
+    HtmlElement body("body","<div id=\"myDiv\"></div>");
+    // Create a div element
+    HtmlElement div("myDiv");
+    
+    // Set some initial content
+    div.SetInnerHTML("<p>This is a styled paragraph</p>");
+    
+    // Apply styles using different methods
+    div.SetStyle("color: blue; font-size: 20px; background-color: lightgray;");
+    
+    // Or apply individual properties
+    div.SetProperty("border", "2px solid red");
+    div.SetProperty("padding", "10px");
+    
+    // Add CSS classes
+    div.AddClass("highlight");
+    div.AddClass("container");
+    
+    // Demonstrate class toggling
+    div.ToggleClass("active");
+    
+    // Check if class exists
+    bool hasActiveClass = div.HasClass("active");
+    
+    // Remove a class
+    div.RemoveClass("highlight");
+}
+```
+
+## Building and Running
+
+```bash
+crafter-build build executable
+run.sh
+```
+
+Then navigate to `http://localhost:8080/` in your browser.
+
+If caddy is not installed, you can use your favorite static file server instead.