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.
I believe this is the last Killer Feature Penpot needs to implement. Coming from Figma, I love how tightly Penpot mirrors HTML/CSS - but media queries are an essential component of responsive design that is missing.
Implementation should be EXACTLY like Google Chrome’s Inspector in responsive preview mode. I say exactly, because there’s no point in re-inventing the wheel. Penpot would be better served by emulating tools that webdev/designers have been using for years, rather than creating their own paradigms.
So, have a “responsive view” mode, which takes the current page/frame and fills the window just as it would be if you opened the webpage in a web browser. Then you should be able to pick a size from a pull-down list of sizes OR go into full responsive mode where you can resize the preview window horizontally by dragging it to see how the layout changes as you cross the breakpoint thresholds, just like designers and developers do today in Chrome inspector.
