Technical Specification: Interactive CSS Flexbox Playground & Code Generator

Overview

A clean, efficient, and highly visual web utility for front-end developers to experiment with CSS Flexbox properties. The app provides a live-updating viewport where users can modify container properties and see immediate visual feedback, with the corresponding CSS code generated dynamically.

Core Features

• Live Property Controls: Sidebar toggles and sliders for common Flexbox properties:
  • Container: display, flex-direction, flex-wrap, justify-content, align-items, align-content, gap.
  • Children: Selectable items to set individual flex-grow, flex-shrink, and flex-basis.
• Dynamic Child Management: Add or remove flex items in the container to test wrapping and overflow behavior.
• Real-time CSS Output: A syntax-highlighted code display area that updates instantly as properties change.
• One-Click Copy: Integrated button to copy the generated CSS directly to the system clipboard.
• Visual Resizer: A container resizer handle to simulate mobile/tablet/desktop width changes within the preview pane.

UI/UX Design

• Layout: Three-pane design.
  • Left: Control panel with collapsible sections.
  • Center: Live Preview viewport with a subtle, clean grid background.
  • Right: Read-only Code Output pane with syntax highlighting.
• Visual Style: Clean, modern "SaaS" aesthetic.
  • Background: Off-white (#F9FAFB).
  • Accents: Professional blues/indigos (#4F46E5) for active states and highlights.
  • Typography: Sans-serif (system-ui).
  • Shadows: Subtle, soft elevation on the Preview container and Code panel.
• Animations:
  • Smooth layout transitions when flex properties change (CSS transition: all 0.3s ease).
  • Soft fade-in for code blocks.
  • Hover effects on buttons and interactive toggles.

Technical Constraints & Directives

• Framework: Use only Vanilla HTML5, CSS3, and JavaScript (ES6+).
• No Persistence: Do not use localStorage, sessionStorage, or cookies. The state must be managed strictly in-memory.
• No Build Step: Include Tailwind CSS via CDN for styling. Use standard <script> tags for utility libraries if needed.
• Iframe Compatibility: The application will run in a null-origin iframe. Avoid all external redirects or non-secure popups.
• Alerts/Modals: Replace alert() or confirm() with custom HTML modal overlays to ensure they function within the sandboxed environment.
• Responsive Design: The app must adapt its layout (e.g., stacking panels) when the browser viewport is below 768px.
• No Branding: Ensure the interface is purely utilitarian and functional. No fictional company names or logos.