Genstyl — Design System tool | Responsive breakpoints
#DesignSystems #UIDesign #UIUX #FrontEnd #BuildInPublic #WebDesign #ComponentLibrary #DesignToCodebase #ResponsiveDesign
Join the waitlist 👇🏻
https://genstyl.ovidiu.works/?utm_sou...
Responsive design isn't just about forcing UI elements to fit within a certain number of pixels. But you have to start somewhere. Most of the time, changing the flow of elements is enough. You don't need a custom mobile navigation system when you only have two links.
I've started working on responsive breakpoints in Genstyl. The idea: create custom breakpoints per project, with the ability to pick from presets or define your own.
Moving quickly between breakpoints with instant feedback felt like a must, so I built a viewport switcher that immediately shows where problems arise.
Some properties are responsive, some are not. Changing the content of a heading between breakpoints doesn't make sense in this model. It's better to use a common pattern: create separate elements and control their visibility per breakpoint.
What surprised me was how fast these tweaks can be compared to doing them directly in code. Swapping horizontal to vertical flow, adjusting spacing (effortless when using units derived from typography rather than pixels), toggling visibility for things like hamburger menus vs desktop navigation.
There's also the possibility to tweak typography per breakpoint, but I haven't committed to that yet. On the exported code side, it's easy to change one value below a breakpoint to scale the entire UI proportionally. Props to using rem and proportional units throughout!
The aim is to provide a good foundation starting from the design system, so designers and developers can focus on what matters: building a great user experience.
What responsive-specific tools would you like at your fingertips when designing?