https://github.com/user-attachments/assets/d0e41510-399f-4937-a94d-151481f66c3c

svelte-grid-guide

A customizable grid overlay system for SvelteKit applications to help with layout design and alignment.

Features

• Toggle grid visibility with a floating control panel
• Customize columns, gap, colors, opacity, and position
• Easy implementation in any Svelte project
• Mobile grid preset support

Installation

bun add @iamjuney/svelte-grid-guide

Requirements

This package requires Tailwind CSS v4. If you're experiencing style issues, make sure Tailwind CSS is properly set up in your project.

# Install Tailwind CSS v4 if not already installed
bunx sv add tailwindcss

## Peer Dependencies

This package requires the following peer dependencies:

- `bits-ui` (^1.3.18)
- `phosphor-svelte` (^3.0.1)

Make sure to install these dependencies in your project:

```bash
bun add bits-ui phosphor-svelte

Basic Usage

<!-- src/routes/+layout.svelte -->
<script>
    import { GridOverlay } from '@iamjuney/svelte-grid-guide';
</script>

<GridOverlay />

<!-- Your app content here -->

Customization

<script>
    import { GridOverlay } from '@iamjuney/svelte-grid-guide';

    const gridOptions = {
        columns: 12,
        maxWidth: 1200,
        gap: 24
        // More options available
    };
</script>

<GridOverlay options={gridOptions} position="bottom-left" />

Positioning

Position the controls with: top-left, top-right, bottom-left, bottom-right (default), top-center, or bottom-center.

Available Options

Programmatic Control

<script>
    import { GridOverlay, gridOverlay } from '@iamjuney/svelte-grid-guide';

    // Available methods:
    // gridOverlay.show()
    // gridOverlay.hide()
    // gridOverlay.toggle()
    // gridOverlay.setOptions({...})
    // gridOverlay.resetOptions()
    // gridOverlay.setMobileOptions()
</script>

<GridOverlay />
<button onclick={() => gridOverlay.toggle()}>Toggle Grid</button>

Troubleshooting

Missing styles

If you're experiencing styling issues:

1. Make sure you've imported the package's CSS file as shown in the "Importing Styles" section
2. Verify that you have the required peer dependencies installed (tailwindcss, bits-ui, phosphor-svelte)
3. For SvelteKit projects, ensure the CSS is imported in a file that loads before your components

License

MIT