Hello,
Is there an opportunity to create breakpoints which will be reflected in html & css code with Penpot?
I’m just starting out and would like to create a simple, responsive page in penpot. Do you build pages with penpot? What are the most serious limitations of this tool if I want to use code straight from the editor to the html/css page with possible later extension with javascript on my own?
There’s no way to design for breakpoints in Penpot though I often create designs featuring different breakpoint sizes.
I do this using a different board for each breakpoint (generally I aim to have as few breakpoints as possible… that’s the developer side of my brain talking!) then I make most of the design up out of components. This way I can switch out components to fit the different boards. For example, I might have a compact vertical navigation that I use on mobile-sized breakpoints which I swap out for a horizontal navigation for wider viewports.
This would depend on your design, but I’d say it was absolutely possible. I would personally tweak the HTML elements to use more semantic elements, for example using h1 for headings, ul for lists etc, but it all renders well. There’s also a plugin to export your design as Tailwind HTML if you prefer working with a framework like that.
