Add/move StyleManager documentation

README.md

@@ -8,7 +8,8 @@
 - Type-safe definition and manipulation of elements, attributes, and properties.
 - Supports common HTML elements and attributes.
 - Utilities for simplified element generation and manipulation.
-- Advanced CSS styling capabilities with the [styles](styles/README.md) and [stylemanager](stylemanager/README.md) subpackages.
+- Advanced CSS styling capabilities with the [styles](styles/README.md) subpackage.
+- Use the [`StyleManager`](styles/STYLEMANAGER.md) for advanced CSS features like pseudo-classes, animations, and media queries.
 
 ## Installation
 

styles/README.md

@@ -10,6 +10,10 @@ The `styles` subpackage within `elem-go` offers enhanced functionality for CSS s
 - [Features](#features)
     - [`Merge` Function](#merge-function)
     - [`Style` and `CSS` Functions](#style-and-css-functions)
+- [Advanced Styling with `StyleManager`](#advanced-styling-with-stylemanager)
+  - [Key Features of `StyleManager`](#key-features-of-stylemanager)
+  - [Example: Implementing a Hover Effect](#example-implementing-a-hover-effect)
+  - [Detailed Usage](stylemanager/README.md)
 
 ## Introduction
 
@@ -112,4 +116,54 @@ styleTag := elem.Style(nil, styles.CSS(cssContent))
 
 // Incorporating the <style> tag in an HTML document
 document := elem.Html(nil, elem.Head(nil, styleTag), /* ... */)
-```
+```
+
+## Advanced Styling with `StyleManager`
+
+`StyleManager`, a component of the `styles` package, extends the capability of Go-based web application development by introducing a structured and type-safe approach to managing CSS styles. This integration supports dynamic styling features like pseudo-classes, animations, and responsive design through a Go-centric API, providing a novel way to apply CSS with the added benefits of Go's type system.
+
+### Key Features of `StyleManager`
+
+- **Pseudo-Classes & Animations**: Enables the application of CSS pseudo-classes and keyframe animations to elements for interactive and dynamic styling, leveraging Go's type safety for style definitions.
+- **Media Queries**: Supports defining responsive styles that adapt to various screen sizes and orientations, crafted within Go's type-safe environment to enhance web application usability across devices.
+- **Automatic Class Name Generation & Style Deduplication**: Improves stylesheet efficiency by automatically generating unique class names for styles and deduplicating CSS rules, all within a type-safe framework.
+
+### Example: Implementing a Hover Effect
+
+The following example showcases how to leverage `StyleManager` to add a hover effect to a button, illustrating the application of dynamic styles within a type-safe context:
+
+```go
+// Initialize StyleManager
+styleMgr := styles.NewStyleManager()
+
+// Define styles with a hover effect, utilizing Go's type safety
+buttonClass := styleMgr.AddCompositeStyle(styles.CompositeStyle{
+    Default: styles.Props{
+        styles.BackgroundColor: "green",
+        styles.Color:           "white",
+        styles.Padding:         "10px 20px",
+        styles.Border:          "none",
+        styles.Cursor:          "pointer",
+    },
+    PseudoClasses: map[string]styles.Props{
+        styles.PseudoHover: {
+            styles.BackgroundColor: "darkgreen",
+        },
+    },
+})
+
+// Create a button and apply the generated class name
+button := elem.Button(
+    attrs.Props{attrs.Class: buttonClass},
+    elem.Text("Hover Over Me"),
+)
+
+// Use RenderWithOptions to apply the style definitions effectively
+htmlOutput := button.RenderWithOptions(elem.RenderOptions{StyleManager: styleMgr})
+```
+
+This example demonstrates the use of `StyleManager` for defining and applying a set of styles that include a dynamic hover effect, all within a type-safe framework. Utilizing `RenderWithOptions` is crucial for integrating the styles managed by `StyleManager` into the HTML output.
+
+### Detailed Usage
+
+For a comprehensive guide on using `StyleManager` and its advanced features, refer to the [`StyleManager` documentation](STYLEMANAGER.md).

stylemanager/README.md → styles/STYLEMANAGER.md

@@ -1,6 +1,6 @@
-# `stylemanager` Subpackage in `elem-go`
+# Advanced CSS Features with `StyleManager` in `elem-go`
 
-The `stylemanager` subpackage is a powerful addition to elem-go, providing developers with the tools to programmatically manage CSS styles with advanced features like pseudo-classes, animations, and media queries. This enables the creation of dynamic and responsive web applications directly in Go.
+`StyleManager` within the `styles` package, is a powerful addition to elem-go, providing developers with the tools to programmatically manage CSS styles with advanced features like pseudo-classes, animations, and media queries. This enables the creation of dynamic and responsive web applications directly in Go.
 
 ## Table of Contents
 
@@ -21,27 +21,26 @@ The `StyleManager` provides a robust solution for managing CSS in Go-based web a
 
 ## Installation
 
-To use the `stylemanager` subpackage, import it alongside the main `elem` package:
+To leverage `StyleManager`, ensure you're importing the `styles` package along with the core `elem` package:
 
 ```go
 import (
     "github.com/chasefleming/elem-go"
     "github.com/chasefleming/elem-go/styles"
-    "github.com/chasefleming/elem-go/stylemanager"
 )
 ```
 
 ## Usage
 
-### Creating a StyleManager
+### Creating a `StyleManager`
 
-Initialize `stylemanager` to start managing your styles:
+Initialize a `StyleManager` using `NewStyleManager()` to start managing your styles:
 
 ```go
 styleMgr := stylemanager.NewStyleManager()
 ```
 
-Now, when you render your HTML elements, all you have to do is use `RenderWithOptions` instead of `Render` and provide the `stylemanager` instance:
+Now, when you render your HTML elements, all you have to do is use `RenderWithOptions` instead of `Render` and provide the `StyleManager` instance:
 
 ```go
 html := elem.Div(
@@ -61,7 +60,7 @@ html.RenderWithOptions(elem.RenderOptions{
 Define styles using `StyleManager` and receive a unique class name for application:
 
 ```go
-className := styleMgr.AddStyle(stylemanager.Style{
+className := styleMgr.AddStyle(styles.Props{
     styles.BackgroundColor: "blue",
     styles.Color:           "white",
 })
@@ -83,9 +82,9 @@ button := elem.Button(
 Define styles with pseudo-classes for interactive styling:
 
 ```go
-compositeClassName := styleMgr.AddCompositeStyle(stylemanager.CompositeStyle{
-    Default: stylemanager.Style{styles.Color: "pink"},
-    PseudoClasses: map[string]stylemanager.Style{
+compositeClassName := styleMgr.AddCompositeStyle(styles.CompositeStyle{
+    Default: styles.Props{styles.Color: "pink"},
+    PseudoClasses: map[string]styles.Props{
         styles.PseudoHover: {styles.Color: "blue"},
     },
 })
@@ -107,7 +106,7 @@ link := elem.A(
 Create animations and apply them to styles with the returned animation name:
 
 ```go
-animationName := styleMgr.AddAnimation(stylemanager.Keyframes{
+animationName := styleMgr.AddAnimation(styles.Keyframes{
     attrs.From: {styles.Color: "red"},
     attrs.To:   {styles.Color: "blue"},
 })
@@ -116,7 +115,7 @@ animationName := styleMgr.AddAnimation(stylemanager.Keyframes{
 Then, apply the animation to your styles using the generated animation name:
 
 ```go
-styleWithAnimationClassName := styleMgr.AddStyle(stylemanager.Style{
+styleWithAnimationClassName := styleMgr.AddStyle(styles.Props{
     styles.AnimationName: animationName,
 	styles.AnimationDuration: "2s",
 })
@@ -127,9 +126,9 @@ styleWithAnimationClassName := styleMgr.AddStyle(stylemanager.Style{
 Apply styles conditionally based on media queries:
 
 ```go
-classNameWithMediaQuery := styleMgr.AddCompositeStyle(stylemanager.CompositeStyle{
-    Default: stylemanager.Style{styles.Padding: "10px"},
-    MediaQueries: map[string]stylemanager.Style{
+classNameWithMediaQuery := styleMgr.AddCompositeStyle(styles.CompositeStyle{
+    Default: styles.Props{styles.Padding: "10px"},
+    MediaQueries: map[string]styles.Props{
         "@media (min-width: 768px) and (max-width: 1024px)": {"padding": "20px"},
     },
 })