Julie Blanc abbd549428 initial commit

2026-01-19 22:14:03 +01:00

1.8 KiB

Raw Blame History

name	tags	description
grid	recommended, stable, boilerplate, gui	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:

  {
    "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) */
  }

1.8 KiB Raw Blame History