Genstyl — Design System tool | Responsive CSS
#DesignSystems #UIUX #FrontEnd #BuildInPublic #WebDesign #DesignToCode #ResponsiveDesign
Genstyl's waitlist here 👇🏻
https://genstyl.ovidiu.works/?utm_sou...
Time for an overdue update: Responsive design, from Genstyl to CSS.
These past few weeks I've worked on the backbone of Genstyl—the overrides engine—how data is interpreted, reconciled, and converted to CSS, embedded into components and layouts. It paves the way to multi-flavour output (different frameworks and file formats) and also another milestone on the roadmap: component states (or variants) like hover, disabled, or custom ones such as "active" or "selected" (that’s a different post though).
Once I could cycle through breakpoints, it became clear you need to inspect the spaces between them too. A few static screen sizes in a design tool aren't enough. Even simple UIs need small tweaks here and there to feel polished.
The simple solution: viewport resizing. Find something that needs adjusting at an arbitrary viewport width, "cut" a breakpoint right there and tweak settings on the spot. No context shifting, no translating visual intent into code, all in the editor.
Breakpoint-controlled visibility was also key. Some elements don't make sense on small screens. Others need to look entirely different on mobile vs desktop—sometimes the HTML structure can't support that cleanly. Swapping elements per breakpoint solves it.
On the export side: components with responsive tweaks get the CSS embedded in their own files. Layout-specific rules stay at the layout level. I also didn't want redundant properties in the output, so there's quite a bit of sorting and diffing behind the scenes to keep things clean.
Still plenty to improve, but it's in a good spot for an initial release.
Progress, not perfection.