Create style manager example

examples/stylemanager-demo/README.md

@@ -0,0 +1,43 @@
+# Advanced Styling App with elem-go and StyleManager
+
+This web application demonstrates the power of advanced CSS styling within a Go server environment, using the `elem-go` library and its `StyleManager` for dynamic styling. It features a button with hover effects, an animated element, and a responsive design element that adjusts styles based on the viewport width.
+
+## Prerequisites
+
+Ensure that Go is installed on your system.
+
+## Installation
+
+Clone or download the repository, then run the following commands to download the necessary packages:
+
+```bash
+go mod tidy
+```
+
+This will install `elem-go` and the `styles` subpackage required to run the application.
+
+## Running the Application
+
+To run the application, execute the following command:
+
+```bash
+go run main.go
+```
+
+The server will start on `localhost` at port `8080`. You can view the application by navigating to `http://localhost:8080` in your web browser.
+
+## Features
+
+**Button Hover Effect**: The button changes color and scale when hovered over, providing visual feedback to the user.
+**Animated Element**: The animated element moves across the screen in a loop, demonstrating the use of animations with `StyleManager`.
+**Responsive Design**: The application adjusts the background color based on the viewport width, showcasing the use of media queries for responsive styling.
+
+## Advanced CSS Styling with `StyleManager`
+
+The `StyleManager` within the `styles` package provides a powerful solution for managing CSS styles in Go-based web applications. It enables the creation of dynamic and responsive styles, including pseudo-classes, animations, and media queries, directly in Go.
+
+To learn more about `StyleManager` and its advanced features, refer to the [StyleManager documentation](../../styles/STYLEMANAGER.md).
+
+## Stopping the Server
+
+To stop the application, press `Ctrl + C` in the terminal where the server is running.

examples/stylemanager-demo/go.mod

@@ -0,0 +1,7 @@
+module stylemanager_demo
+
+go 1.21.1
+
+require github.com/chasefleming/elem-go v0.0.0
+
+replace github.com/chasefleming/elem-go => ../../../elem-go

examples/stylemanager-demo/go.sum

@@ -0,0 +1,8 @@
+github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
+github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
+github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/stretchr/testify v1.8.4 h1:CcVxjf3Q8PM0mHUKJCdn+eZZtm5yQwehR5yeSVQQcUk=
+github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
+gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
+gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

examples/stylemanager-demo/main.go

@@ -0,0 +1,80 @@
+package main
+
+import (
+	"github.com/chasefleming/elem-go"
+	"github.com/chasefleming/elem-go/attrs"
+	"github.com/chasefleming/elem-go/styles"
+	"net/http"
+)
+
+func generateWebContent() string {
+	// Initialize StyleManager
+	styleMgr := styles.NewStyleManager()
+
+	// Button with hover effect
+	buttonClass := styleMgr.AddCompositeStyle(styles.CompositeStyle{
+		Default: styles.Props{
+			styles.Padding:         "10px 20px",
+			styles.BackgroundColor: "blue",
+			styles.Color:           "white",
+			styles.Border:          "none",
+			styles.Cursor:          "pointer",
+			styles.Margin:          "10px",
+		},
+		PseudoClasses: map[string]styles.Props{
+			"hover": {
+				styles.BackgroundColor: "darkblue",
+			},
+		},
+	})
+
+	// Animated element
+	animationName := styleMgr.AddAnimation(styles.Keyframes{
+		"0%":   {styles.Transform: "translateY(0px)"},
+		"50%":  {styles.Transform: "translateY(-20px)"},
+		"100%": {styles.Transform: "translateY(0px)"},
+	})
+	animatedClass := styleMgr.AddStyle(styles.Props{
+		styles.Width:                   "100px",
+		styles.Height:                  "100px",
+		styles.BackgroundColor:         "green",
+		styles.AnimationName:           animationName,
+		styles.AnimationDuration:       "2s",
+		styles.AnimationIterationCount: "infinite",
+	})
+
+	// Responsive design
+	responsiveClass := styleMgr.AddCompositeStyle(styles.CompositeStyle{
+		Default: styles.Props{
+			styles.Padding:         "20px",
+			styles.BackgroundColor: "lightgray",
+			styles.Margin:          "10px",
+		},
+		MediaQueries: map[string]styles.Props{
+			"@media (max-width: 600px)": {
+				styles.Padding:         "10px",
+				styles.BackgroundColor: "lightblue",
+			},
+		},
+	})
+
+	// Composing the page
+	pageContent := elem.Div(nil,
+		elem.Button(attrs.Props{attrs.Class: buttonClass}, elem.Text("Hover Over Me")),
+		elem.Div(attrs.Props{attrs.Class: animatedClass}, elem.Text("I animate!")),
+		elem.Div(attrs.Props{attrs.Class: responsiveClass}, elem.Text("Resize the window")),
+	)
+
+	// Render with StyleManager
+	return pageContent.RenderWithOptions(elem.RenderOptions{StyleManager: styleMgr})
+}
+
+func main() {
+	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
+		htmlContent := generateWebContent() // Assume this returns the HTML string
+		w.Header().Set("Content-Type", "text/html")
+		w.Write([]byte(htmlContent))
+	})
+
+	http.ListenAndServe(":8080", nil)
+}

styles/STYLEMANAGER.md

@@ -14,6 +14,7 @@
     - [Media Queries](#media-queries)
 - [Features](#features)
 - [Integration with `elem-go`](#integration-with-elem-go)
+- [Examples](#examples)
 
 ## Introduction
 
@@ -153,7 +154,10 @@ div := elem.Div(
 - **Automatic Class Name Generation**: Generates unique class names based on style content, abstracting away the need for manually naming classes and reducing the likelihood of naming collisions.
 - **Type-Safe Style References**: By utilizing variables for class names, animation names, and other identifiers instead of plain strings, the system enhances code readability and maintainability. This approach reduces errors, such as typos in class or animation names, and improves the developer experience by offering autocomplete and refactoring support in IDEs. It ensures that references to styles, animations, and media queries are checked at compile time, leading to fewer runtime errors and a more robust codebase.
 
-
 ## Integration with `elem-go`
 
-`StyleManager` integrates smoothly with `elem-go`, enabling you to apply generated class names directly to your HTML elements, enhancing the dynamic capabilities of your web applications.
+`StyleManager` integrates smoothly with `elem-go`, enabling you to apply generated class names directly to your HTML elements, enhancing the dynamic capabilities of your web applications.
+
+## Examples
+
+For more examples and detailed usage of `StyleManager`, refer to the [`StyleManager` demo application](../examples/stylemanager-demo).