# bilalbutt/media-query-generator architecture

> Architecture diagram of the GitHub repository bilalbutt/media-query-generator, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/bilalbutt/media-query-generator
- Repository: https://github.com/bilalbutt/media-query-generator

## Overview

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`](https://github.com/bilalbutt/media-query-generator/blob/main/index.php) (Generator Form), [`js/custom.js`](https://github.com/bilalbutt/media-query-generator/blob/main/js/custom.js) (Form Interactions), [`index-bk.php`](https://github.com/bilalbutt/media-query-generator/blob/main/index-bk.php) (Legacy Generator), [`css/style.css`](https://github.com/bilalbutt/media-query-generator/blob/main/css/style.css) (Page Styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["User Interface"]
  node_form["Generator Form<br/>[index.php]"]
  node_styling["Page Styling<br/>[style.css]"]
end

subgraph group_generation["Query Generation"]
  node_controls["Form Interactions<br/>[custom.js]"]
  node_query["Query Builder<br/>[custom.js]"]
  node_formatter["CSS Formatter<br/>[custom.js]"]
end

subgraph group_legacy["Legacy Version"]
  node_legacy["Legacy Generator<br/>[index-bk.php]"]
end

node_developer(("Developer"))

node_developer -->|"configures"| node_form
node_form -->|"loads styles"| node_styling
node_form -->|"loads script"| node_controls
node_controls -->|"reads controls"| node_form
node_controls -->|"builds queries"| node_query
node_query -->|"optionally formats"| node_formatter
node_legacy -.->|"alternate interface"| node_developer

click node_form "https://github.com/bilalbutt/media-query-generator/blob/main/index.php"
click node_styling "https://github.com/bilalbutt/media-query-generator/blob/main/css/style.css"
click node_controls "https://github.com/bilalbutt/media-query-generator/blob/main/js/custom.js"
click node_query "https://github.com/bilalbutt/media-query-generator/blob/main/js/custom.js"
click node_formatter "https://github.com/bilalbutt/media-query-generator/blob/main/js/custom.js"
click node_legacy "https://github.com/bilalbutt/media-query-generator/blob/main/index-bk.php"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_form,node_styling toneBlue
class node_controls,node_query,node_formatter toneAmber
class node_legacy toneMint
class node_developer toneIndigo
```

## Components

### User Interface

- [Generator Form](https://github.com/bilalbutt/media-query-generator/blob/main/index.php): `index.php`
- [Page Styling](https://github.com/bilalbutt/media-query-generator/blob/main/css/style.css): `css/style.css`

### Query Generation

- [Form Interactions](https://github.com/bilalbutt/media-query-generator/blob/main/js/custom.js): `js/custom.js`
- [Query Builder](https://github.com/bilalbutt/media-query-generator/blob/main/js/custom.js): `js/custom.js`
- [CSS Formatter](https://github.com/bilalbutt/media-query-generator/blob/main/js/custom.js): `js/custom.js`

### Legacy Version

- [Legacy Generator](https://github.com/bilalbutt/media-query-generator/blob/main/index-bk.php): `index-bk.php`

### Other components

- **Developer**

## Connections

- Developer → Generator Form: configures (evidence: `index.php`)
- Generator Form → Page Styling: loads styles (evidence: `index.php`)
- Generator Form → Form Interactions: loads script (evidence: `index.php`)
- Form Interactions → Generator Form: reads controls (evidence: `js/custom.js`)
- Form Interactions → Query Builder: builds queries (evidence: `js/custom.js`)
- Query Builder → CSS Formatter: optionally formats (evidence: `js/custom.js`)
- Legacy Generator → Developer: alternate interface (evidence: `index-bk.php`)