I was thinking the other day that what might be super useful in this age of multiple screen sizes and responsive design that having multiple layouts with various breakpoints on a component might be super useful.
For instance lets say you have a component that when it’s on a wide canvas of X width, the layout direction would be row but on a smaller canvas when you place your component you could have a layout direction of column. As your canvas changes size it could use different layout rules almost. Similar to the way we do @media queries in CSS to change the layout of the screen depending on the size of the screen.
How I handled this as a designer is creating several screens next to each other and resizing them. Given flex layout and constraints, this is surprisingly quick in many cases.
This might seem less efficient but has some advantages. While one code should work for different screen sizes (and thus has either-or-conditions like media queries) as a designer, I want to look at different sizes at the same time and see what e.g. should or should not show between versions, without having to manually toggle to different screen sizes. This also leads to having checked-by-designer versions of the code that does not have unexpected side effects that developers accidentally recreate.
Yeah makes sense. I was thinking more like a dev making one component that gives all the CSS for easy handoff as apposed to how the screens actually look on all the boards at various sizes.
@jdittrich, couldn’t you make one board with the design, then make it into a component (nestled), then using 2 different size breakpoints with flex-layout to automatically do that for you? This depends of course on setting up everything on the board to work with flex-layouts.
So long as you don’t rest the component it could work … maybe :).
This way you have one code. I haven’t tried this yet, but remember the watch example Penpot did with nestle boards.
then make it into a component (nestled), then using 2 different size breakpoints with flex-layout to automatically do that for you?
If a breakpoint function would exists that would be a way to do it, but I think that by having such functions, one would easily combine the indirection of code with the non-scaleability of direct visual design, not using the advantages of either.
