Premium customizable grid system overlay for web developers

Latest Version

Version

1.1.0

Update

December 23, 2024

Size

82.38KiB

Developer

Grid Master Pro Extension

# Grid Master Pro

Transform your web development workflow with Grid Master Pro - the essential tool for precise grid layout visualization and implementation.

## Overview
Grid Master Pro is a lightweight yet powerful browser extension that provides real-time grid overlay visualization for web developers. Built specifically for Bootstrap 5, it enables pixel-perfect responsive design implementation with zero configuration.

## Key Features

### 🎯 Professional Grid Visualization
- Real-time customizable grid overlay system
- Built on Bootstrap 5's grid architecture
- Instant visual feedback for layout adjustments

### ⚡ Advanced Customization
- Adjustable column count (12 columns by default)
- Customizable column gaps
- Flexible container types (fluid/boxed)
- Configurable overlay colors

### 📱 Responsive Design Tools
- Support for all Bootstrap 5 breakpoints (xs to xxl)
- Real-time breakpoint indicator
- Live screen size display
- Comprehensive responsive testing

### 🛠️ Developer Experience
- One-click grid toggle
- Non-intrusive overlay system
- Local settings storage
- Zero impact on page performance

## Technical Details
- Bootstrap 5 breakpoint support:
- xs (0px) - Fluid
- sm (576px) - 540px
- md (768px) - 720px
- lg (992px) - 960px
- xl (1200px) - 1140px
- xxl (1400px) - 1320px
- Default 24px column gap
- Standard 12-column grid system

## Perfect For
- Front-end Developers
- UI/UX Designers
- Web Development Teams
- Quality Assurance Engineers

## Privacy & Performance
- No data collection
- Local storage only
- Minimal resource usage
- Works on all websites

Elevate your responsive design workflow with Grid Master Pro - the professional's choice for grid system visualization.

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "Grid Master Pro", "version": "1.1.0", "description": "Premium customizable grid system overlay for web developers", "author": { "name": "Mohamed Najiub", "email": "[email protected]" }, "icons": { "16": "images/icons/icon16.png", "32": "images/icons/icon32.png", "48": "images/icons/icon48.png", "128": "images/icons/icon128.png" }, "action": { "default_icon": { "16": "images/icons/icon16.png", "32": "images/icons/icon32.png", "48": "images/icons/icon48.png", "128": "images/icons/icon128.png" }, "default_popup": "popup.html" }, "permissions": [ "activeTab", "storage", "notifications" ], "host_permissions": [ "" ], "background": { "service_worker": "background.js" }, "content_scripts": [ { "matches": [ "" ], "css": [ "styles.css" ], "js": [ "content.js" ] } ], "web_accessible_resources": [ { "resources": [ "onboarding.html", "onboarding.css", "onboarding.js", "images/pin_instructions.png", "images/icons/icon16.png", "images/icons/icon32.png", "images/icons/icon48.png", "images/icons/icon128.png" ], "matches": [ "" ] } ]}

Download CRX(82.38KiB)