70 lines
No EOL
1.8 KiB
Markdown
70 lines
No EOL
1.8 KiB
Markdown
---
|
|
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) */
|
|
}
|
|
``` |