CSS Media Query Generator Specification

Overview

This single-file application is a professional-grade developer utility designed to generate standard CSS media query boilerplate. The tool focuses on precision, ease of use, and instant code generation for modern responsive web development.

Core Features

• Live Code Generation: Real-time CSS output based on user inputs.
• Preset Management: Quick-select buttons for common industry standards (Mobile: 480px, Tablet: 768px, Desktop: 1024px, Large: 1200px).
• Unit Flexibility: Toggle between px, em, and rem units automatically.
• Workflow Toggle: Switch between "Min-Width" (Mobile-First) and "Max-Width" (Desktop-First) generation logic.
• One-Click Copy: Integrated "Copy to Clipboard" feature with visual success feedback.
• Responsive Preview: A visual slider that illustrates where the generated breakpoints sit on a viewport scale.

UI Layout

• Header: Clean, minimalist title "CSS Media Query Generator".
• Configuration Panel (Left/Top):
  • Radio selection for min-width vs max-width.
  • Unit selector (select dropdown).
  • Breakpoint input fields (number inputs with increment/decrement buttons).
  • "Add Breakpoint" button to stack custom queries.
• Output Area (Right/Bottom):
  • Syntax-highlighted code block container using a clean, light-theme monospace font.
  • "Copy Code" button with a subtle transition effect upon clicking.

Design & Aesthetics

• Palette: Use a clean light-mode palette: #FFFFFF (background), #F8FAFC (surface), #2563EB (primary action blue), #334155 (primary text), #64748B (secondary text).
• Typography: System-ui stack (Inter, sans-serif) for high readability. Monospace for code output (Fira Code or Courier).
• Transitions: Smooth 200ms easing for UI interactions (buttons, hover states, code snippet expansion).
• Shadows: Soft, professional drop-shadows on card elements to provide depth without clashing with the light-mode theme.

Technical Implementation Directives

• Architecture: One single HTML file containing internal <style> and <script> tags.
• Dependencies: Use Tailwind CSS (via CDN) for styling; use a lightweight library like Prism.js or simple CSS styling for syntax highlighting.
• Constraints:
  • No Storage: State must be held in JS variables only. Do not attempt localStorage or sessionStorage.
  • Iframe Safe: Avoid full-page redirects or popup windows. All interactions (errors, notifications) must occur inside custom HTML modal components.
  • Performance: High performance through efficient DOM manipulation. Update the DOM only on input change events.
  • Accessibility: Ensure high contrast ratios and keyboard navigation support for all input fields.
• Responsive Design: Stack the control panel and the output panel vertically on mobile; use a side-by-side flexbox or grid layout on desktop resolutions.