Designing an optimal CSS "contract" for rendering arbitrary web components in different contexts
Hello front end friends! I am building a product that generates overlays/widgets for streamers. Basically just arbitrary bundles of JS and CSS that can respond to events from streaming platform APIs and plugs into OBS or other broadcasting software.
The challenge I'm facing is that the overlays created can be rendered in all kinds of different contexts (eg. a small card in a gallery, a half-screen design page, a full-screen browser-source plugin to OBS, etc.). Additionally, the overlays are completely arbitrary dimensions. It could be super wide (like a scoreboard or a scrolling marquee), square (chessboard, chats) or tall (vertical bar graph, top scores).
To render overlays attractively, there are 2 important considerations:
1. The hosting context CSS (ie the div that contains the overlay)
2. The overlay-specific CSS I force upon the AI generated code to fit nicely and dynamically in many contexts
I am extremely not an expert at this stuff and have been able to hack something together, but I'm curious if anyone has any good ideas or places to read up for how to approach this
The challenge I'm facing is that the overlays created can be rendered in all kinds of different contexts (eg. a small card in a gallery, a half-screen design page, a full-screen browser-source plugin to OBS, etc.). Additionally, the overlays are completely arbitrary dimensions. It could be super wide (like a scoreboard or a scrolling marquee), square (chessboard, chats) or tall (vertical bar graph, top scores).
To render overlays attractively, there are 2 important considerations:
1. The hosting context CSS (ie the div that contains the overlay)
2. The overlay-specific CSS I force upon the AI generated code to fit nicely and dynamically in many contexts
I am extremely not an expert at this stuff and have been able to hack something together, but I'm curious if anyone has any good ideas or places to read up for how to approach this
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
