initial commit

csspageweaver/plugins/grid/README.md

@@ -0,0 +1,70 @@
+---
+name: grid
+tags: recommended, stable, boilerplate, gui
+description: A simple GUI tool to display a square grid with subdivisions.
+---
+
+# Grid Plugin
+
+A visual development helper for CSS Page Weaver that displays
+  customizable grid overlays on pages. Useful for layout debugging and
+  ensuring consistent spacing in print designs.
+
+- **Squared grid**: Repeating grid with customizable spacing
+  and subdivisions
+- **Persistent settings**: Grid preferences saved per document in
+  localStorage
+- **Screen-only**: Grid overlays only appear in screen view, not in
+  print output
+
+## Installation
+
+This plugin is part of the CSS Page Weaver plugin ecosystem. It should
+  be included in your `csspageweaver/plugins/` directory.
+
+
+## Usage
+
+### Toggle the grid
+
+Use the toggle switch in the CSS Page Weaver UI panel to show/hide the
+  grid overlay.
+
+### Customize grid parameters
+
+Four adjustable parameters are available in the UI panel:
+
+- **Spacing (px)**: Distance between bold grid lines (default: 56px)
+- **Steps**: Number of subdivisions between bold lines (default: 5)
+- **Position X (px)**: Horizontal offset of the grid (default: 28px)
+- **Position Y (px)**: Vertical offset of the grid (default: 0px)
+
+### Configure default values
+
+You can set default grid parameters in your configuration:
+
+```json
+  {
+    "grid": {
+      "parameters": {
+        "spacing": 56,
+        "steps": 5,
+        "positionX": 28,
+        "positionY": 0
+      }
+    }
+  }
+```
+
+CSS Custom Properties
+
+The grid uses CSS custom properties that can be overridden in `grid.css`:
+
+```
+  :root {
+    --grid-bold: #bfbfbf;      /* Bold grid line color */
+    --grid-light: #efefef;     /* Light grid line color */
+    --grid-color: magenta;     /* Column grid color */
+    --nbr-columns: 8;          /* Number of columns (1-12) */
+  }
+```