How bilalbutt/media-query-generator works
Media Query Generator is a browser-based utility: users choose breakpoints and media-query options, enter CSS, and generate responsive CSS text. The active PHP page renders the form; client-side JavaScript reads its controls, builds query strings, optionally formats them, and supports clearing and toggling the maximum-width control. The older index-bk.php is a separate legacy implementation. No persistence or server-side generation is evidenced.
Main entry points: index.php Generator Form · custom.js Form Interactions · index-bk.php Legacy Generator · style.css Page Styling
Components 7
User Interface
- Generator Form
index.php - Page Styling
css/style.css
Query Generation
- Form Interactions
js/custom.js - Query Builder
js/custom.js - CSS Formatter
js/custom.js
Legacy Version
- Legacy Generator
index-bk.php
Other components
- Developer
Connections 7
- Developer → Generator Form: configures
index.php - Generator Form → Page Styling: loads styles
index.php - Generator Form → Form Interactions: loads script
index.php - Form Interactions → Generator Form: reads controls
js/custom.js - Form Interactions → Query Builder: builds queries
js/custom.js - Query Builder → CSS Formatter: optionally formats
js/custom.js - Legacy Generator → Developer: alternate interface
index-bk.php