How amruthadesai/css-playground works
A single-page, dependency-free playground lets learners configure Flexbox or Grid layouts, adjust container and item settings, and see a live preview alongside generated HTML/CSS. README documents theme switching, item management, colors, and a resizable preview. The tree contains only index.html, so these capabilities share that path; internal event wiring and implementation details cannot be verified from sampled source.
Main entry points: index.html Playground UI
Components 11
Layout Playground
- Playground UI
index.html - Flexbox / Grid
index.html - Container Controls
index.html - Item Controls
index.html - Item Management
index.html - Color Picker
index.html - Theme Toggle
index.html
Preview & Output
- Live Preview
index.html - Code Generator
index.html - CSS / HTML Output
index.html
Other components
- Learner
Connections 10
- Learner → Playground UI: uses
- Playground UI → Flexbox / Grid: offers modes
- Playground UI → Container Controls: offers controls
- Playground UI → Item Controls: offers controls
- Playground UI → Item Management: offers actions
- Playground UI → Color Picker: offers picker
- Playground UI → Theme Toggle: offers toggle
- Playground UI → Live Preview: shows layout
- Playground UI → Code Generator: generates code
- Code Generator → CSS / HTML Output: produces